A Fullstack Universal Javascript Generator for #coolkids that uses Angular, Express, Node, Mongo, Socket + more
npm install 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?
makeme#### Table of Contents
1. Universal Javascript with Angular
2. Setting Up
3. Supported Configurations
4. Project Structure
5. Typical workflows
6. Gulp tasks
7. Bower components
8. → Generators docs
9. → Testing docs
10. → Deployment docs
11. Changelog
12. 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:
!Build Status




---
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
- 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
```
$ 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:
1. If you have issues (like $ yo: command not found) - first run npm install -g yo & npm install --global gulp.yo-rc.json
2. If you have existing project modify the name of the generator in your file npm cache clean -f
3. If you need to update Node, do this:
1. nvm install 4.2.4
2. Install nvm
3. nvm alias default 4.2.4
4. nvm use 4.2.4
5.
---
General
* Build Systems: Grunt, Gulp Jasmine
* Testing:
* Mocha + Chai + Sinon
* Expect
* Chai assertions:
* Should
*
Client
* Scripts: Babel, TypeScript (Coming Soon)HTML
* Markup: , JadeCSS
* Stylesheets: , Stylus, Sass, LessngRoute
* Angular Routers: , ui-routerMaterial
* CSS Frameworks: , BootstrapUI Bootstrap
* Option to include
Server
* Scripts: BabelNone
* Database:
* ,MongoDB
* , SQLYes
* Authentication boilerplate: , No
* oAuth integrations: Twitter GoogleYes
* Socket.io integration: , No
An editable .yo-rc file is generated for helping to copy configurations across projects, and to allow you to keep track of settings.
#### 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
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.
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.lessscss
* files into client/app/app.scssstylus
* files into client/app/app.stylcss
* files into client/index.htmljs
* files into client/index.htmlbabel
* temp js files into client/index.html
1. Develop with existing code
- $ gulp serve to start the app in watch modecoding
- Do some that is amazing$ gulp test
- to run the client & server unit tests with karma and mochaPreview
- View changes in a c9 tab or new browser tab
- Click the button in the top menu$ gulp
- Or, go to https://gs-web-username.c9.io
- to build the client app into the dist folder$ gulp buildcontrol:heroku
- to push changes to Heroku server$ yo makeme:route newModuleName
2. Develop a new component (module, controller, factory, etc)
- $ yo makeme:controller newControllerName
- client/app/newModuleName
- [?] Where would you like to create this controller? $ gulp serve
- to start the app in watch modecoding
- Do some that is amazing$ gulp test
- to run the client & server unit tests with karma and mochaPreview
- View changes in a c9 tab or new browser tab
- Click the button in the top menu$ gulp
- Or, go to https://gs-web-username.c9.io
- 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 # 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.1. Open
server/index.js and start the app by clicking on the Run button in the top menu.
2. 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:3001Bower 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.$3
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:
`bash
npm update -g generator-makeme
`
2:
`bash
git pull github master
`
from makemeContribute
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.