Vulgar
A simple and scalable MEAN stack development kit featuring Angular 2 (Router, Http, Forms, Services, Tests, E2E, Coverage, Dev/Prod), Express, MongoDB, Mongoose, Node, PassportJS, Socket.io, Karma, Protractor, Jasmine, Istanbul, SASS Support, TypeScript, TSLint, NG2Lint, Hot Module Replacement, Docco, Gulp, and Webpack by @datatypevoid
Install / Use
/learn @datatypevoid/VulgarREADME
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, Material, 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
- 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.tsinside/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
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
