Comprehensive MEAN(Mongo, Express, Angular, and Nodejs) with Docker II

This is my second part of comprehensive MEAN project. I am going to focus on back-end side. To practice MEAN stack, I will do a simple todo list app.

The all four article is

1. Environment setting - develop MEAN with docker.
2. *Nodejs and Express.
3. Angularjs.
4. Continuous Development.

App architecture

Project Architecture

/app
|---/pages
    |---index.html
    |---index.js
    |---/about
    |   |---memoAbout.html
    |---/memo
        |---memoController.js
        |---memoPage.html
server.js
Dockerfile
docker-compose.yml
package.json
bower.json
Gulpfile.js

Npm install

1. You need to download and install node. Or you don't need to if you are using docker.

Package.json

Npm is very popular node module management tool. You just need to have this package.json, then you can get all the package you need. This is my package.json.

{
  "name": "toDoList",
  "version": "0.0.0",
  "description": "todo app taht combine all technique",
  "author": "Wei Ting Cheng",
  "dependencies": {
    "body-parser": "~1.5.2",
    "express": "~4.7.2",
    "method-override": "~2.1.2",
    "mongoose": "~3.6.2",
    "path": "~0.12.7"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-concat": "^2.6.0",
    "gulp-inject": "^4.0.0",
    "gulp-load-plugins": "^1.2.0",
    "gulp-order": "^1.1.1",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^1.5.3",
    "gulp-clean": "^0.3.2",
    "main-bower-files": "^2.11.1"
  }
}

Gulp is a build tool and we only need it in development phase so I put it in devDependencies.

Other packages in dependencies will be introduced latter this article.

In the back-end side. I want to build a rest-api using express and nodejs.

server.js

var express = require('express');
var app = express(); //create express app
var mongoose = require('mongoose');
var bodyParser = require('body-parser'); //pull information from http POST
var methodOverride = require('method-override'); // simulate DELETE and PUT
var path = require('path');

//mongo is mongo service allies. We can access MongoDB  by this address since it is already in our hosts file.
mongoose.connect('mongodb://mongo:27017');

app.use(bodyParser.urlencoded({'extended':'true'}));            // parse application/x-www-form-urlencoded
app.use(bodyParser.json());                                     // parse application/json
app.use(bodyParser.json({ type: 'application/vnd.api+json' })); // parse application/vnd.api+json as json
app.use(methodOverride());

//here indicate where to put front-end files
app.use(express.static('/app/dest'));

var Todo = mongoose.model('Todo', {
    text : String
});

app.listen(8080);
console.log("App listening on port 8080");

//route
app.get('/todos', function(req, res) {
    console.log('memo get');
    // use mongoose to get all todos in the database
    Todo.find(function(err, todos) {

        // if there is an error retrieving, send the error. nothing after res.send(err) will execute
        if (err)
            res.send(err)

        res.json(todos); // return all todos in JSON format
    });
});

// create todo and send back all todos after creation
app.post('/todos', function(req, res) {

    // create a todo, information comes from AJAX request from Angular
    Todo.create({
        text : req.body.text
    }, function(err, todo) {
        if (err)
            res.send(err);

        // get and return all the todos after you create another
        Todo.find(function(err, todos) {
            if (err)
                res.send(err)
            res.json(todos);
        });
    });

});

// delete a todo
app.delete('/todos/:todo_id', function(req, res) {
    Todo.remove({
        _id : req.params.todo_id
    }, function(err, todo) {
        if (err)
            res.send(err);

        // get and return all the todos after you create another
        Todo.find(function(err, todos) {
            if (err)
                res.send(err)
            res.json(todos);
        });
    });
});

Further Reading

You can find this code in my github repo MEAN pracitce.

1. q - a very popular promise tool.

Prev: Environment setting

Next: Angularjs