generator-makeme

 _____  _    _          _   __               _   __                             __       _    
|_   _|/ |_ | |        / |_[  |             / |_[  |                           [  |     / |_  
  | | `| |-'\_|.--.   `| |-'| |--.  .---.  `| |-'| |--.   .--.   __   _   .--./)| |--. `| |-' 
  | |  | |    ( (`\]   | |  | .-. |/ /__\\  | |  | .-. |/ .'`\ \[  | | | / /'`\;| .-. | | |   
 _| |_ | |,    `'.'.   | |, | | | || \__.,  | |, | | | || \__. | | \_/ |,\ \._//| | | | | |,  
|_____|\__/   [\__) )  \__/[___]|__]'.__.'  \__/[___]|__]'.__.'  '.__.'_/.',__`[___]|__]\__/  
  _   __              _                                      _          ( ( __))              
 / |_[  |            / |_                                   / |_                              
`| |-'| |--.   ,--. `| |-'  .---.   .--.   __   _   _ .--. `| |-'.--.                         
 | |  | .-. | `'_\ : | |   / /'`\]/ .'`\ \[  | | | [ `.-. | | | ( (`\]                        
 | |, | | | | // | |,| |,  | \__. | \__. | | \_/ |, | | | | | |, `'.'.  _                     
 \__/[___]|__]\'-;__/\__/  '.___.' '.__.'  '.__.'_/[___||__]\__/[\__) )(_)                    
                                                                                          
----------------------------------------------------------------- 

Makeme - A Universal Javascript generator for #coolkids

Makeme is a universal javascript stack generator for Yeoman - featuring Angular, Express, Node, Mongo and Socket.

Are you looking for Makeme Famous?

GyShiDo with makeme

To get shit done, here's a quick list of useful info.

Table of Contents

• Universal Javascript with Angular
• Setting Up
• Supported Configurations
• Project Structure
• Typical workflows
• Gulp tasks
• Bower components
• → Generators docs
• → Testing docs
• → Deployment docs
• Changelog
• Upgrade

Yeoman generator for creating MEAN stack applications, using MongoDB, Express, AngularJS, and Node - lets you quickly set up a project following best practices.

Built on:

Welcome to Universal Javascript

Javascript that can run both in the client (browser) and server (ie - Node.js) is here...read more about it here.

FullStack Generator

This yeoman universal javascript application stack generator features Angular, Express, Node, Mongo, Socket, and more.

Here are some of the main capabilities:

• Angular best practices (component/feature folder structure)
• SASS AND LESS enabled
• jshint, jscsc, eslint enabled for better quality code
• Karma configured with Code Coverage
• Protractor E2E Angular testing
• Browser-sync for synchronised browser testing
• Continuous integration with Travic CI
• TestFairy publishing for mobile testing
• ES6/7 supported by using the babel

NOTE:
This uses generator-fullstack-deps to scaffold common dependencies

Setting up

In order to get the best experience, you have to install a couple of global npm packages, like Gulp, Yemoan, and more.

Prerequisites

• Git
• Node.js and npm Node ^4.2.3, npm ^2.14.7
• Bower (npm install --global bower)
• Gulp (npm install --global gulp)
• MongoDB - Keep a running daemon with mongod

Auto install

Execute the following command:

$ npm install -g yo gulp bower generator-makeme

This will install, among others, the following packages globally:

• gulp
• yeoman
• bower
• makeme generator

A few things to note:

• If you have issues (like $ yo: command not found) - first run npm install -g yo & npm install --global gulp
• If you have existing project modify the name of the generator in your .yo-rc.json file
• If you need to update Node, do this:
• npm cache clean -f
• Install nvm
• nvm install 4.2.4
• nvm alias default 4.2.4
• nvm use 4.2.4

Supported Configurations

General

• Build Systems: Grunt, Gulp
• Testing:
  • Jasmine
  • Mocha + Chai + Sinon
    • Chai assertions:
      • Expect
      • Should

Client

• Scripts: Babel, TypeScript (Coming Soon)
• Markup: HTML, Jade
• Stylesheets: CSS, Stylus, Sass, Less
• Angular Routers: ngRoute, ui-router
• CSS Frameworks: Material, Bootstrap
  • Option to include UI Bootstrap

Server

• Scripts: Babel
• Database:
  • None,
  • MongoDB, SQL
    • Authentication boilerplate: Yes, No
    • oAuth integrations: Facebook Twitter Google
    • Socket.io integration: Yes, No

Configuration

The generated projects can be further tweaked according to your needs by modifying project files appropriately.

An editable .yo-rc file is generated for helping to copy configurations across projects, and to allow you to keep track of settings.

Project Structure

Base structure

├── client
│   ├── app                 - All app specific components go in here
│   ├── assets              - Custom assets: fonts, images, etc…
│   ├── components          - Reusable components, non-specific to this app
│
├── e2e                     - Protractor end to end tests
│
└── server
    ├── api                 - Local server api
    ├── auth                - For handling authentication with different auth strategies
    ├── components          - Reusable or app-wide components
    ├── config              - App configurations
    │   └── local.env.js    - Keep 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

Environment Variables

Keeping the app secrets and other sensitive information in source control isn't a good idea. To have gulp (or grunt) launch the app with specific environment variables, add them to the git ignored environment config file: server/config/local.env.js.

Injection

A gulp 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.

• less files into client/app/app.less
• scss files into client/app/app.scss
• stylus files into client/app/app.styl
• css files into client/index.html
• js files into client/index.html
• babel temp js files into client/index.html

Typical workflows

These are all available in the already provided apps, or inside any new apps you build.

• Develop with existing code

• $ gulp serve to start the app in watch mode
• Do some coding that is amazing
• $ gulp test to run the client & server unit tests with karma and mocha
• View changes in a c9 tab or new browser tab
  • Click the Preview button in the top menu
  • Or, go to https://gs-web-username.c9.io
• $ gulp to build the client app into the dist folder
• $ gulp buildcontrol:heroku to push changes to Heroku server

• Develop a new component (module, controller, factory, etc)

• $ yo makeme:route newModuleName
• $ yo makeme:controller newControllerName
• [?] Where would you like to create this controller? client/app/newModuleName
• $ gulp serve to start the app in watch mode
• Do some coding that is amazing
• $ gulp test to run the client & server unit tests with karma and mocha
• View changes in a c9 tab or new browser tab
  • Click the Preview button in the top menu
  • Or, go to https://gs-web-username.c9.io
• $ gulp to build the client app into the dist folder
• $ gulp buildcontrol:heroku to push changes to Heroku server

- To see more, check out the Generator docs.

Gulp tasks

Here is a set of simple gulp tasks available:

gulp                # Build the app
gulp serve          # Load the app in preview mode
gulp serve:debug	# Load a more debugging-friendly environment
gulp dist           # Distribute the application
------
gulp help           # List the main gulp tasks
gulp lint           # Run lint
gulp test           # Run lint, unit tests, and e2e tests
gulp unit           # Run lint and unit tests (karma for client + mocha for server)
gulp karma          # Run karma client unit tests
gulp mocha          # Run mocha server unit tests
gulp e2e            # Run protractor for end to end tests
gulp style          # Generate a main.css file

Running the server

Here are the main ways of running the app, which includes both an Express server, MongoDB server, and an Angular client app.

• Open server/index.js and start the app by clicking on the Run button in the top menu.

• Alternatively you can launch the app from the Terminal:

  • $ gulp serve to preview
  • $ gulp serve:dist to preview the built app
  • $ gulp serve:debug to run the app in debug mode
  • $ node server/index to run the production version of the app

Once the server is running, open the project in the shape of https://projectname-username.c9.io:3001

Bower Components

The following packages are always installed by the app generator:

• angular
• angular-cookies
• angular-mocks
• angular-resource
• angular-sanitize
• 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-bootstrap
• angular-material
• angular-famous
• bootstrap

All of these can be updated with bower update as new versions are released.

Adding Bower packages

You should always prefer an npm package instead of a bower package. Most of client side libraries nowadays exist as both npm and bower packages. But sometimes it is not the case and you have to deal with a bower package. Here's how to do it elegantly.

To include a third party bower package do the following:

• bower install --save thepackage
• modify package.json browser section to include a path to the global minified javascript file of the package
• if the package exposes a global .scss file import it into client/styles/main.scss and ajdust eventually the variable for the path font (should be ../fonts)
• if the package only exposes a .css file adjust the css file constants (gulp/common/constants.js) to include it
• if the package relies on other libraries
  • Either add a browser-shim section
  • Or make sure to require the dependencies in the code just before you require the package.

Changelog

Recent changes can be viewed on Github on the Releases Page

Upgrade

Here is the core generator upgrade process.

1:

npm update -g generator-makeme

2:

git pull github master

from makeme

Contribute

See the contributing docs

This project has 2 main branches: master and canary. The master branch is where the current stable code lives and should be used for production setups. The canary branch is the main development branch, this is where PRs should be submitted to (backport fixes may be applied to master).

By separating the current stable code from the cutting-edge development we hope to provide a stable and efficient workflow for users and developers alike.

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.

When submitting a bugfix, try to write a test that exposes the bug and fails before applying your fix. Submit the test alongside the fix.

When submitting a new feature, add tests that cover the feature.

See the travis.yml for configuration required to run tests.

License

BSD license from angular-fullstack