Note: This generator is supporting a very early stage app,things gonna change very frequently,so please do not fork it or do any pull request.

Readme

webappstarter generator will give you a Simple Mobile Web App Boilerplate and Structure!

The App will automatically adjusts according to a device’s screen size without any extra work.

Install

npm install -g generator-webappstarter

Prereqs and installation requirements

1.install node and Python.

2.install yeoman.

npm install -g yo

3.[optional]Clone this git repo to your local,and from the root of the repo,run

npm link

to developing the generator locally.

Generator commands

1.generate a new project,run

mkdir myProject
cd myProject
yo webappstarter

or run with --skip-install option to skip install dependencies

mkdir myProject
cd myProject
yo webappstarter --skip-install

install dependencies manually with npm install or just copy node_modules folder from another project which was generated by webappstarter.

2.generate a new module,run

//this command will do:
//add "html/include/view-modulename.html" and inlude it to "html/include/views.html"
//add "scss/_view-modulename.scss" and import it to "scss/_view.scss"
//add "src/app/view/ModuleNameView.js"
//add "src/app/controller/ModuleNameController.js" and require it in src/app/App.js
 
yo webappstarter:module ModuleName

3.generate a new model,run

//this command will do:
//add "src/app/model/ModelNameModel.js"
 
yo webappstarter:model ModelName

4.update your project's boilerplate and structure

//this command will update
//"./src/core" directory
//"./src/lib" directory
//"./src/util" directory
//"./src/widget" directory
//some files in "./src/app/" directory
//some files in "./scss/" directory
//some files in "./html/" directory
 
yo webappstarter:update

Warning: When you are asked before an overwrite can occur,please be careful.Default "Y" is overwrite,"n" is skip.

More configurations,please take a look at "project" property of "package.json" file after the generator is done. Run gulp to re-build project is required after change the "package.json" file.

Project commands

run this command before you get started.

npm install -g gulp

1.build project,watch change and start browserSync,run

gulp

or run with forever

forever ./node_modules/.bin/gulp

2.deploy to test server,run

gulp deploytest

Please update your ftp auth name and password in ".ftppass". View the page on test server http://office.mozat.com:8083/PROJECTNAME/. This command require openssl. For windows,you might needd to add openssl path to classpath.

3.deploy to offical server,run

gulp deploy

View the page on offical server http://m.deja.me/PROJECTNAME/. This command require rsync. For windows,unzip /tools/rsync.zip to a local path and add the path to classpath.

4.run this command to copy source images to project's resources/images/ path,then generate scss/_sprites.csss and resources/images/sprites.png for sourceSprites in package.json.

gulp copy

5.run this command to start jshint.

gulp jshint

6.run this command to start browserSync,Change browserSync options in package.json.

gulp serve

7.run this command to start pagespeed,Change pagespeed options in package.json.

gulp pagespeed

Structure

The structure is modular design,follow the DOOR-KEY rule you only take minutes to understand it:

• The DOOR for javascript is in /src/app/App.js,and the KEY is require,see webpack and commonjs
• The DOOR for stylesheets is in /scss/styles.scss,and the KEY is @import,see SASS
• The DOOR for HTML is in /html/debug/index.html,and the KEY is @@include,see gulp-file-include

Git

Random git commit message

 git commit -m"`curl -s http://whatthecommit.com/index.txt`"