In the first part of the series on MEAN, I introduced you to the MEAN stack. In this post let’s get started with the MEAN stack.
JavaScript explosion
The first step towards setting up MEAN is installing NodeJS. You can then download the MEAN stack from http://meanjs.org. A MEAN application will have the libraries (read JS files) plus our JavaScript code. Extract the downloaded archive and what you get is a basic application template that you can get started with. If you’re a newbie, you may also get a mild headache looking at the explosion of JavaScript files in the folders and subfolders as shown here.
So I would recommend is to get rid of all the JavaScript files and subfolders and just have two folders, app and public, and two files, package.json and bower.json as shown here.
- The app folder contains the server-side code, i.e., ExpressJS and MongoDB code.
- The public folder contains the client-side code, i.e., the AngularJS code.
- The package.json file contains the dependencies like ExpressJS, Mongoose (a MongoDB module, similar to Hibernate or Entity Framework) that we’ll install by running
npm install
.
The bower.json file contains the AngularJS dependencies that you’ll install by running
bower install
If you want to install bower use the command npm install -g bower
.
Running bower install will install all the Angular JS files in a bower_components folder. As we need the JS files while developing the web pages you can configure bower to install the JS files inside public folder. This information can be specified in a .bowerrc file. The .bowerrc file can have the following configuration:
{ “directory”: “public/bower_components” }
In the next post, we’ll configure our MongoDB.