Quite easy, just head over to NodeJs.Org and download and install it. The next step is to install Express. Fire up Git-bash or a command prompt and use the Node package manager (npm) to install Express globally:
npm install -g express
Now, lets use Express to setup a standard layout for us to start with:
express gomalta --ejs --css less
This is basically telling Express to create a new NodeJs app, configured as a webb application using Express. I specifically provided a name "gomalta"
which will make it create the folder. I also selected a specific view engine (default is JADE) and finally I specified I want to use LESS for my CSS authoring (default is plain old CSS).
Almost there. Open up "package.json"
and provide an application name. Also note that the defined packages under "dependencies"
(and their sub dependencies) still hasn’t been installed. Lets fix it. Ensure you are in the same directory as your "package.json"
file and type:
npm install
Watch the colors in the console fly by and rest ensured that you soon will be ready to get your hands dirty. When the install is done, you actually have a webb app waiting to get started. Lets start it:
node app
Fire up your browser of choice (read Chrome) and navigate to: http:localhost:3000
You should be presented with a page saying something like:
Welcome to Express
WebMatrix, IISNode & Visual Studio
You could actually have achieved this using Microsofts WebMatrix, which gives you a NodeJs Express template, which will bring everything down and set you up with Node for IISExpress so that you can host NodeJs apps in IIS. This generated site could then of course be opened and managed in Visual Studio 2012. There’s a nice video about it here: http://blog.stevensanderson.com/2012/07/09/node-js-development-with-webmatrix-2-and-express/
WebStorm
Now lets challenge our selves as Microsoft sheeps and take a step out of our comfort zone. Lets use another IDE, WebStorm, by awesome JetBrains.
After installing WebStorm just open it and use it to creata a new WebStorm project by pointing it to the directory where we created our app.
Making intellisense happy – treat EJS as HTML
The view located in the "views"
directory has a file extension of "ejs"
which will not be picked up by WebStorm as HTML. Either you map it under "File --> Settings"
or you tell Express to use another file extension. Lets check how to do the later. You can get some information about this in the documentation for Express, right here. Basically, I ended up with this:
app.js
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
Now, just rename your view-files from "x.ejs"
to "x.html"
Enable debugging
You can get some official guidance of it here: http://www.jetbrains.com/webstorm/webhelp/running-and-debugging-node-js.html
Guessing I’m “one of thoose” since I went with the manual approach. I downloaded the compressed source code manually (using the link from http://nodejs.org) and extracted it somewhere I was happy with. After that I just pointed out the root-directory of it (the one containing the "src"
folder. That’s it. Now I could debug my files. Sweet! That’s it for now.
//Daniel