A simple boilerplate for frontend developers for building modular web apps or sites with Node.js, Bower, RequireJS (amd) and Grunt.
Table of Contents generated with DocToc
- Features
- Prerequisites
- Installation
- Getting started
- Working on your app
- Advanced Usage
- Examples
- FAQ/Troubleshotting
- Contribute
- Author
- License
- Npm is the tool provided with Node.JS. It is used to get tools and frameworks while automatically resolving their dependencies via the package.json file.
- Bower simplify dependency management. It's a package manager for frontend libraries which are listed in a bower.json file.
- Grunt is a task runner. It can be set to automatically load plugins. Those tasks combine and minify javaScript files; check code for errors; compile SASS to CSS.
- Grower-JS can run essential tasks for a frontend developer : watch changed files to rerun automatically tasks, run build task to generate files to deploy, check code quality with jsHint and analyze code complexity to get a better maintainability.
- A config.json file allows to change most of paths and folders either for the architecture in source files or for the generated files.
- Easily customizable: can integrate lots of libraries which can be installed with Bower tool or manually added in a vendors directory. By default, it includes jQuery and Underscore.js, which could be uninstalled if those aren't necessary.
- No framework, no skeleton. The core app hasn't to follow the rules of a base structure. All types of sites or web app can be developed from this kickstarter.
-
Clone git repository (or download sources) :
$ git clone [email protected]:proustibat/grower-js.git -
Run npm install script
$ npm install
Npm will download all plugins listed in the packages.json file then a bower install command will download all libraries listed in the bower.json file.
$ grunt prod It launches automatically a browser at for example http://localhost/grower-js/public after all tasks have run.
$ grunt availabletasks
$ grunt dev
$ grunt prod
$ grunt analyze
$ grunt open-browser
$ grunt deploy-github $ grunt dev or simply :
$ grunt |-- grower-js
|-- .bowerrc
|-- .gitignore
|-- .jshintrc
|-- bower.json
|-- config.json
|-- Gruntfile.js
|-- LICENSE
|-- package.json
|-- README.md
|-- grunt
| |-- availabletasks.js
| |-- bower_concat.js
| |-- complexity.js
| |-- jshint.js
| |-- open.js
| |-- requirejs.js
| |-- uglify.js
| |-- usebanner.js
| |-- watch.js
|-- public
| |-- index.html
| |-- js
| | |-- grower-js-1.0.0.min.js
| | |-- grower-js-1.0.0.min.js.map
| |-- vendors
| |-- vendors.min.js
|-- src
|-- js
| |-- main.js
| |-- app
| |-- module.js
|-- vendors
|-- put-vendor-here.js
For information use:
...
<script src="vendors/vendors.min.js"></script>
<script src="js/grower-js-1.0.0.min.js"></script>
</body>This is the "module" demo :
define('app/module',\[
\], function\(\)\{
"use strict";
return function\(\) \{
return \{
message: 'Hello Module\!',
element: null,
init: function\( element \) \{
console.log\( 'Module.init : ', element \);
this.element = element;
this.element.html\( this.message \);
var button = $\('<button type="button">Click Me\!</button>'\);
this.element.append\( button \);
$\(button\).on\( 'click', \_.bind\( this.onClick, this \) \);
$\(button\).trigger\( 'click' \);
},
onClick: function\( e \) {
console.log\( 'Module.onClick' \);
e.preventDefault\(\);
e.stopPropagation\(\);
this.element.css\(\{
color: '\#'\+\(\(1\<\<24\)\*Math.random\(\)|0\).toString\(16\),
backgroundColor: '\#'\+\(\(1\<\<24\)\*Math.random\(\)|0\).toString\(16\)
\}\);
\}
\};
\};
\}\);
Note that returning a function is a way to access the "new" constructor as below.
This is the "main" module in the demo :
define('main',\[ \/\/ Module name
'app/module' \/\/ Path to module file required
\], function(Module){ \/\/ Alias for the class name of the required module
"use strict";
$('h1').html( 'Hello Main !' );
var fooModule = new Module(); \/\/ Instanciation
fooModule.init( $('.foo') ); \/\/ init call method
var barModule = new Module();
barModule.init( $('.bar') );
});The "main" module instanciates 2 "Module" objects and call its "init" method.
...
$ bower install vendor-lib.js --save Download library file in /src/vendors. It will automatically compile grunt dev or grunt
{
"root_src": "src",
"root_public": "public",
"dir_vendors": "vendors",
"dir_js": "js",
"dir_css": "css",
"gruntfile": "Gruntfile.js",
"pkgjson_file": "package.json",
"bowerrc_file": ".bowerrc",
"dir_grunt": "./grunt",
"output_js_app": false,
"output_js_vendors": false,
"host": {
"local": "http://localhost/grower-js/public"
},
"global_namespace": "grwr",
"browser": "Chrome"
}TODO
- availabletask
- bower_concat
- analyze with complexity
- gh-pages and deploy-github
- jshint
- open
- requirejs
- uglify
- usebanner
- watch
// TODO
Single one page app
// TODO
Multi-pages site
// TODO
Simple templating with Underscore
// TODO
Localhost / open-browser
// TODO
- Check wamp configuration
- Check root location
- Check browser configuration in config.json
RequireJS / Almond
// TODO
// Todo
// TODO
- Issue Tracker: https://github.com/proustibat/grower-js/issues
- Source Code: https://github.com/proustibat/grower-js
Jennifer Proust