Getting Started for MEAN Stack Part 1

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

Contents

  • Prerequisite
  • Installation
  • Implementation
    • Provide web route via express
    • Provide API for CRUD with MongoDB
    • Implement front-end with AngularJS and boostrap

Prerequisite


  1. Install Nodejs
  2. Install Git
  3. Install MongoDB
  4. Install Bower by typing
    npm install -g bower

Installation


  1. Create folder for project “music_app” by typing
    $ mkdir music_app
  2. Move to folder “music_app” by typing
    $ cd music_app
  3. Create package.json by typing
    $ npm init
  4. Install modules for server side via npm
    $ npm install express --save
    $ npm install mongoose --save
    $ npm install body-parser --save

    package.json

  5. Create bower.json by typing
    $ bower init
  6. Install modules for client side via bower by
    $ bower install angular --save
    $ bower install angular-ui-router --save
    $ bower install bootstrap --save
    $ bower install traceur --save
    $ bower install angular-modal-service --save
    $ bower install font-awesome --save

    bower.json

  7. Then we will have project structure like this
    music_app
     |--> bower_components
       |--> angular
       |--> angular-modal-service
       |--> angular-ui-router
       |--> bootstrap
       |--> font-awesome
       |--> jquery
       |--> traceur
     |--> node_modules
       |--> body-parser
       |--> express
       |--> mongoose
     |--> bower.json
     |--> package.json
  8. Now our project is ready for implementation.

Implementation


Create provide web route

  1. Create server.js file
  2. Create Index.html in app directory
  3. Then we will have project structure like this
    music_app
     |--> app
       |--> Index.html
     |--> bower_components
       |--> angular
       |--> angular-modal-service
       |--> angular-ui-router
       |--> bootstrap
       |--> font-awesome
       |--> jquery
       |--> traceur
     |--> node_modules
       |--> body-parser
       |--> express
       |--> mongoose
     |--> app.js
     |--> bower.json
     |--> package.json
  4. Run node server by typing
    $ node app.js
  5. Open browser and go to http://localhost:8000/
  6. See result
    meanrouteresult

Source Code are here

See more


Provide API for CRUD with MongoDB in Part2

Implement front-end with AngularJS and boostrap in Part3

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s