Node JS – Working with Sails JS in Unix with VS Code

https://www.codementor.io/nodejs/tutorial/how-to-setup-sailsjs-tutorial-beginners
https://code.visualstudio.com/docs/runtimes/nodejs

Setting up a new project

Install node.js from https://nodejs.org/en

To test that node.js has been installed run “node” from a terminal (is then possible to exit from the node.js console by typing “.exit”).

When using node.js for web development is a good option to use a web framework rather than doing everything from scratch with the raw platform. The most common frameworks are express.js (described in a previous note) and sails.js. The second one, built on top of express.js, simplifies some activity and solves some problem of the original framework. For these reasons this time we’ll use sails.js for our purposes.

Is possible to install sails.js from npm (npm.js is the default package manager for node.js and is automatically installed together with it)

sudo npm -g install sails

The -g parameter tells npm to install the named module so that it’s accessible globally. Is typically only used for packages that provide command-line utilities so that their executable components are available in the system PATH.

To test that sails.js has been installed run “sails” from a terminal.

In order to create a new sails.js project navigate to the folder you want the new project to be created and run:

sails new

To run the new project navigate inside the newly created project folder and then run:

sails lift

Other ways to run the application are the usual pure Node JS way “node app.js” and “npm start”. The last command deserve some additional explanation: npm supports the option “npm run

The new project will be browsable from http://localhost:1337

As always is possible to stop the server by pressing CTRL+C.


Working with NPM

Every Node JS module is normally added through NPM (Node Package Manager) with the command “npm install —save”. This will normally load the module under the “node_modules” folder and will add an entry in the “package.json” file (if we used the “—save” option to save it as a dependency). The entry is useful to be able to restore all the packages (for instance if we just checked in the solution from Git, where the actual modules weren’t included into the branch) by running “npm install” (very similar to NuGet).

In order to globally install a module (like what we did to install Sails JS) we can use the “-g” option (administrator rights required).


Working with VS Code

After installing VS Code from https://code.visualstudio.com/ a very useful option is to add it to the system PATH in order to be able to open it from the terminal. This can be easily done through the GUI by pressing F1 to show the command palette and typing “shell command” to display the “Shell Command: Install ‘code’ command in PATH” command.

From this moment on we’ll be able to open VS Code for a specific location (like the project we just created) by running “code ” from a terminal.

Since we are already on the project’s folder we can open VS Code by running:

code .

We can debug the application by pressing F5 (or from the Debug tab). At the first attempt to start the application we’ll be prompted to select the target platform (we select node.js) and, as result, a “launch.json” configuration file will be created under the “.vscode” folder. From now on we’ll be able to run our application from here (VS Code runs the “app.js” file with Node JS in debug mode).

The “api” folder is where we’ll write the most of our MVC code. Here is where controller and models are defined. By default the root url is bound to display the content of the “views/homepage.ejs” page. This in configured in the “config/routes.js” file, where is possible to define associations between routes and controllers, or even just with views like in this case.


By default VS Code doesn’t recognize the .ejs files used by sails JS to define views, so they will be rendered as normal .txt files. In order to fix this we can click on the label “Plain Text” on the right side of the status bar, then we can choose the “Configure File Association for ‘.ejs'” option to access the “settings.json” where we can override the VS Code default settings. Here is what we have to add:

"files.associations": {
     "*.ejs": "html"
}

After this change we need to restart VS Code to have the .ejs files rendered as .html files.

Advertisements