generator-angular-material-fullstack

# AngularJS Material Full-Stack generator [![Build Status](https://travis-ci.org/sincraianul/generator-angular-material-fullstack.svg)](https://travis-ci.org/sincraianul/generator-angular-material-fullstack) [![npm version](https://badge.fury.io/js/generator-angular-material-fullstack.svg)](http://badge.fury.io/js/generator-angular-material-fullstack) > Yeoman generator for creating MEAN stack applications, using MongoDB, Express, AngularJS with Angular Material, and Node - lets you quickly set up a project following best practices. ## Usage Install `generator-angular-material-fullstack`: ``` npm install -g generator-angular-material-fullstack ``` Make a new directory, and `cd` into it: ``` mkdir my-new-project && cd $_ ``` Run `yo angular-material-fullstack`, optionally passing an app name: ``` yo angular-material-fullstack [app-name] ``` Run `grunt` for building, `grunt serve` for preview, and `grunt serve:dist` for a preview of the built app. ## Prerequisites * MongoDB - Download and Install [MongoDB](http://www.mongodb.org/downloads) - If you plan on scaffolding your project with mongoose, you'll need mongoDB to be installed and have the `mongod` process running. ## Supported Configurations **Client** * Scripts: `JavaScript`, `CoffeeScript`, `Babel` * Markup: `HTML`, `Jade` * Stylesheets: `CSS`, `Sass`, * Angular Routers: `ngRoute`, `ui-router` **Server** * Database: `None`, `MongoDB` * Authentication boilerplate: `Yes`, `No` * oAuth integrations: `Facebook` `Twitter` `Google` * Socket.io integration: `Yes`, `No` ## Injection A grunt task looks for new files in your `client/app` and `client/components` folder and automatically injects them in the appropriate places based on an injection block. * `scss` files into `client/app.scss` * `css` files into `client/index.html` * `js` files into `client/index.html` * `coffeescript` temp `js` files into `client/index.html` * `babel` temp `js` files into `client/index.html` ## Generators Available generators: * App - [angular-material-fullstack](#app) (aka [angular-material-fullstack:app](#app)) * Server Side - [angular-material-fullstack:endpoint](#endpoint) * Client Side - [angular-material-fullstack:route](#route) - [angular-material-fullstack:controller](#controller) - [angular-material-fullstack:filter](#filter) - [angular-material-fullstack:directive](#directive) - [angular-material-fullstack:service](#service) - [angular-material-fullstack:provider](#service) - [angular-material-fullstack:factory](#service) - [angular-material-fullstack:decorator](#decorator) * Deployment - [angular-material-fullstack:openshift](#openshift) - [angular-material-fullstack:heroku](#heroku) ### App Sets up a new AngularJS + Express app, generating all the boilerplate you need to get started. Example: ```bash yo angular-material-fullstack ``` ### Endpoint Generates a new API endpoint. Example: ```bash yo angular-material-fullstack:endpoint message [?] What will the url of your endpoint be? /api/messages ``` Produces: server/api/message/index.js server/api/message/message.spec.js server/api/message/message.controller.js server/api/message/message.model.js (optional) server/api/message/message.socket.js (optional) ### Route Generates a new route. Example: ```bash yo angular-material-fullstack:route myroute [?] Where would you like to create this route? client/app/ [?] What will the url of your route be? /myroute ``` Produces: client/app/myroute/myroute.js client/app/myroute/myroute.controller.js client/app/myroute/myroute.controller.spec.js client/app/myroute/myroute.html client/app/myroute/myroute.scss ### Controller Generates a controller. Example: ```bash yo angular-material-fullstack:controller user [?] Where would you like to create this controller? client/app/ ``` Produces: client/app/user/user.controller.js client/app/user/user.controller.spec.js ### Directive Generates a directive. Example: ```bash yo angular-material-fullstack:directive myDirective [?] Where would you like to create this directive? client/app/ [?] Does this directive need an external html file? Yes ``` Produces: client/app/myDirective/myDirective.directive.js client/app/myDirective/myDirective.directive.spec.js client/app/myDirective/myDirective.html client/app/myDirective/myDirective.scss **Simple directive without an html file** Example: ```bash yo angular-material-fullstack:directive simple [?] Where would you like to create this directive? client/app/ [?] Does this directive need an external html file? No ``` Produces: client/app/simple/simple.directive.js client/app/simple/simple.directive.spec.js ### Filter Generates a filter. Example: ```bash yo angular-material-fullstack:filter myFilter [?] Where would you like to create this filter? client/app/ ``` Produces: client/app/myFilter/myFilter.filter.js client/app/myFilter/myFilter.filter.spec.js ### Service Generates an AngularJS service. Example: ```bash yo angular-material-fullstack:service myService [?] Where would you like to create this service? client/app/ ``` Produces: client/app/myService/myService.service.js client/app/myService/myService.service.spec.js You can also do `yo angular-material-fullstack:factory` and `yo angular-material-fullstack:provider` for other types of services. ### Decorator Generates an AngularJS service decorator. Example: ```bash yo angular-material-fullstack:decorator serviceName [?] Where would you like to create this decorator? client/app/ ``` Produces client/app/serviceName/serviceName.decorator.js ###Openshift Deploying to OpenShift can be done in just a few steps: yo angular-material-fullstack:openshift A live application URL will be available in the output. > **oAuth** > > If you're using any oAuth strategies, you must set environment variables for your selected oAuth. For example, if we're using Facebook oAuth we would do this : > > rhc set-env FACEBOOK_ID=id -a my-openshift-app > rhc set-env FACEBOOK_SECRET=secret -a my-openshift-app > > You will also need to set `DOMAIN` environment variable: > > rhc set-env DOMAIN=<your-openshift-app-name>.rhcloud.com > > # or (if you're using it): > > rhc set-env DOMAIN=<your-custom-domain> > > After you've set the required environment variables, restart the server: > > rhc app-restart -a my-openshift-app To make your deployment process easier consider using [grunt-build-control](https://github.com/robwierzbowski/grunt-build-control). **Pushing Updates** grunt Commit and push the resulting build, located in your dist folder: grunt buildcontrol:openshift ### Heroku Deploying to heroku only takes a few steps. yo angular-material-fullstack:heroku To work with your new heroku app using the command line, you will need to run any `heroku` commands from the `dist` folder. If you're using mongoDB you will need to add a database to your app: heroku addons:add mongolab Your app should now be live. To view it run `heroku open`. > > If you're using any oAuth strategies, you must set environment variables for your selected oAuth. For example, if we're using **Facebook** oAuth we would do this : > > heroku config:set FACEBOOK_ID=id > heroku config:set FACEBOOK_SECRET=secret > > You will also need to set `DOMAIN` environment variable: > > heroku config:set DOMAIN=<your-heroku-app-name>.herokuapp.com > > # or (if you're using it): > > heroku config:set DOMAIN=<your-custom-domain> > To make your deployment process easier consider using [grunt-build-control](https://github.com/robwierzbowski/grunt-build-control). #### Pushing Updates grunt Commit and push the resulting build, located in your dist folder: grunt buildcontrol:heroku ## Bower Components The following packages are always installed by the [app](#app) generator: * angular * angular-cookies * angular-mocks * angular-resource * angular-messages * angular-animate * angular-sanitize * angular-scenario * angular-aria * es5-shim * font-awesome * json3 * jquery * lodash These packages are installed optionally depending on your configuration: * angular-route * angular-ui-router * angular-socket-io * angular-material All of these can be updated with `bower update` as new versions are released. ## Configuration Yeoman generated projects can be further tweaked according to your needs by modifying project files appropriately. A `.yo-rc` file is generated for helping you copy configuration across projects, and to allow you to keep track of your settings. You can change this as you see fit. ## Testing 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. **Protractor tests** To setup protractor e2e tests, you must first run `npm run update-webdriver` Use `grunt test:e2e` to have protractor go through tests located in the `e2e` folder. ## Environment Variables Keeping your app secrets and other sensitive information in source control isn't a good idea. To have grunt launch your app with specific environment variables, add them to the git ignored environment config file: `server/config/local.env.js`. ## Project Structure Overview ├── client │ ├── app - All of our app specific components go in here │ ├── assets - Custom assets: fonts, images, etc… │ ├── components - Our reusable components, non-specific to to our app │ ├── e2e - Our protractor end to end tests │ └── server ├── api - Our apps server api ├── auth - For handling authentication with different auth strategies ├── components - Our reusable or app-wide components ├── config - Where we do the bulk of our apps configuration │ └── local.env.js - Keep our environment variables out of source control │ └── environment - Configuration specific to the node environment └── views - Server rendered views An example client component in `client/app` main ├── main.js - Routes ├── main.controller.js - Controller for our main route ├── main.controller.spec.js - Test ├── main.html - View └── main.less - Styles An example server component in `server/api` thing ├── index.js - Routes ├── thing.controller.js - Controller for our `thing` endpoint ├── thing.model.js - Database model ├── thing.socket.js - Register socket events └── thing.spec.js - Test  ## License [BSD license](http://opensource.org/licenses/bsd-license.php)