Makeme Famous - A Universal Javascript generator for #coolkids

Makeme Famous is a universal javascript stack generator for Yeoman - featuring Angular, Browserify, Material, Semantic, Ionic and Famous.

Are you looking for Makeme Fullstack?

GyShiDo with makeme-famous

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

1. Universal Javascript with Angular
2. Setting Up
3. Typical workflows
4. Overview of client folder
5. Overview of module folder
6. Gulp tasks
7. Adding Bower packages
8. → Generator docs
9. → Ionic docs
10. → Browserify docs
11. Changelog
12. Upgrade

---

---

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.

Stack Generator

This yeoman universal javascript application stack generator features Angular, Ionic Framework, Semantic UI, Angular Material (or Angular Bootstrap), Angular Famous, and more.

Here are some of the main capabilities:

• Angular best practices (feature folder structure)
• SASS AND LESS enabled
• jshint, jscsc, eslint enabled for better quality code
• Browserify or Webpack (you can switch them out)
• 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
• Ionic.io publishing
• ES6/7 supported by using the babel

---

NOTE:
This uses generator-sublime to scaffold common dot files (.jshintrc, .eslintrc, etc...).

Setting up

In order to get the best experience, you have to install a couple of global npm packages, like Gulp, Yemoan, and more. Feel free to tweak ./bin/prepublish.sh to add additional requirements.

###Prerequisites

Auto install

Execute the following command:

$ ./bin/prepublish.sh

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

• gulp
• browserify
• watchify
• webpack
• cordova
• ionic (cli) (Cordova wrapper)

Install the generator

Install dependencies and generator-makeme-famous:

 npm install -g yo gulp bower mocha istanbul codeclimate-test-reporter generator-makeme-famous

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
2. If you have existing project modify the name of the generator in your .yo-rc.json file
3. If you need to update Node, do this:
4. npm cache clean -f
5. Install nvm
6. nvm install 5.3.0
7. nvm use 5.3.0.

---

Typical workflows

Some tyical workflows to get started with.

New app

$ yo makeme-famous:target newapp

Or

yo makeme-famous:target newapp --mobile

New module

A typical new module workflow would look like this:

$ mkdir new-app && cd $_
$ yo makeme-famous:module common
$ yo makeme-famous:controller common hello

> Add some content to client/index.html : <h2 ng-controller="new-app.common.hello as helloCtrl">{{helloCtrl.message}}</h2>

$ gulp browsersync
$ gulp watch

New controller, existing module

A typical new controller workflow would look like this:

$ cd new-app
$ yo makeme-famous:controller common hello

> Add some content to client/index.html : <h2 ng-controller="new-app.common.hello as helloCtrl">{{helloCtrl.message}}</h2>

$ gulp browsersync
$ gulp watch

TIP: gulp browsersync accepts an option --no-browser if you do not want to automatically open a browser

---

NOTE: gulp browsersync accepts an option --https if you want to force an HTTPS connection you can also control http vs https using in gulp_taks/common/constants.js -> serve.https boolean

- To see more, check out the Generator docs.

The Client folder

When building a new app, the generator will ask you to provide the name of the folder containing the client source code, and it will save this value in .yo-rc.json file (clientFolder entry). If you rename the client folder, make sure you also modify the value stored in .yo-rc.json

Gulp tasks

Here is a set of simple gulp tasks available:

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 browserify     # Generate a distribution folder using browserify
gulp webpack:run    # Generate a distribution folder using webpack
gulp style          # Generate a main.css file
gulp browsersync    # Creates a browser-sync server, it will display its url, it watches for js / css / scss / html file changes and inject automatically the change in the browser
gulp dist           # Distribute the application
gulp cordova:image  # Generate the cordova icons and splashs
gulp cordova:run    # Run cordova run (accepts a --platform option)

See the full gulp docs for all of the yummy Gulp tasks.

The gulp tasks share a constant file located at gulp/common/constants.js. Feel free to modify it.
The constants are resolved against the --target option. The default value for --target is app.

To better understand the gulp task system have a look at the docs of gulp-mux

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
• adjust the font gulp constants (gulp/common/constants.js) to include the relevant fonts of the package (if applicable)
• 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 (but this will only work with browserify, not webpack)
  • 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-famous

2:

git pull github master