Wow, you really need to learn a lot to get started developing web applications with Node. Last week I started work on my next project Kwota.io, and I promised myself I would use this opportunity to learn most of the MEAN stack, i.e. MongoDB, Express, Angular, and Node.js (sans the Angular at this time). It didn't take long for my head to start spinning. This stuff really isn't that difficult if you take it piece by piece, but as a whole it seems quite daunting.

There are literally (and by literally I mean figuratively) a bajallion (my technical term for the day) different tutorials on how to get started with each of these. Since it seems like the happening thing to do, and I need a blog post topic to fill my quota, I thought I would create a post outlining how I got thing set up. I am mostly doing this so that I can return to this post when I forget how I did any of this. Maybe I'll land 1 nugget of useful information for you. A guy can dream can't he?

I'm going to do this in a series of posts. I originally wanted to do this as a single post, but as I got into it I realized that I would need several more hours to complete the sucker and decided to split it up instead. This is probably a good idea as I have at least 2 more blog posts from this one series.

Part 1: Pretty Much The Hello World Stuff

Unless you really haven't been paying attention to anything in the last few years, you probably know that Node.js is at the heart of building web applications with this stack. Node.js allows you to run JavaScript on the server. Before we can build our website we need to get this downloaded and installed.

Because I am a nice guy, here is a link to the download page: https://nodejs.org/en/download/. Hopefully you speak English because I have a feeling that /en/ in the URL means English ;-).

I chose to download the LTS Mature and Dependable installer because I like my JavaScript platforms to reflect my personality. Also, I chose 64-bit because 32 is only 1/2 as good (or so I am told).

Once you get it downloaded (hopefully you're not on 56k) you'll want to run the installer. Be sure to install the npm package manager and Add to PATH. These should be installed by default. That being said, just open the installer, click next until you get the install button, think for 1 second, click install, and then move on. (I should mention that I use Windows so this will be geared toward that platform. I would imagine much of it could cross over to Linux or Mac, but I'll leave that for you to figure out).

Yay, you should have Node.js installed. Open up your command prompt and type:

node -v

You should get the version echoed back to you.

If you are familiar with JavaScript, but not Node you should be able to figure things out well enough. The Modules module is one of the things readily available and widely used by Node.js that isn't readily available with client side JavaScript. The "require" function is kind of like importing in Python. This allows you to easily split up your code into cohesive modules.

Here is a hello world using Node and Modules. Create a file hello.js. And plop this in there...

What is assigned to module.exports is what is returned when you call require. Next create an app.js file that looks like this:

Hello is assigned to module.exports which is then required (imported) into app.js and assigned to the hello variable. This is pretty simple stuff. To run this program simply open a command line in the folder where app.js lives and run:

node app.js

Presto! You've got your hello world in Node.js completed. Here is the reference to how modules work in Node.js in case you need it: https://nodejs.org/api/modules.html

#file-hello-js

NPM and Express Application Generator

Assuming you've made it to this point you should have NPM installed. In case it wasn't obvious to you NPM stands for Node Package Manager. Clearly they didn't have the creative talent to name it something like NuGet so we can get all sorts of punny additions and spins offs like Chocolatey. That being said, NPM is pretty awesome, there are a ton of libraries available on it (see https://www.npmjs.com/), and we'll use it to get most of the libraries we'll need.

When I started down this path I made myself do a bunch of stuff from scratch. Why? Because scaffolding puts a bunch of stuff in place that just magically works, and I like to try and understand what is going on instead of just relying on what others have put forth. That being said, scaffolding is a lot easier and the Express application generator tool will give you a nice clean foundation to build your first steaming pile of crap on. Open up a command line and type the following to install it:

npm install express-generator -g

The -g means it will be installed globally instead of locally. Installing it globally means you can hose up your local project all day long and still have express generator sitting out there to use again. When that is done run the following:

Express steaming

I've decided to call the project 'steaming' in reference to a previous paragraph where I mentioned your first app will be a steaming pile of crap. Once it looks like it has completed you should get a bunch of folders and files. It should look something like the image below and to the right.

Here is a breakdown of what you are seeing:

/bin/www - this is actually a JavaScript file, in Express 4.0 they suggest you put all of your scripts in here, read more here
/public - this houses all static files that will be served up the way http was intended, e.g. images, client-side JavaScript files, css, etc...
/routes - These files are where you define chunks of code to run as web requests come in, kind of like controllers in ASP.NET/MVC or views/url-patterns in Python/Django
/views - The .jade files are HTML templates
app.js - this gets run when your application starts up, you setup a bunch of stuff here like event handlers
package.json - stores startup information and dependencies, see below

When you run the Express command it creates a manifest of dependencies used by this project in the package.json file. It should look something like this:

{

 "name": "steaming",

 "version": "0.0.0",

 "private": true,

 "scripts": {

 "start": "node ./bin/www"

 },

 "dependencies": {

 "body-parser": "~1.13.2",

 "cookie-parser": "~1.3.5",

 "debug": "~2.2.0",

 "express": "~4.13.1",

 "jade": "~1.11.0",

 "morgan": "~1.6.1",

 "serve-favicon": "~2.3.0"

 }

}

The dependencies are not installed when the project is created. To do that you must run another npm command. Use the following command to download everything that is missing:

cd steaming

npm install

The npm install command looks at package.json and downloads any missing dependencies to a node_modules folder. If you are storing your project to source control using git you can add this folder to your .gitignore. This allows you to note the dependencies the project has without storing them to the repository. Its a pretty nifty setup.

The rest of the package.json file should be fairly self explainatory. Noe that the "start" script is something that can be run from npm as well. To say hello to the steaming pile of crap we'll be creating you just need to run a simple command:

npm start

Yeah, it's pretty darn anti-climactic when you do this because the web browser doesn't kick off. To see your project in action you need to open up a browser and navigate to http://localhost:3000. I've provided a link to this because I am a nice guy. You'll know it is working if you get something like this:

Yay! You have a website. That's all for now.

Okay, not really...

Visual Studio Code

Of course you could do this entire project from the command line and use notepad, but I would suggest you use an IDE of some kind. I have become partial to Visual Studio Code as it has great support for Node and, since you can use it on Linux and OSX, you can follow along if you aren't a Windows fan like me. You can get your very own copy of it for free from the website here: https://code.visualstudio.com/. Once you have it installed you can launch your project right from the command line using this command:

code .

VSCode should launch and you'll see your project files in the explorer sidebar. The screen shots I used in the section above are all straight from the editor.

To enhance your experience with VSCode you can install a thing called Typings. Typings is the type definition manager for TypeScript. Since plain old JavaScript IS TypeScript you can get the benefits of the type information without actually needing to use TypeScript in your project. Open the command line once again and run the following in sequence:

npm install -g typings

typings install node --ambient

typings install express --ambient

A folder will be added to your project where the typings are stored. I would add this to .gitignore if you are using git for your source control.

To setup debugging simply hit F5 and select Node.js as your debugging environment.

This will add a .vscode folder to your project with configurations for properly launching your express application. I would recommend adding this folder to .gitignore as well.

Press F5 and your application should start just as it did when we ran npm start.

Hurray! That was easy! See more information on setting up VSCode for Node here: https://code.visualstudio.com/docs/runtimes/nodejs.

Express and Jade

Node.js provides us the language and platform for building websites and applications using JavaScript. Express is a framework for handling HTTP requests. Jade is a template engine. Full information on Express can be found here: http://expressjs.com/. Documentation on Jade can be found here: http://jade-lang.com/.

Let's take a look at what the Express application generator gave us in /routes/index.js. It should look something like this:

Express is brought in to create a Router. A router is configured to look at incoming HTTP requests and route them to a function in JavaScript. In the default case provided, when a HTTP GET is issued for the root of the website, the function passed as the second parameter gets called. The res.render function that is called tells express to render the index.jade file passing 'Express' as the title argument. Note that the default example uses get, but post, put, and delete are all supported here.

If you take a look at index.jade you should see something like this:

The syntax for Jade looks a bit cryptic to start, but it is pretty easy to get the hang of. You'll see that the title argument is injected into h1 tags via h1= title. The = indicates that the variable passed in should be substituted, otherwise you'd literally see the word "title" when you ran this. You can see that the <p> tag has some static text and the title is injected inline using #{}. This is another way to inject data into the Jade template.

index.jade extends layout.jade which should looks something like this:

If you combine the two and are familiar with HTML you should pretty quickly see the pattern that Jade uses to actually render the final HTML. The rendered version looks like this:

Jade uses indentation to denote blocks much in the same way Python does. If you are familiar with Python and HTML then Jade should come fairly easy to you.

Next Time...

This is all I am going to cover for now. In Part 2 we'll start creating our own Jade views and Express routes and setup MongoDB and Mongoose. In Part 3 we'll add authorization/authentication using Passport and Mongoose. After that I really have no idea if I'll do another one.

Thanks for reading!