Node.js:

    Getting started with Node.js

    Introduction

    This guide is going to help you start developing your Node.js applications at SourceLair and make the most out of SourceLair's capabilities.

    This guide assumes that you already have:

    Creating a Node.js project will provide you with everything you need to get started.

    Installing dependencies

    The easiest way to install a dependency for your project is by running npm install mypackage (e.g. npm install gulp) in your terminal.

    The best way to install the dependencies of your Node.js project though is by creating a package.json, where all your dependencies will be listed. Then you can install all your dependencies, either by opening the Command Palette (type Ctrl + Shift + P on your PC or Cmd + Shift + P on your Mac) and running the Node.js: Install npm dependencies command, or by running the following command in your terminal

    npm install
    

    Example package.json file

    {
      "name": "my-project",
      "dependencies": {
        "gulp": "3.9.1",
        "xterm": "0.33.0"
      }
    }
    

    Setting up your server

    SourceLair provides all Node.js projects with a dedicated, publicly accessible web server to run and view your Node.js web applications.

    SourceLair detects automatically how to run the server of your application from your project's structure or the start entry in the scripts section of your project's package.json file -- if it exists. You can start, stop and restart your server by using the corresponding commands in the Command Palette (e.g. open the Command Palette and type server: restart, to restart the server of your Node.js application).

    Attention though: Your server has to listen to port 3000 or the $PORT environment variable, in order to work properly.

    Automatic reloading

    SourceLair ships with nodemon pre-installed and automatically reloads your application when you save a file in your project.

    Example package.json file with custom server command

    {
      "name": "my-project",
      "dependencies": {
        "gulp": "3.9.1",
        "xterm": "0.33.0"
      },
      "script": {
        "start": "node app.js --host=0.0.0.0 --port=3000"
      }
    }
    

    To learn more about how to set up your Node.js server properly, please take a look also at our respective help article.

    Previewing your application

    After you have set up your server, you can preview your application through your project's Public URL. To access your project's Public URL, open the Command Palette and use the Server: Open Public URL command.

    Alternatively, you can click on the eye icon in the sidebar, to open your Public URL and preview your application.

    Running npm scripts

    SourceLair automatically detects the scripts in your package.json file and lets you access them through the Command Palette, by running a Node.js: script name command. So for example, if you have defined a build script in your package.json file, you can run it through the Node.js: build command in the Command Palette.

    Example package.json file with scripts

    {
      "name": "my-project",
      "dependencies": {
        "gulp": "3.9.1",
        "xterm": "0.33.0"
      },
      "script": {
        "start": "node app.js --host=0.0.0.0 --port=3000",
        "build": "browserify main.js"
      }
    }
    

    Auto complete

    SourceLair provides you with intelligent as-you-type auto complete for your JavaScript files. Whenever you type, when editing a JavaScript file, SourceLair will display code suggestions for you that save you time from typing. This feature is enabled by default.

    To disable the as-you-type auto complete open up your Control Panel, navigate to your Editor Settings and just uncheck the Show suggestions on keystroke option. To display suggestions manually afterwards just hit Ctrl + Space when you need them.

    Error reporting

    Our editor will automatically check your JavaScript file for syntax errors when you save it and display all errors and warnings at the left side of the editor, next to the line number. This way you can produce better and safer code, since you do not have to run your application before correcting your mistakes.

    If you find this feature too intrusive for you, just navigate to your Editor Settings and switch the JavaScript linting option off.

    Tips for JavaScript

    Last we would like to share with you some great tips that can make JavaScript development much more pleasant:

    • By pressing Alt and clicking on a class or method name, it will open up the file where this class or method is defined and scroll you down to this position
    • Add node_modules in its own line in .gitignore, to avoid committing your dependencies into Git
    • Add the following entries in your .editorconfig file's [*.js] section, to facilitate collaboration in JavaScript projects:
      • indent_style = space and indent_size = 4 to standardize indentation to 4 spaces
    • Do everything from your keyboard with the Command Palette: Press Ctrl + Shift + P on your PC or Cmd + Shift + P on your Mac
    • Open files rapid-fast from your keyboard: Press Ctrl + Shift + O on your PC or Cmd + Shift + O on your Mac

    Conclusion

    So that was it! Now you are ready to start developing your Node.js applications in SourceLair.

    If you have any questions or run into any trouble remember to use the Help: Contact us command from the Command Palette.