MEAN Start

Angular2 + Angular-CLI + Express + Mongoose + Socket.IO. All in TypeScript.

DEMO (AWS EB)

DEMO (GAE)

DEMO (Heroku)

Prerequisites

• Node.js and npm
• MongoDB
• Git

Install global dependencies:

npm install -g typescript
npm install -g angular-cli

Create a new project based on the MEAN Start

Clone this repo into new project folder (e.g., my-proj):

git clone https://github.com/cj-wang/mean-start my-proj
cd my-proj

Discard everything "git-like" by deleting the .git folder:

rm -rf .git  # non-Windows
rd .git /S/Q # windows

Create a new git repo

Initialize this project as a local git repo and make the first commit:

git init
git add .
git commit -m "Initial commit"

Create a remote repository for this project on the service of your choice.

Grab its address (e.g. https://github.com/<my-org>/my-proj.git) and push the local repo to the remote:

git remote add origin <repo-address>
git push -u origin master

Install npm packages

Install the npm packages described in the package.json:

npm install

Development server

Start the dev server:

npm run dev

Navigate to http://localhost:4200/ for the app. Shut it down manually with Ctrl-C.

The npm run dev script starts 2 servers concurrently:

• angular-cli dev server - starts at http://localhost:4200/, serving the angular app. The angular app will automatically reload if you change any of the client source files.

• express server - starts at http://localhost:3000/, serving the REST APIs. The express server will be automatically restarted by nodemon if you change any of the server source files.

The angular-cli dev server is configured to proxy all API calls to http://localhost:4200/api to go to the express server http://localhost:3000/api, so that the whole app is available at http://localhost:4200/.

You're ready to write your application.

Develop

Model class

Add mongoose model class in server/models/ directory, e.g. server/models/user.ts:

import * as mongoose from 'mongoose';

export interface IUser {
  email: string;
  password: string;
  name: string;
};

const userSchema = new mongoose.Schema({
  email: String,
  password: String,
  name: String
});

interface IUserModel extends IUser, mongoose.Document { }

const User = mongoose.model<IUserModel>('User', userSchema);

export default User;

Model classes in server/models/ directory are exposed as REST APIs by default. E.g. with the User model added, below REST APIs are created automatically:

• POST /api/users - Create a User
• GET /api/users - Get all the users
• GET /api/users/:user_id - Get a single user
• PUT /api/users/:user_id - Update a user with new info
• DELETE /api/users/:user_id - Delete a user

TODO: Role-based access control required.

Custom API

Add API module in server/routes/api/ directory, e.g. server/routes/api/test.ts:

import { Router } from 'express';

export default function (router: Router) {
  router.get('/test', (req, res) => {
    // Implement the API for GET /api/test
    res.send('Test API works');
  });
};

Modules in server/routes/api/ directory are imported by express app automatically and called by passing in the Router. All the APIs are exposed with the root URI /api prepended, e.g. /api/test.

TODO: Role-based access control required.

Socket.IO

Add Socket.IO module in server/socket.io/ directory, e.g. server/socket.io/test.ts:

export default function (io: SocketIO.Server) {
  io.on('connection', function (socket) {
    console.log('a user connected');
    socket.on('chat message', function (msg) {
      console.log('message: ' + msg);
      io.emit('chat message', msg);
    });
    socket.on('disconnect', function () {
      console.log('user disconnected');
    });
  });
};

Modules in server/socket.io/ directory are imported by express app automatically and called by passing in the SocketIO.Server.

Angular Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive/pipe/service/class.

Build

npm run build

The server compiled files will be stored in the dist/ directory. The client build artifacts will be stored in the dist/public/ directory. The dist/ directory is the full distribution of the app.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor. Before running the tests make sure you are serving the app via ng serve.

Deploying to Github Pages

Run ng github-pages:deploy to deploy to Github Pages.

Deploying to AWS Elastic Beanstalk

Prerequisites:

• AWS Account
• AWS EB CLI

Deploy the app to Elastic Beanstalk:

eb init --platform node.js --region us-west-2
eb create --instance_type t2.small --sample node-express-env
eb deploy

To view your application in the web browser run:

eb open

Deploying to Google App Engine

Prerequisites:

• Create GAE Project
• Google Cloud SDK

Deploy the app to the App Engine flexible environment:

gcloud app deploy

To view your application in the web browser run:

gcloud app browse

Deploying to Heroku

Prerequisites:

• Heroku Account
• Heroku CLI

Commit your changes to git, then deploy your app to Heroku:

heroku create
git push heroku master

To open the app in your browser, type:

heroku open

Further help

To get more help on the angular-cli use ng help or go check out the Angular-CLI README.