Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/unbug/generator-webappstarter

Quick start a web app for mobile.Automatically adjusts according to a device’s screen size without any extra work.
https://github.com/unbug/generator-webappstarter

babel gulp mvc-framework webpack yeoman

Last synced: 24 days ago
JSON representation

Quick start a web app for mobile.Automatically adjusts according to a device’s screen size without any extra work.

Awesome Lists containing this project

README 

        
[![NPM](https://nodei.co/npm/generator-webappstarter.png?downloads=true&downloadRank=true)](https://nodei.co/npm/generator-webappstarter/)

  

  >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

========

```shell

npm install -g generator-webappstarter

```



Prereqs and installation requirements

=====================================

1.install [node](https://nodejs.org/) and [Python](https://www.python.org/).



2.install [yeoman](http://yeoman.io/).

```shell

npm install -g yo

```

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

```shell

npm link

```

to developing the generator locally.



Generator commands

==================

1.generate a new project,run



```shell

mkdir myProject

cd myProject

yo webappstarter

```

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



```shell

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



```shell

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



```shell

//this command will do:

//add "src/app/model/ModelNameModel.js"



yo webappstarter:model ModelName

```

4.update your project's boilerplate and structure



```shell

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



```shell

npm install -g gulp

```



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



```shell

gulp

```

or run with forever

```shell

forever ./node_modules/.bin/gulp

```

2.deploy to test server,run



```shell

gulp deploytest

```

Please update your ftp auth name and password in ".ftppass".

View the page on test server [http://office.mozat.com:8083/PROJECTNAME/](http://office.mozat.com:8083/PROJECTNAME/).

This command require [openssl](https://www.openssl.org/).

For windows,you might needd to add openssl path to classpath.



3.deploy to offical server,run



```shell

gulp deploy

```

View the page on offical server [http://m.deja.me/PROJECTNAME/](http://m.deja.me/PROJECTNAME/).

This command require [rsync](https://rsync.samba.org/).

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



```shell

gulp copy

``` 



5.run this command to start jshint.



```shell

gulp jshint

```



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



```shell

gulp serve

``` 



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



```shell

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](https://webpack.github.io/docs/commonjs.html) and [commonjs](http://www.commonjs.org/specs/modules/1.0/)

  * The DOOR for stylesheets is in ```/scss/styles.scss```,and the KEY is ```@import```,see [SASS](http://sass-lang.com/)

  * The DOOR for HTML is in ```/html/debug/index.html```,and the KEY is ```@@include```,see [gulp-file-include](https://www.npmjs.com/package/gulp-file-include)

  



Git

==========

Random git commit message



```shell

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

 ```