generator-makeme-famous v2.0.18
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.
- Universal Javascript with Angular
- Setting Up
- Typical workflows
- Overview of client folder
- Overview of module folder
- Gulp tasks
- Adding Bower packages
- → Generator docs
- → Ionic docs
- → Browserify docs
- Changelog
- 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:
- If you have issues (like
$ yo: command not found
) - first runnpm 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 5.3.0
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 intoclient/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
, notwebpack
) - Or make sure to require the dependencies in the code just before you
require
the package.
- Either add a browser-shim section (but this will only work with
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