v#!g@r

MEAN Stack Development Starter

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

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
• Material Design with angular/material2
• 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

Make sure you have Node version >= 4.0 and NPM >= 3

If you are located in China, use cnpm

https://github.com/cnpm/cnpm

Install the stack then edit app.ts inside /src/app/app.ts

# install vulgar-cli and the generator it hooks into
$ npm install -g vulgar-cli generator-vulgar

# initialize installer
$ vulgar init <nameOfApplication>

# change directory to new application root
$ cd <nameOfApplication>

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

# install the repo with npm
# required only if you declined automated dependency installation
# during installation
$ npm install

# 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:

vulgar/
 │
 ├──app/                            * back-end routing and MongoDB object models
 │   ├──models/                     * model definitions for Mongoose
 │   │   ├──user.model.js           * a user model for use with PassportJS
 │   ├──routes/                     * store modular REST API routes for Express here
 │   │   └──authentication          * an Express route for use with PassportJS
 │   │        .router.js
 │   └──routes.js                   * import Express routes and middleware here
 │
 ├──config/                         * configuration files
 |   ├──helpers.js                  * helper functions for our configuration files
 |   ├──spec-bundle.js              * magic that sets up the NG2 testing environment
 |   ├──karma.conf.js               * karma config for our unit tests
 |   ├──protractor.conf.js          * protractor config for our end-to-end tests
 │   ├──webpack.dev.js              * our development webpack config
 │   ├──webpack.prod.js             * our production webpack config
 │   ├──webpack.test.js             * our test webpack config
 │   ├──config.json/                * allows definition of environment variables
 │   ├──env.conf.js/                * utility functions for setting up env vars
 │   ├──mongoose.conf.js/           * configuration file for Mongoose
 │   ├──gulpfile.conf.js            * contains all of the workflow management delegated
 │   │                                to `gulp`: auto documentation generation; `sass`
 │   │                                linting; `nodemon`, et cetera
 │   └──passport.conf.js/           * configuration file for PassportJS
 │
 ├──sockets/                        * directory for socket.io functionality
 │   └──base.js/                    * a basic socket.io server function
 │
 ├──src/                            * source 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
 │   │
 |   ├──vendor.ts                   * our vendor 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: primary application component
 │   │
 │   ├──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 into a single partial
 │       │   └── …                  * Etc.
 │       │
 │       ├──components/
 │       │   ├──_buttons.scss       * Buttons
 │       │   ├──_carousel.scss      * Carousel
 │       │   ├──_cover.scss         * Cover
 │       │   ├──_dropdown.scss      * Dropdown
 │       │   ├──_module.scss        * Load all partials into a 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 into a single partial
 │