MEAN Stack Development Starter

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, 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 a 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.
Angular 2 examples that are ready to go when experimenting with Angular 2.
A great Angular 2 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 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

# install the repo with npm
npm install

# install TypeScript typings
npm run typings-install

# create configuration json file for env vars
# save in `config/` as `config.json`
{
  "ENV" : "development",
  "PORT" : 8080,
  "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:dev

# start the server
node server

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

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
 │   │   ├──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.
 │       │
 │       ├─ themes/
 │       │   ├──_theme.scss         * Default theme
 │       │   ├──_admin.scss         * Admin theme
 │       │   ├──_module.scss        * Load all partials from this directory into single partial
 │       │   └── …                  * Etc.
 │       │
 │       ├─ utils/
 │       │   ├──_variables.scss     * Sass Variables
 │       │   ├──_functions.scss     * Sass Functions
 │       │   ├──_mixins.scss        * Sass Mixins
 │       │   ├──_helpers.scss       * Class & placeholders helpers
 │       │   ├──_module.scss        * Load all partials from this directory into single partial
 │       │   └── …                  * Etc.
 │       ├──vendors/
 │       │   ├──vendors-extensions  * Bootstrap
 │       │   ├──_bootstrap.scss     * Bootstrap
 │       │   ├──_jquery-ui.scss     * jQuery UI
 │       │   ├──_module.scss        * Load all partials from this directory into single partial
 │       │   └── …                  * Etc.
 │       │
 │       │
 │       └──main.scss               * Main sass file to load all partials for this project
 │
 ├──.babelrc                        * configure Babel 6 plugins and ES6/ES7 presets
 │
 ├──server.js                       * ES5 `.js` file importing the server code along with a Babel 6 hook to transpile server ES6/ES7 code on the fly
 ├──server.conf.js                  * configure Express/Socket.io application, connect to database, instantiate Mongoose models, define API and front-end Angular routes, et cetera
 │
 ├──gulpfile.js                     * ES5 `gulpfile` importing the `gulp` workflow code along with a Babel 6 hook to transpile the ES6 code on the fly
 ├──gulpfile.conf.js                * contains all of the workflow management delegated to `gulp`: auto documentation generation; `sass` linting; `nodemon`, et cetera
 │
 ├──spec-bundle.js                  * ignore this magic that sets up our angular 2 testing environment
 ├──karma.config.js                 * karma config for our unit tests
 ├──protractor.config.js            * protractor config for our end-to-end tests
 │
 ├──tsconfig.json                   * config that webpack uses for typescript
 ├──typings.json                    * our typings manager
 ├──package.json                    * what npm uses to manage it's dependencies
 │
 ├──webpack.config.js               * our development webpack config
 ├──webpack.test.config.js          * our testing webpack config
 └──webpack.prod.config.js          * our production webpack config

Getting Started

Dependencies

What you need to run this app:

node and npm (brew install node)
Ensure you're running the latest versions Node v4.1.x+ and NPM 2.14.x+

Once you have those, you should install these globals with npm install --global:

webpack (npm install --global webpack)
webpack-dev-server (npm install --global webpack-dev-server)
karma (npm install --global karma-cli)
protractor (npm install --global protractor)
typings (npm install --global typings)
typescript (npm install --global typescript)

Installing

fork this repo
clone your fork
npm install to install all dependencies
typings install to install necessary typings
create config.json see below
npm run build:dev to build the necessary front-end code
node server to start the server

config.json

The server.conf.js file is expecting certain environment variables to be set within Node. The env.conf.js has functions to check whether the expected environment variables have been setup before proceeding to start up the rest of the server. You can create a file called config.json and store it in the config directory that looks something like this:

{
  "ENV" : "development",
  "PORT" : 8080,
  "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"
}

Running the app

After you have installed all dependencies and created your config.json file, you can now run the app. Run node server to start a local server using node. The port will be displayed to you as http://0.0.0.0:8080 (or if you prefer IPv6, if you're using express server, then it's http://[::1]:8080/).

server

# development
npm run build:dev
node server
# production
npm run build:prod !!!NOT READY YET!!!
npm run server:prod !!!NOT READY YET!!!

Other commands

build documentation

gulp build:docs

watch and build documentation

gulp watch:docs

watch and lint sass

gulp watch:sass

build files

# development
npm run build:dev
# production !!!NOT READY YET!!!
npm run build:prod

watch and build files

npm run watch

run tests

npm run test

watch and run our tests

npm run watch:test

run end-to-end tests

# make sure you have your server running in another terminal
npm run e2e

run webdriver (for end-to-end)

npm run webdriver:update
npm run webdriver:start

run Protractor's elementExplorer (for end-to-end)

npm run webdriver:start
# in another terminal
npm run e2e:live

all in one

# in one terminal
npm run watch // Watch and build front-end code
# in another terminal
gulp // clear out documentation
     // generate documentation
     // start server that restarts on file change
     // lint sass

# Contributing
You can include more examples as components but they must introduce a new concept such as `Home` component (separate folders), and Todo (services). I'll accept pretty much everything so feel free to open a Pull-Request

# TypeScript
> To take full advantage of TypeScript with autocomplete you would have to install it globally and use an editor with the correct TypeScript plugins.

## Use latest TypeScript compiler
TypeScript 1.7.x includes everything you need. Make sure to upgrade, even if you installed TypeScript previously.

npm install --global typescript


## Use a TypeScript-aware editor
We have good experience using these editors:

* [Visual Studio Code](https://code.visualstudio.com/)
* [Webstorm 10](https://www.jetbrains.com/webstorm/download/)
* [Atom](https://atom.io/) with [TypeScript plugin](https://atom.io/packages/atom-typescript)
* [Sublime Text](http://www.sublimetext.com/3) with [Typescript-Sublime-Plugin](https://github.com/Microsoft/Typescript-Sublime-plugin#installation)

# Typings
> When you include a module that doesn't include Type Definitions inside of the module you need to include external Type Definitions with Typings

## Use latest Typings module

npm install --global typings


## Custom Type Definitions
When including 3rd party modules you also need to include the type definition for the module
if they don't provide one within the module. You can try to install it with typings

typings install node --save


If you can't find the type definition in the registry we can make an ambient definition in
this file for now. For example

```typescript
declare module "my-module" {
  export function doesSomething(value: string): string;
}

If you're prototying and you will fix the types later you can also declare it as type any

declare var assert: any;

If you're importing a module that uses Node.js modules which are CommonJS you need to import as

import * as _ from 'lodash';

You can include your type definitions in this file until you create one for the typings registry see typings/registry

Frequently asked questions

What's the current browser support for Angular 2 Beta?
- Please view the updated list of browser support for Angular 2
Why is my service, aka provider, is not injecting parameter correctly?
- Please use @Injectable() for your service for typescript to correctly attach the metadata (this is a TypeScript problem)
How do I run protractor with node 0.12.x?
- please check out this repo to use the old version of protractor #146
Where do I write my tests?
- You can write your tests next to your component files. See /src/app/home/home.spec.ts
How do I start the app when I get EACCES and EADDRINUSE errors?
- The EADDRINUSE error means the port 8080 is currently being used and EACCES is lack of permission for webpack to build files to ./dist/
How to use sass for css?
loaders: ['raw-loader','sass-loader'] and @Component({ styles: [ require('./filename.scss') ] }) see issue #136 from the Angular 2 Webpack Starter Kit
How do I test a Service?
See issue #130
How do I add vscode-chrome-debug support?
The VS Code chrome debug extension support can be done via launch.json see issue #144 from the Angular 2 Webpack Starter Kit
How do I make the repo work in a virtual machine?
You need to use 0.0.0.0 so revert these changes #205 from the Angular 2 Webpack Starter Kit
What are the naming conventions for Angular 2?
please see issue #185 and PR 196 from the Angular 2 Webpack Starter Kit
How do I include bootstrap or jQuery?
please see issue #215 and #214 from the Angular 2 Webpack Starter Kit
I'm getting an error about not finding my module that I installed?
please see custom_typings.d.ts from the Angular 2 Webpack Starter Kit
How do I async load a component?
the component must have .async.ts and require using webpack loader: () => require('./about/about')('About')

Acknowledgements

AngularClass for their Angular 2 Webpack repo which served as a starting point for the front-end

Support, Questions, or Feedback

Contact us anytime for anything about this repo, Angular 2, or MEAN stack development in general.

Twitter: @datatype_void

enjoy — Da5id

Looking for corporate Angular/MEAN training, want to host us, or Angular/MEAN consulting? [email protected]

License

MIT

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

MEAN Stack Development Starter

Quick start

Table of Contents

File Structure

Getting Started

Dependencies

Installing

config.json

Running the app

server

Other commands

build documentation

watch and build documentation

watch and lint sass

build files

watch and build files

run tests

watch and run our tests

run end-to-end tests

run webdriver (for end-to-end)

run Protractor's elementExplorer (for end-to-end)

all in one

Frequently asked questions

Acknowledgements

Support, Questions, or Feedback

License

About

Uh oh!

Releases

Packages

Uh oh!

Contributors

Uh oh!

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
app		app
config		config
sockets		sockets
src		src
.babelrc		.babelrc
.editorconfig		.editorconfig
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
gulpfile.conf.js		gulpfile.conf.js
gulpfile.js		gulpfile.js
karma.conf.js		karma.conf.js
package.json		package.json
protractor.conf.js		protractor.conf.js
server.conf.js		server.conf.js
server.js		server.js
spec-bundle.js		spec-bundle.js
test.js		test.js
tsconfig.json		tsconfig.json
tslint.json		tslint.json
typedoc.json		typedoc.json
typings.json		typings.json
webpack.config.js		webpack.config.js
webpack.prod.config.js		webpack.prod.config.js
webpack.test.config.js		webpack.test.config.js

Folders and files

Latest commit

History

Repository files navigation

MEAN Stack Development Starter

Quick start

Table of Contents

File Structure

Getting Started

Dependencies

Installing

config.json

Running the app

server

Other commands

build documentation

watch and build documentation

watch and lint sass

build files

watch and build files

run tests

watch and run our tests

run end-to-end tests

run webdriver (for end-to-end)

run Protractor's elementExplorer (for end-to-end)

all in one

Frequently asked questions

Acknowledgements

Support, Questions, or Feedback

License

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages