MEAN stack starter w/ TypeScript and Angular 2

Created by Nitish Dayal | Started: 8/12/2016

Note: This project is currently under development. I really wouldn't bother playing around just yet, I've only just gotten started and it's probably pretty broken.

Yet another Angular 2/MEAN stack starter, hooray! Being created for personal use, but it should be able to serve as a reasonable starting point for a basic MEAN project.

Motivation

I started learning Angular 2 and ended up falling in love with TypeScript. I wanted to use TypeScript throughout the entire MEAN stack and after looking at some other starters out in the wild, I wasn't really happy with what they had to offer in terms of:

TypeScript across the stack
Plug-and-play usability
Easy to use toolset

Basically I want to "TypeScript all the things" without having to think about if my task runner or bundler configuration or whatever else is set up correctly.

Dependencies

ExpressJS
CORS
MongoDB
Mongoose
TypeScript
TypeScript Node
Angular-CLI

Setup

Prerequisites

Node.JS & npm
Global install of the Angular CLI
MongoDB

Installation

Clone or download repo & cd into newly created directory
Run npm install - This will probably take time
Running development environment:
- Terminal 1: Start MongoDB instance (mongod or sudo mongod if you have to)
- Terminal 2: ng serve --dev to serve client application on port 4200
- Terminal 3: npm run start-dev to run server and listen for requests on port 8000
Create & run production environment (IN ORDER):
1. ng build --prod: Create production client application and place in dist/ folder. Deletes existing dist/ folder if one exists
2. npm start build-server: Create production server in dist/server
3. Start MongoDB instance (mongod or sudo mongod if you have to)
4. ng serve --build
5. npm start

The project assumes that the server and client applications will be deployed separately (hence CORS). During development, ng serve [--option] will use the Angular CLI to serve the client side application on http://localhost:4200/, and npm start-dev will run the Express/TypeScript Node server and listen for requests on http://localhost:8000/. For distrubution builds, use ng build --prod and npm build-server. This will place both the client and server packages into a newly created dist/ directory.

The client side structure was originally generated by the Angular CLI and is in the process of being trimmed down extensively; the project utilizes the Angular CLI to "programagically" build out the client side application. This means no mention of Webpack, SystemJS, Gulp, Grunt, JSPM, Rollup, Browserify, or whatever else. The only tools used for building out distrubution packages are the Angular CLI and the TypeScript compiler, neither of which will require any set-up or configuration.

License

MIT