MEAN Stack Development Starter

This project is no longer maintained. Please visit vulgar to follow the new version, and check out our new command line tool for generating and managing cutting-edge MEAN stack apps at vulgar-cli

A MEAN stack development kit featuring Angular 2 (Router, Forms, Http, Services, Tests, E2E), Express, MongoDB (complete with Mongoose), Node, PassportJS, Socket.IO, Karma, Protractor, Jasmine, Istanbul, TypeScript, Typings, Sass, Docco, TsLint, Ng2Lint, Hot Module Replacement, and Webpack, as well as ES6/ES7 support for the back-end by datatype_void.

Walk through a complete tutorial that shows you how to build a simple todo app using this framework, check out Building A Single Page Todo App with MEAN--Including Angular 2

If you're looking to learn about Webpack and ES6 Build Tools check out ES6-build-tools

If you're looking to learn TypeScript see TypeStrong/learn-typescript

If you're looking to learn how to move your Angular 1.x directives over to Angular 2 see Migrating Directives to Angular 2

And always keep the Angular 2 docs at hand, because the times are always changing

This seed repo serves as an MEAN starter for anyone looking to get a MEAN fullstack app up and running with Angular 2, TypeScript(on the front-end), and ES6/ES7 (on the back-end) fast. Using Webpack for building our files and assisting with boilerplate. We're also using Protractor for our end-to-end story and Karma for our unit tests.

• Best practices in file and application organization for Angular 2.
• Ready to go build system using Webpack for working with TypeScript.
• Hot module reloading for the front-end à la Webpack.
• Angular 2 examples that are ready to go when experimenting with Angular 2.
• A great MEAN seed repo for anyone who wants to start their project.
• Testing Angular 2 code with Jasmine and Karma.
• Coverage with Istanbul and Karma
• End-to-end Angular 2 code using Protractor.
• Type manager with Typings
• Sass preprocessor linting and compiling
• Automatic documentation for all project related Sass, TypeScript, and JavaScript files with Docco; front-end and back-end

The rest of the stack features:

• Express ready for ES6/ES7 code through transpiling with Babel 6,
• Socket.io for real time event-based communication.
• Mongoose for modeling MongoDB objects within NodeJS.
• Support for the Sass CSS preprocessor.

Quick start

Clone/Download the repo then edit app.ts inside /src/app/app.ts

# clone our repo
# --depth 1 removes all but one .git commit history
git clone --depth 1 https://github.com/datatypevoid/ng2-mean-webpack.git

# change directory to our repo
cd ng2-mean-webpack

# add required global libraries
 npm install -g typings webpack-dev-server concurrently

# install the repo with npm
npm install

# create configuration json file for env vars
# save in `config/` as `config.json`
{
  "ENV" : "development",
  # Cannot be 8080 as this conflicts with our Webpack dev server
  "PORT" : 3000,
  "MONGO_URI" : {
    "DEVELOPMENT" : "mongodb://[username:password]@host[:port]",
    "PRODUCTION" : "mongodb://[username:password]@host[:port]",
    "TEST" : "mongodb://[username:password]@host[:port]"
  },
  # Generate your own 256-bit WEP key here:
  # http://randomkeygen.com/
  # Note that you don't need to use specifically
  # this, but it will certainly suffice
  "SESSION_SECRET" : "355FC4FE9348639B4E4FED1B8E93C"
}

# build code
npm run build

# start up the stack

# this command runs two commands in parallel via `concurrently`:
# `npm run server` starts up `webpack-dev-server` allowing for
# hot module reloading
# `npm` run watch` uses `webpack` to watch the necessary files
# and build on file change
npm start

# in a separate terminal:
# start `Express` server
gulp serve

go to http://0.0.0.0:8080 or http://localhost:8080 in your browser

Table of Contents

• File Structure

• Getting Started

  • Dependencies
  • Installing
  • Running the app

• Contributing

• TypeScript

• Typings

• Frequently asked questions

• Support, Questions, or Feedback

• License

File Structure

We use the component approach in our starter. This is the new standard for developing Angular apps and a great way to ensure maintainable code by encapsulation of our behavior logic. A component is basically a self contained app usually in a single file or a folder with each concern as a file: style, template, specs, e2e, and component class. Here's how it looks:

ng2-mean-webpack/
 │
 ├──app/                            * our source files for back-end routing and MongoDB object modelling
 │   ├──models/                     * model definitions for Mongoose
 │   │   ├──user.model.js           * a user model for use with PassportJS
 │   ├──routes/                     * store all modular REST API routes for Express here
 │   │   └──authentication          * an Express route for use with PassportJS
 │   │        .router.js
 │   └──routes.js                   * gather all of your Express routes and middleware here
 │
 ├──config/                         * configuration files for environment variables, Mongoose, and PassportJS
 │   ├──config.json/                * allows definition of environment variables
 │   ├──env.conf.js/                * contains utility functions for setting up environment vars
 │   ├──mongoose.conf.js/           * configuration file for Mongoose
 │   └──passport.conf.js/           * configuration file for PassportJS
 │
 ├──sockets/                        * directory for socket.io functionality
 │   └──base.js/                    * a basic socket.io server function
 │
 ├──src/                            * our source files that will be compiled to javascript
 │   ├──main.ts                     * our entry file for our browser environment
 │   │
 │   ├──index.html                  * Index.html: where we generate our index page
 │   │
 │   ├──polyfills.ts                * our polyfills file
 │   │
 │   ├──app/                        * WebApp: folder
 │   │   ├──todo/                   * an example component directory
 │   │   │   ├──todo.component.ts   * a simple Angular 2 component
 │   │   │   ├──todo.e2e.ts         *  simple test of components in todo.component.ts
 │   │   │   ├──todo.spec.ts        * a simple end-to-end test for /todo
 │   │   │   ├──todo.html           * template for our component
 │   │   │   └──todo.service.ts     * Angular 2 service linking to our API
 │   │   ├──app.spec.ts             * a simple test of components in app.ts
 │   │   ├──app.e2e.ts              * a simple end-to-end test for /
 │   │   └──app.ts                  * App.ts: a simple version of our App component components
 │   │
 │   ├──assets/                     * static assets are served here
 │   │   ├──icon/                   * our list of icons from www.favicon-generator.org
 │   │   ├──service-worker.js       * ignore this. Web App service worker that's not complete yet
 │   │   ├──robots.txt              * for search engines to crawl your website
 │   │   └──human.txt               * for humans to know who the developers are
 │   │
 │   └──sass/                       * folder for Sass stylesheets
 │       |
 │       ├──base/
 │       │   ├──_animations.scss    * Animation keyframe definitions
 │       │   ├──_reset.scss         * Reset/normalize
 │       │   ├──_typography.scss    * Typography rules
 │       │   ├──_module.scss        * Load all partials from this directory into single partial
 │       │   └── …                  * Etc.
 │       │
 │       ├──components/
 │       │   ├──_buttons.scss       * Buttons
 │       │   ├──_carousel.scss      * Carousel
 │       │   ├──_cover.scss         * Cover
 │       │   ├──_dropdown.scss      * Dropdown
 │       │   ├──_module.scss        * Load all partials from this directory into single partial
 │       │   └── …                  * Etc.
 │       │
 │       ├─ layout/
 │       │   ├──_navigation.scss    * Navigation
 │       │   ├──_grid.scss          * Grid system
 │       │   ├──_header.scss        * Header
 │       │   ├──_footer.scss        * Footer
 │       │   ├──_sidebar.scss       * Sidebar
 │       │   ├──_forms.scss         * Forms
 │       │   ├──_module.scss        * Load all partials from this directory into single partial
 │       │   └── …                  * Etc.
 │       │
 │       ├─ pages/
 │       │   ├──_home.scss          * Home specific styles
 │       │   ├──_contact.scss       * Contact specific styles
 │       │   ├──_module.scss        * Load all partials from this directory into single partial
 │       │   └── …                  * Etc.
 │       │
 │       ├─ theme