MEAN Stack - getting started for beginners

9 min read Original article ↗

If you’re looking for a tutorial series that steps you through everything you need to create your first Web App with the Mean Stack. You’re in the right place 🙂

The MEAN Stack

If you haven’t already, check out the other posts in this series: It’s easier than you think, lets build a web app

Where do I start?

The hardest part of web development is not knowing where to start, and over thinking the process. Once you’ve jumped over that hurdle, you’ll wonder what you were so worried about!

The thing is, anyone can learn how to code.

After living life as a designer, I started to self-learn how to code by using random snippets that I found on blog posts, videos and forums like stack overflow. I built and sold my first web-app in the first month.

One of the first things that I learnt about web development was that almost every developer works on a JIT (Just In Time) approach to development. They learn (or use Google to find) what they need to know, when they need to know it.

With technology changing all the time, and answers to almost every foreseeable question posted somewhere on the web, there’s no need to memorise code. The key is in understanding the frameworks, understanding how things fit together, and getting really good at performing Google searches.

So knowing that you should be able to Google your way out of any error or issue you find along the way, here are the steps that you need to get started.

There are a few steps here, so take a breath and we’ll go through them one sip at a time.

During the set up process you will have at least 3 applications open:

  1. a command line utility (e.g. command prompt, powershell, xcode),
  2. a browser (e.g. chrome), and
  3. a code editing program (e.g. WebStorm)

Set up your environment

If you’re using a Windows machine, you have a couple of extra steps to do before you start:

  1. install Python 2.7.x
  2. install Microsoft Visual Studio C++ 2012 Express

On Windows/Mac/Other:

    1. install Node.js
    2. install Git

You can read more about Git in my post over here: Do you git it? Open source tips and tricks

When downloading the software above, get the most recent versions for your operating system and follow the prompts to do the installations. The default settings will work just fine.

Once you’ve installed the software above, you’re set to use almost any Node.js based code.

Get a good IDE for web development

IDE stands for integrated development environment. IDE software provides lots of tools in one place. Most developers that I know use: Webstorm or Sublime text.

I use Webstorm, because I’m familiar with it, and it’s easier for me to jump across to Android Studio to do Android development, as they are both based on IntelliJ IDEA.

You should use whatever you’re comfortable with.

Start the global MEAN Stack installation

We begin the installation process by using Node.js to install a few key programs globally on your computer. Installing something globally means that you install it once, and you can use it for all of your apps.

Quick Tip:
The installation process for the MEAN Stack uses the command line (e.g. command prompt, powershell, xcode). If you’re running Windows, then you need to start your command line tool as an administrator. To do this, find the icon for the application that you want to run, right click on it and select “Run as administrator”.

Now that we’ve got the command line open. Let the installations begin!

We’ll use npm – Node’s package manager to install a set of packages.

Look for for all the references of npm below.

Quick Tip:
When you see the “$” icon next to the code below – the “$” sign is a universal way to indicate that a line of code should go into your command line program. So, don’t copy the $ symbol, but do type (or copy) the text that comes after it into your command line program (command prompt, powershell, xcode).

Install Bower globally:

Bower is another package manager. It can be used when you want to add packages of code to your web app, Bower can help you quickly install the code, and help you upgrade to newer versions.

Why do we need two package managers? At a high level, npm (Node’s package manager) is used for node and server side packages, whereas Bower is often used for client side packages.
$ npm install -g bower

Install Grunt globally:

Grunt helps you automate repetitive tasks. Grunt comes in lots of different varieties, and its job is to make your job easier.
$ npm install -g grunt-cli

Install Yo globally:
Yo is a scaffolding tool. It can be used to create and set-up your app by asking you questions, taking your input and pre-filling parts of your app based on your preferences. It can also help you to quickly create and extend parts of your app.
$ npm install -g yo

What Flavours of MEAN can I get?

There are quite a few variations of the MEAN Stack on GitHub. The two key repos are:

I think that MEAN.JS is a good place to start for beginners, especially to leverage Yo.

Install the MEAN.JS generator:

The MEAN.js generator is the MEAN based code that will be used by Yo to help you pre-populate parts of your app.
$ npm install -g generator-meanjs

Create your MEAN App

Now we’ll use Yo and tell it to take the mean.js generator, and create a new app. The next set of installations will all be done ‘locally’ – within the folder of our new app.

Almost there!

Create and Navigate into the directory where you want to create your project.

For example: if I wanted to set up my MEAN app in a new folder called myMEANProject, I would do the following:

$ cd C:\Users\Jane
$ mkdir myMEANProject
$ cd C:\Users\Jane\myMEANProject

Run the MeanJS Generator

The last step is to generate a new MEAN app using Yo and the MEAN generator that we installed above:
$ yo meanjs

This tells ‘Yo’ to use the ‘meanjs generator’ to ask you a set of questions – answer each question and hit the Enter key to move onto the next question.

Once you get to the end, the relevant dependencies (the packages of code that your app will use) for the MEAN stack will be installed.

Grab some hot chocolate (or a coffee, vodka, wine, beer – however you roll). This will take a few minutes.

Help! It didn’t work!

If you get to the end and the process fails, then do the following:
Only if the install fails, try one of these:
1. $ npm cache clean
2. $ npm update
3. $ bower update

Leave your command line tool open. You’ll need it again in a few minutes.

If you’re riding high on the sweet smell of hot chocolate, then please take the crease, you’re about to smash a six.

Set up a MongoDB database:

We’re going to set up a free sandbox account.

Go to Compose or Mongolab and log-in or register for a new account.

If you’re using Compose, I’ve updated the steps to creating a sandbox environment using Compose here.

Why did we just create a Database? Because we need the connection details for our MEAN app to connect to it and save data.

Hint: at this point you should have a string that looks something like this:

 mongodb://user:password@something.mongohq.com:10002/mydatabase

Add your MongoDB to your MEAN app

Open your new app in your IDE, e.g. use Webstorm or Sublime editor to locate and open your project directory.

Once you’ve opened the directory, find the following file:

project/config/env/development.js

We need to update the details of the database connection.

For example, if I created a database with the following details:

Username: jane
Password: janesapp
Database: mydatabase
Server: something.mongohq.com
Port: 10002

Then my development.js file would look like one below:

'use strict';

module.exports = {
 db: 'mongodb://jane:janesapp@something.mongohq.com:10002/mydatabase',
 app: {
 title: 'myApp - Development Environment'
 },

OR

'use strict';

module.exports = {
	db: {
		uri: 'mongodb://something.mongohq.com:10002/mydatabase',
		options: {
			user: 'jane',
			pass: 'janesapp'
		}
	},

Now for the moment of truth!

Pop back into your command line, it’s still open, yeah? :), if not, just open it back up and change directories into your project folder. For example:
$ cd C:\Users\Jane\myMEANProject

In your command line utility, type the following to kick off grunt (Grunt will do the heavy lifting by preparing everything you need to start your app):
$ grunt

At this point you should see a few lines run past on your command line. Once you see the line:
“MEAN.JS application started on port 3000“, then do this:

  1. Open up a browser window (e.g. Chrome) and navigate to http://localhost:3000
  2. If you see the MEAN.js landing page, then:
    • push back your chair
    • jump to your feet (or sit if you prefer)
    • do a little “Because I’m happy, clap along..” dance

Help! I don’t see anything!

If you get to this point and only see a blank screen at localhost:3000, then your client side packages may not have installed.

Have a quick look to see if you have any folders in this location:

YourProject > public > lib > (folders here).

If you don’t have a heap of folders that match up to your bower.json file then don’t stress. It happens.

  • Try the command $ bower update in your command line, or if that fails, then
  • Try $ bower update packageName where ‘packageName’ is the name of each package in your bower.json file that is not in your public > lib folder.