Yeoman generator for creating MEAN stack applications, using MongoDB, Express, AngularJS, and Node.
Featuring:
- Express server integrated with grunt tasks
- Livereload of client and server files
- Support for Jade and CoffeeScript
- Easy deployment workflow.
- Optional MongoDB integration
- Optional Passport integration for adding user accounts
Generated by saying yes to all questions: http://fullstack-demo.herokuapp.com/.
Have a look at the source code: https://github.com/DaftMonk/fullstack-demo
- MongoDB - Download and Install MongoDB - If you plan on scaffolding your project with mongoose, you'll need mongoDB to be installed.
Install generator-angular-fullstack:
npm install -g generator-angular-fullstackMake a new directory, and cd into it:
mkdir my-new-project && cd $_Run yo angular-fullstack, optionally passing an app name:
yo angular-fullstack [app-name]Launch your express server in development mode.
grunt serveLaunch your express server in debug-brk mode with a node-inspector tab.
grunt serve:debugLaunch your express server in production mode, uses the minified/optimized production folder.
grunt serve:distgrunt serve will watch client files in app/, and server files inside lib/, restarting the Express server when a change is detected.
To generate a dist folder that can easily be deployed use:
gruntThis will run unit tests, jshint, concatenate and minify scripts/css, compress images, add css vendor prefixes, and finally copy all files to a tidy dist folder.
Alternatively to skip tests and jshint, use:
grunt buildWe provide an extremely simplifed deployment process for heroku.
yo angular-fullstack:deploy heroku generates a dist folder that is deployment ready for heroku.com.
Create and Deploy an app in 4 steps
-
mkdir foo && cd foo -
yo angular-fullstack -
yo angular-fullstack:deploy heroku -
cd dist && git push heroku master -
Optional (if using mongoDB)
heroku addons:add mongohq
That's it! Your app should be live and shareable. Type heroku open to view it.
All of the generator-angular client side generators are available, but aliased with angular-fullstack to correctly generate with the fullstack folder structure.
Angular sub-generators:
- angular-fullstack:controller
- angular-fullstack:directive
- angular-fullstack:filter
- angular-fullstack:route
- angular-fullstack:service
- angular-fullstack:provider
- angular-fullstack:factory
- angular-fullstack:value
- angular-fullstack:constant
- angular-fullstack:decorator
- angular-fullstack:view
Fullstack sub-generators:
Note: Generators are to be run from the root directory of your app.
Read more on the angular sub-generators from the offical generator angular documentation
Initalizes a heroku app and generates a dist folder which is ready to push to heroku.
To do the same manually, you need to:
- Build a dist folder
- Create a Procfile in the dist folder
- Create a repository:
git init && git add -A && git commit -m "Initial commit" - Create a heroku app:
heroku apps:create && heroku config:set NODE_ENV=production
Example:
yo angular-fullstack:deploy herokuAfter app modifications run:
grunt buildthen commit and push the dist folder.
In general, these options can be applied to any generator, though they only affect generators that produce scripts.
For generators that output views, the --jade option will output Jade instead of HTML.
For example:
yo angular-fullstack --jadeChanges the rendering engine from EJS to Jade, and generates your views as jade files instead of HTML.
Assets that will be minified or compressed such as scripts, styles, and images, must still use normal html tags so they can be picked up by grunt-usemin and compressed for production builds.
For generators that output scripts, the --coffee option will output CoffeeScript instead of JavaScript.
For example:
yo angular-fullstack:controller user --coffeeProduces app/scripts/controller/user.coffee:
angular.module('myMod')
.controller 'UserCtrl', ($scope) ->A project can mix CoffeScript and JavaScript files.
To output JavaScript files, even if CoffeeScript files exist (the default is to output CoffeeScript files if the generator finds any in the project), use --coffee=false.
Deprecated
Related Issue #452: This option is being removed in future versions of the generator.
By default, generators produce unannotated code. Without annotations, AngularJS's DI system will break when minified. ngMin is used to add these annotations before minification.
By default, new scripts are added to the index file. However, this may not always be suitable. Some use cases:
- Manually added to the file
- Auto-added by a 3rd party plugin
- Using this generator as a subgenerator
To skip adding them to the index, pass in the skip-add argument:
yo angular-fullstack:service serviceName --skip-addThe following packages are always installed by the app generator:
- angular
- angular-mocks
- angular-scenario
The following additional modules are available as components on bower, and installable via bower install:
- angular-cookies
- angular-loader
- angular-resource
- angular-sanitize
All of these can be updated with bower update as new versions of AngularJS are released.
The passport boilerplate requires the ng-route, ng-resource, and ng-cookie modules to work out of the box.
It generates a login, signup, and settings page, and creates the backend support for creating accounts using PassportJS.
For restricting server API routes to logged in users, you can pass your routes through the auth middleware, which will send a 401 unauthorized error if a request is made from someone thats not authenticated.
The client side will automatically send you to the login page if it receives a 401 error.
However, as this will load part of the page before redirecting, it will cause a flicker. A way to avoid this is to to mark the routes on the client side that you want to require authentication for.
You can do this from your app.js by adding the following to any client routes that you want to restrict to logged in users.
authenticate: true
Keep in mind this client routing is only for improving the user interface. Make sure you secure your server API routes and don't give any sensitive information unless the user is authenticated or authorized.
Running grunt test will run the client and server unit tests with karma and mocha.
Use grunt test:server to only run server tests.
Use grunt test:client to only run client tests.
See the contributing docs
When submitting an issue, please follow the guidelines. Especially important is to make sure Yeoman is up-to-date, and providing the command or commands that cause the issue.
When submitting a PR, make sure that the commit messages match the AngularJS conventions.