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

-----------------------------------------------------------------

`Makeme` - A Universal Javascript generator for #coolkids

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

[ ![Codeship Status for beardandfedora/generator-makeme](https://codeship.com/projects/#)

> Are you looking for Makeme Famous?

GyShiDo with `makeme`

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

#### 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
![npm version](http://badge.fury.io/js/generator-angular-fullstack)
![Dependency Status](https://david-dm.org/angular-fullstack/generator-angular-fullstack)
![Dev-Dependency Status](https://david-dm.org/angular-fullstack/generator-angular-fullstack#info=devDependencies)
![Gitter chat](https://gitter.im/DaftMonk/generator-angular-fullstack)

---

Welcome to Universal Javascript

![](https://cdn-images-1.medium.com/max/1600/1*pkA5znpcqqmIwZRXesioGA.png)
Javascript that can run both in the client (browser) and server (ie - Node.js) is here...read more about it here.

$3

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.

$3

- 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

$3

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:

1. If you have issues (like $ yo: command not found) - first run npm install -g yo & npm install --global gulp2. If you have existing project modify the name of the generator in your.yo-rc.jsonfile 3. If you need to update Node, do this: 1.npm cache clean -f2. Install nvm 3.nvm install 4.2.44.nvm alias default 4.2.45.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 includeUI Bootstrap

Server

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

`$3`


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 ourthingendpoint ├── thing.model.js - Database model ├── thing.socket.js - Register socket events └── thing.spec.js - Test

`$3`

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.

`$3`

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.

1. Develop with existing code -$ gulp serve to start the app in watchmode - Do somecodingthat 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 thePreviewbutton in the top menu - Or, go to https://gs-web-username.c9.io -$ gulp to build the client app into the distfolder -$ gulp buildcontrol:herokuto push changes to Heroku server 2. 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 watchmode - Do somecodingthat 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 thePreviewbutton in the top menu - Or, go to https://gs-web-username.c9.io -$ gulp to build the client app into the distfolder -$ 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.

1. Open server/index.js and start the app by clicking on the Runbutton in the top menu. 2. Alternatively you can launch the app from theTerminal:

- $ gulp serveto preview -$ gulp serve:distto preview the built app -$ gulp serve:debugto run the app in debug mode -$ node server/indexto run the production version of the app Once the server is running, open the project in the shape ofhttps://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.

`$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* modifypackage.json browsersection 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 yourequirethe 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 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

`Makeme` - A Universal Javascript generator for #coolkids

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

[ ![Codeship Status for beardandfedora/generator-makeme](https://codeship.com/projects/#)

> Are you looking for Makeme Famous?

GyShiDo with `makeme`

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

#### Table of Contents

---

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

---

Welcome to Universal Javascript

![](https://cdn-images-1.medium.com/max/1600/1*pkA5znpcqqmIwZRXesioGA.png)
Javascript that can run both in the client (browser) and server (ie - Node.js) is here...read more about it here.

$3

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

Here are some of the main capabilities:

---

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

$3

- 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

$3

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:

---

`Supported Configurations`

General

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

Client

Server

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

`$3`


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

#### 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

`$3`

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.

`Typical workflows`


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

#### - 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.

1. Open server/index.js and start the app by clicking on the Runbutton in the top menu. 2. Alternatively you can launch the app from theTerminal:

`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.

`$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:

`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 makeme

`Contribute`

See the contributing docs

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

generator-makeme

Makeme - A Universal Javascript generator for #coolkids

GyShiDo with makeme

Welcome to Universal Javascript

$3

Setting up

$3

$3

Supported Configurations

$3

Project Structure

$3

$3

Typical workflows

Gulp tasks

Running the server

Bower Components

$3

Changelog

Upgrade

Contribute

License

generator-makeme

Makeme - A Universal Javascript generator for #coolkids

GyShiDo with makeme

Welcome to Universal Javascript

$3

Setting up

$3

$3

Supported Configurations

$3

Project Structure

$3

$3

Typical workflows

Gulp tasks

Running the server

Bower Components

$3

Changelog

Upgrade

Contribute

License

`Makeme` - A Universal Javascript generator for #coolkids

GyShiDo with `makeme`

`Supported Configurations`

`$3`

`Project Structure`

`$3`

`$3`

`Typical workflows`

`Gulp tasks`

`Bower Components`

`$3`

`Changelog`

`Upgrade`

`Contribute`

`Makeme` - A Universal Javascript generator for #coolkids

GyShiDo with `makeme`

`Supported Configurations`

`$3`

`Project Structure`

`$3`

`$3`

`Typical workflows`

`Gulp tasks`

`Bower Components`

`$3`

`Changelog`

`Upgrade`

`Contribute`