Getting Started for MEAN Stack Part 1

Feb 17, 2017

What is MEAN Stack?

MEAN is a framework for an easy starting point with

MongoDB
Express
Angularjs
Nodejs

It’s designed to give you quick and organized way to start developing MEAN based web apps with useful modules. More information here

Getting Started

Prerequisite

Install Nodejs
Install Git
Install MongoDB
Install Bower by typing
```
npm install bower -g
```

Installation

Create project “music_app”
```
mkdir music_app
cd music_app
npm init
```

Install npm dependencies

npm install express mongoose body-parser --save

package.json

  {
  "name": "music_app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.2",
    "express": "^4.16.2",
    "mongoose": "^5.0.0-rc1"
  }
}

Create bower.json by typing
```
bower init
```

Install dependencies for client side via bower by

bower install angular-ui-router bootstrap traceur angular-modal-serice font-awesome --save

bower.json

{
  "name": "music_app",
  "description": "",
  "main": "index.js",
  "authors": [
    "Rattapong Khamphansa <aof.kem@gmail.com>"
  ],
  "license": "ISC",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular-ui-router": "^1.0.12",
    "font-awesome": "^4.7.0",
    "angular-modal-service": "^0.13.0",
    "bootstrap": "^3.3.7",
    "traceur": "^0.0.111"
  }
}

Then we will have project structure like this

Implementation

Create provide web route

Create app.js file

//Import and declare express
var express = require('express');
var app = express();

//Provide static files for client accessible
app.use('/public', express.static('bower_components'));
app.use(express.static('app'));

//Provide route to index page to app/Index.html
app.get('/', function(request, response) {
    response.render('Index.html', {});
});
//listen to port 8000
app.listen(8000, function() {
    console.log('Express server started!!!');
});

Create Index.html in app directory

<!DOCTYPE html>
<html>

<head lang="en">
</head>

<body>
    <h1>Hello World</h1>
</body>

</html>

Then we will have project structure like this
Run node server by typing
```
node app.js
```
Open browser and go to http://localhost:8000/
See result

Source Code

Github