MEAN stack tutorial: Get started with the MEAN stack

Learn to use MongoDB, Express, Angular, and Node.js to create fast and flexible web applications entirely in JavaScript

Most of us ought to know the acronym LAMP, used to describe web services stacks made with Linux, the Apache web server, the MySQL database server, and either PHP, Perl, or Python.

But another web-stack acronym has come to prominence in the last few years: MEAN—a stack that uses the MongoDB NoSQL database, Express, Angular, and Node.js.

MEAN is one manifestation of the rise of JavaScript as a server-side language, since the most consistent element with all these components is JavaScript. Node.js provides a JavaScript runtime; Angular and Express are written in JavaScript; and MongoDB’s data structures are expressed as JSON (JavaScript Object Notation) entities.

A big part of MEAN’s appeal is this consistency. If you use the same language, and many of the same language concepts, at all levels of the stack, it becomes easier for a developer to master the whole stack at once.

In this article we’ll walk through the components of the MEAN stack, and show how to set up a basic application using those pieces.

What is the MEAN stack?

Most MEAN stacks feature all four of the components—the database, the front-end, the back-end, and the execution engine. This doesn’t mean the stack consists of only these elements, but they form the core.

MongoDB

Like other NoSQL database systems, MongoDB uses a schema-less design. Data is stored and retrieved as JSON-formatted documents, which can have any number of nested fields. This flexibility makes MongoDB well-suited to rapid application development where there are fast-changing requirements.

As with any other database solution, you’ll need middleware of some kind to communicate between MongoDB and the JavaScript components. One common way to do that in a MEAN stack is with Mongoose. This package not only provides connectivity, but object modeling, app-side validation, and a number of other functions that you don’t want to be bothered with reinventing for each new project.

Express.js

Express is arguably the most widely used web app framework for Node.js. Express itself provides only a small set of essential features, the better to keep it lightweight and performant, with any higher-level functionality provided by way of plug-ins.

Because Express is deliberately minimal, it doesn’t have much conceptual overhead associated with it. The tutorials at Expressjs.com can provide a quick overview of the basics.

Angular

Angular (formerly AngularJS) is used to provide the front end for your app. It uses the browser’s JavaScript to format server-provided data in HTML templates, so that much of the work of rendering a web page can be offloaded to the client. Many single-page web apps are built with Angular as a front end.

One important caveat about Angular: Developers work with it by writing in TypeScript, rather than JavaScript. For some people this is a slight violation of one of the cardinal concepts of the MEAN stack—that JavaScript is used everywhere and exclusively in the stack. On the other hand, TypeScript is a close cousin to JavaScript, so the transition between the two isn’t as jarring as it might be with other languages.

For a deep dive into Angular, InfoWorld’s Martin Heller has you covered. In his Angular tutorial he’ll walk you through the basics of creating a modern Angular app.

Node.js

Node is the JavaScript runtime that powers both Express and Angular, as well as any other JavaScript code, libraries, or packages you decide to add to your MEAN stack. For a headfirst dive into Node, check out Martin Heller’s explainer.

MEAN stack setup

Of course MEAN is not one product but a collection of them. As a result, there are a number of different approaches you can take to getting everything installed.

However, before you get started with the work of actually creating a MEAN stack, take a moment to consider your development environment. If you don’t already have a JavaScript development environment set up, you might consider Visual Studio Code. Visual Studio Code runs on Windows, Mac, or Linux, and it combines a full set of features with great ease-of-use. Visual Studio Code has extensions for JavaScript and Node.js and a wealth of third-party support, by way of add-ons, for Angular and Express. It is a good default choice. 

MEAN stack setup option 1: Use an all-in-one installer

Some third parties have created installers that unpack and configure all of the necessary components. One such installer is available from Bitnami, which installs all the major components needed—the Node.js runtime, an instance of MongoDB, and the NPM packages needed to stand up a basic instance of the MEAN stack.

Other installers assume you already have MongoDB and Node.js installed, and concentrate on standing up the Angular and Express components. Meanjs.org is one such installer.

MEAN stack setup option 2: Use a VM or container image

A second option is to use virtual machine images or Docker—the latter is more efficient—to obtain each piece of the stack and run it. To do this, you’ll need Docker images for MongoDB, Angular, and Express.

You can integrate all three using Docker Compose and Docker swarm mode (see this example); it’s a good way to stand up a simple instance for testing and development on one machine. For a more sophisticated deployment using Kubernetes, more suited to production, see this example.

One strong argument in favor of using containers for a MEAN application is that it allows you to precisely dictate the versioning of all the components in the stack—not just the JavaScript frameworks, but also MongoDB and the Node runtime as well. This is crucial if your app depends on behaviors in any component that are tied to a particular version.

MEAN stack setup option 3: Use an automation system

A third possibility, which also helps to preserve versioning, is to use an automation system. Chef, for instance, has a third-party recipe for instantiating a “MExN” stack. Puppet has a deployment recipe for a MEAN stack using Amazon EC2 as the target. And here is an example of an Ansible recipe for deploying a MEAN stack on Ubuntu.

The above examples aren’t complete, but if you use the automation systems in question, you can start with them as a base and customize them.

MEAN stack setup option 4: Do-it-yourself, manual setup

Finally, there is the difficult but rewarding approach: Ferret out each component of the MEAN stack, stand it up, and connect all of the pieces together yourself. It’s difficult because each component involves a different process, but rewarding because walking through all of the steps will give you a direct view and understanding, albeit in a trial-by-fire fashion, of how all of the MEAN stack’s pieces come together. Let’s walk through this manual setup process next. 

MEAN stack manual setup step-by-step

If you want, or need, to set up components of the MEAN stack by hand, there is a certain order you need to follow. You need to begin with MongoDB and Node.js, the two most foundational elements, then add Angular and Express on top of them.

A completely manual setup of a MEAN stack is likely something you only want to do once, for your own development and learning. Once you get the hang of the pieces, do yourself the favor of learning how to build the stack using one of the other techniques described in the previous section. That said, it doesn’t hurt to know the details of how every part of the stack is assembled.

Install MongoDB

MongoDB has installers available for all major platforms:

  • Linux: Red Hat, Ubuntu, Debian, SUSE, and Amazon Linux AMIs all have .deb or .rpm packages available. Other Linux distributions may also have editions available through their package managers.
  • MacOS: You can install MongoDB on MacOS by downloading and running a binary installer, or by using the Homebrew package manager. Homebrew saves you some steps and also provides you with an automated way to keep MongoDB up-to-date.
  • Windows: MongoDB provides an MSI installer for Windows, with a wizard that walks you through the most common setup options.

The above links for each of the installers should provide some basic information about how to complete setup for MongoDB on each of those platforms.

Two other notes worth making at this step:

  • If you don’t already have some experience with MongoDB and its metaphors, especially if you don’t have experience with NoSQL databases in general, stop and take the time to learn a little about it by way of our deep-dive review of version 4.0. If your experience with database-backed application stacks is limited to SQL databases, you’ll want some background in MongoDB and its idiosyncrasies.
  • MongoDB has a history of security issues stemming from improper configuration. By default, MongoDB has very little security—great for getting a development instance up and running quickly, but a hazard for those rushing into production. Make sure that MongoDB is locked down before even thinking about deploying it on any system used by more than just you.

Install Node.js

Node.js likewise offers relatively easy installation on all platforms:

When you install Node.js, make sure that your installation process also includes NPM, the package manager for Node. This is typically the case, but after the installation double-check that you have NPM by typing npm -v.

With MongoDB and Node.js installed, you can now move on to creating a MEAN app in earnest.

A MEAN stack example app

In theory, the next step in creating a MEAN app would involve installing Angular, Express, and Mongoose, and manually wiring up the interactions among them.

A faster way to go is to use one of a number of pre-built application templates. These provide you with source code for a rudimentary MEAN app that you can deploy in place and then edit as needed.

One sample app you can start with was developed as part of a tutorial on building apps using the Angular CLI. It provides you with a simple CRUD (create, read, update, delete) database app that you can modify as needed. It also provides a good example of how the major JavaScript components are embodied in an application project:

  • For Express, the app.js file in the root directory of the project contains the application routing logic and the basic database connection. Each subroute is described in routes/book.js.
  • For MongoDB, the database models used by Mongoose are in models/Book.js. 
  • For Angular, the src directory contains the source code for the Angular portions of the project, which are written in TypeScript. The HTML for each view is found in src/app and its subdirectories.

Another advantage of starting with an example app like this is that the app will likely employ relatively modern JavaScript development techniques. For instance, this example uses the Angular CLI, ng, as its main interface for running the app. It doesn’t use tools like gulp or grunt. In short, there is a smaller and less sprawling set of tools needed to get started and work with as you continue development.

Next steps with the MEAN stack

The next steps from here are to take what you’ve set up and make it your own:

  • Customize the Express routes to create your own responses—not just renaming existing paths, but developing entirely new ones with new code associated with them.
  • Alter the schemas defined by Mongoose to create new data objects, and write new code to interface with those objects. Experiment with how Mongoose handles different data types, such as dates or arrays.
  • Use Angular’s toolset to generate new front-end code from the project’s TypeScript, and get some experience with how TypeScript works by modifying that code incrementally as well.

Copyright © 2018 IDG Communications, Inc.