MEAN: how to start.

This is part 3 of a 3 part series. Part 1. Part 2.

If you want an in-depth guide on how to get started with the MEAN stack, you should really pick up my book. Still, this should offer a quick overview to help you get started.

Here is the completed project.

Learn to love the boilerplate

As I’ve said in the previous posts, MEAN is all about boilerplate. You’ll be writing it yourself, or at least copy+pasting. I would try to make sure you understand every line of it. Just because it’s boilerplate and has to be there for the app to even get started, this doesn’t mean it isn’t significant. In fact since this code generally runs on every request, it’s arguably the most important code in your codebase.

This boilerplate might setup things like authorization or http cache headers that are important for you to understand so when things inevitably go wrong later, you know exactly where to look and how to make the modifications.

Start with a basic Node server.

First we need to make a Node app. Here’s how I like to do this:

$ mkdir simple-mean
$ echo '{}' > package.json
$ npm install --save express ejs body-parser mongoose

Now create a file server.js. With the following:

Now start the server:

$ node server.js

But you probably don’t want to have to restart the server every time you make a change so once this is working, switch to nodemon and get code-reloading:

$ npm install --global nodemon
$ nodemon server.js

Alright, now if you go to the page, you’ll see an error like the following:

This just means we need to create the index view. Create a file at views/index.html.ejs:

Now you should see It works! In your browser.

Add in some Angular.

Now that we have a working node server, let’s add in Angular. Edit views/index.html.ejs to the following:

Note that we haven’t yet added scripts/app.js yet.

Now if you reload the app you’ll get an error because we haven’t created this Angular app in the JavaScript code. Let’s do that now. Create a file public/scripts/app.js with the following:

Now we need to get Node to serve that file. Edit server.js:

Now you should see those sample todos and be able to add a new one:

Add MongoDB.

Now that we have Node and Angular setup with a demo todo app, let’s complete the app by connecting it to a database.

First let’s make make a request from Angular to Node to add a todo. Edit public/scripts/app.js:

Now if we refresh the page we can see Angular attempting to make this request:

Now we can create this endpoint in Node. Open server.js and add this code to connect to MongoDB and add the todo to the collection. You’ll need a MongoDB instance running locally but you don’t need to setup the collection beforehand. I’ve also added the endpoint to list all the todos out of the database and remove one by ID (note that I won’t complete this remove functionality on the front-end, that’s your homework).

Now change the Angular code to read from the API both when first loading as well as after adding a new todo to the list:

Here is the complete example.

Next steps.

I would break up server.js into separate files. One with all the requests, another with the DB model.

Check out my article on Gulp to see how to setup a build system for Angular and not have all the client code in a single file.

You could complete the front-end by adding a small delete button next to each todo to call the DELETE /api/todos/:id endpoint I added.

Once that is in place, I would add in JWT-based auth to the setup, then the app should be ready to build your product.