JavaScript
MEAN (MongoDB, Express, Angular, Node) Stack : Kick Start First Project Using Generator
7:48 PM
Hello everyone, I am going to share my experience in settting up MEAN stack project for the first time.
So firstly, before we go further, what is MEAN stack ? MEAN stands for Mongo DB, Express, Angular, and Node. It is combination of modern and light technologies. Mongo DB as NoSQL database provider, Express JS as a Node JS web application framework, Angular JS as HTML and UI framework and Node JS, a lightweight and efficient JavaScript runtime, as the foundation of our web application.
Let's start installing MEAN stack framework.
I am going to use framework called Generator Angular Fullstack.
What is that ? Generator Angular Fullstack is,
Let's do M stuff from MEAN, which is installing Mongo DB.
Download MongoDB from this source. Choose your platform whether Windows, Linux, or OSX.
Do the installation,
Next, continue installing Node JS.
Download the latest Node JS in this source.
Do the installation.
After installation is finished, check if the Node JS already installed by typing below command,
Now, we begin downloading tools needed by Generator Angular Fullstack and Generator Angular Fullstack it self.
Installing yeoman, bower, grunt-cli, gulp-cli, Generator Angular Fullstack by typing the command below
After installation has completed, we can start using Generator Angular Fullstack.
We want to make a directory for our project so let's make a new directory, and cd into it :
Done, we are done installing Generator Angular Fullstack.
Now, before we run our project. Let's see the project structure below,
Now, look at server/config/environment/index.js.
So firstly, before we go further, what is MEAN stack ? MEAN stands for Mongo DB, Express, Angular, and Node. It is combination of modern and light technologies. Mongo DB as NoSQL database provider, Express JS as a Node JS web application framework, Angular JS as HTML and UI framework and Node JS, a lightweight and efficient JavaScript runtime, as the foundation of our web application.
Let's start installing MEAN stack framework.
I am going to use framework called Generator Angular Fullstack.
What is that ? Generator Angular Fullstack is,
Yeoman generator for creating MEAN stack applications, using MongoDB, Express, AngularJS, and Node - lets you quickly set up a project following best practices.
Let's do M stuff from MEAN, which is installing Mongo DB.
Download MongoDB from this source. Choose your platform whether Windows, Linux, or OSX.
Do the installation,
- for Windows user, please see https://docs.mongodb.org/v3.0/tutorial/install-mongodb-on-windows
- for Linux Ubuntu user, please see https://www.digitalocean.com/community/tutorials/how-to-install-mongodb-on-ubuntu-14-04
- for OSX user, please see https://docs.mongodb.org/v3.0/tutorial/install-mongodb-on-os-x
Run your MongoDB
Create the default /data/db directory, by typing below command in your terminal or command prompt,
mkdir -p /data/db
Run without specifying paths,
If your system PATH variable includes the location of the mongod binary and if you use the default data directory (i.e., /data/db), simply enter mongod at the system prompt:
If you do not use the default data directory (i.e., /data/db), specify the path to the data directory using the --dbpath option:
Mongo DB is now running, and you can start making a connectionIf your system PATH variable includes the location of the mongod binary and if you use the default data directory (i.e., /data/db), simply enter mongod at the system prompt:
mongodSpecify the path of the data directory,
If you do not use the default data directory (i.e., /data/db), specify the path to the data directory using the --dbpath option:
mongod --dbpath
Next, continue installing Node JS.
Download the latest Node JS in this source.
Do the installation.
After installation is finished, check if the Node JS already installed by typing below command,
node -vThe output will be the version of Node JS for example v5.2.0.
Now, we begin downloading tools needed by Generator Angular Fullstack and Generator Angular Fullstack it self.
Installing yeoman, bower, grunt-cli, gulp-cli, Generator Angular Fullstack by typing the command below
npm install -g yo grunt-cli gulp-cli bower generator-angular-fullstack-g flag on above command indicated that we want installed it globally.
After installation has completed, we can start using Generator Angular Fullstack.
We want to make a directory for our project so let's make a new directory, and cd into it :
mkdir my-new-project && cd $_Run yo angular-fullstack, optionally passing an app name :
yo angular-fullstack [app-name]
Run grunt for building, grunt serve for preview, and grunt serve:dist for a preview of the built app.Done, we are done installing Generator Angular Fullstack.
Now, before we run our project. Let's see the project structure below,
├── client
│ ├── app - All of our app specific components go in here
│ ├── assets - Custom assets: fonts, images, etc…
│ ├── components - Our reusable components, non-specific to to our app
│
├── e2e - Our protractor end to end tests
│
└── server
├── api - Our apps server api
├── auth - For handling authentication with different auth strategies
├── components - Our reusable or app-wide components
├── config - Where we do the bulk of our apps configuration
│ └── local.env.js - Keep our environment variables out of source control
│ └── environment - Configuration specific to the node environment
└── views - Server rendered views
An example client component in
client/appmain
├── main.js - Routes
├── main.controller.js - Controller for our main route
├── main.controller.spec.js - Test
├── main.html - View
└── main.less - Styles
An example server component in
server/apithing
├── index.js - Routes
├── thing.controller.js - Controller for our `thing` endpoint
├── thing.model.js - Database model
├── thing.socket.js - Register socket events
└── thing.spec.js - Test'use strict';
// Development specific configuration
// ==================================
module.exports = {
// MongoDB connection options
mongo: {
uri: 'mongodb://localhost/alphafullstack-dev'
},
// Seed database on startup
seedDB: true
};Now, look at server/config/environment/index.js.
// Server port
port: process.env.PORT || 9000,grunt serve
and here it is what we got, our project is running.
