How I Build Scaleable Web Apps on the M.E.A.N. Stack
Latest posts by Faisal Abid (see all)
- How I Build Scaleable Web Apps on the M.E.A.N. Stack - July 24, 2013
“M.E.A.N.” is one of the coolest stacks to develop on .
So, how do you actually get started developing on the MEAN stack?
The first step is to set up a project structure. I’ve found the following structure to make the most sense:
controllers/ db/ package.json server.js public/
This structure lets you keep the entire stack in a single project. Your AngularJS front end can go into the public folder while all your Express API logic goes into controller and your MongoDB collections and logic go into the db folder.
Now that you’ve set up a general project structure, you need to initialize your public folder as an Angular project. It is best to do this using a tool called Yeoman.
Installing Yeoman is pretty straightforward.
npm install -g yo
Yeoman is built around the concept of generators. Think of them as a set of rules that Yeoman needs to generate the project structure and files for your project. In this case, we will be installing AngularJS. First, you have to get the generator for AngularJS by installing:
npm install -g generator-angular
This code will install the scripts and templates needed for you to bootstrap your Angular app. Next, cd into your public directory we created and generate the project into this folder by running:
It will prompt you with a series of questions that will then tailor the generated files to your needs. Once this is done, you will notice that the structure seems like another node app and you’re right to think that!
Yeoman and the tools that Yeoman uses (like bower and grunt) are all using npm to get the modules they need to build your app.
To run your yeoman app, simply go into the public folder and run grunt server. Grunt is essentially made for web apps. It has a set of rules you can find in Gruntfile.js that outlines what needs to happen for different options.
Running grunt server will run a small server that will serve your website. Grunt build will go through all your source code, minify HTML, JS, SCSS and images, and spit the result out in the dist folder.
You can learn all about yeoman and grunt at Yeoman.io.
Your basic development workflow would be as follows:
In one terminal window, you will have grunt server running. This will run your AngularJS app. In another terminal window, you can have your node app running, providing the API for your AngularJS app.
The reason I personally love doing this is because grunt server will refresh your browser on the fly when you make SCSS changes and this is very useful when you’re developing.
When it comes time to deploy to production, running grunt build will output an “optimized and minified” version of the website to the dist folder. This is the folder you can setup in your server.js Express.static and use when someone hits your node server.
app.use(express.static(__dirname + ‘/public/dist’));
As a developer building a scalable web app, MEAN has profound implications. You can leave all your templating to render on the client side, lessening the load on your Node server. Your Node.js code is exposed via an API that your AngularJS app can connect to. This ensures that in the future if you want to build a mobile app or open up your API to third parties, it’s very simple since the API’s are already created.
Lastly, one of the more interesting things about the MEAN stack is that because it is so loosely decoupled, if you wanted to replace any of the technologies with another technology, you could easily do so without changing the other platform. For example you could replace AngularJS with Ember, or Node.js with Python.