Generator-fly-webapp NPM

generator-fly-webapp

Yeoman generator which scaffolds out a front-end web app with gulp.

Getting Started

Yeoman is THE WEB'S SCAFFOLDING TOOL FOR MODERN WEBAPPS.

Yeoman helps yo u to kickstart new projects, prescribing best practices and tools to help you stay productive.
To do so, we provide a generator ecosystem. A generator is basically a plugin that can be run with the yo command to scaffold complete projects or useful parts.

And generator-fly-webapp is a generator to help you to scaffold out a front-end web app.

Installation

To install generator-fly-webapp from npm, run:

npm install -g yo generator-fly-webapp

Then, initiate the generator:

yo fly-webapp [appName]

Finally, start the app:

# if dependencies were installed, ignore next line
npm install && bower install

gulp serve

You can visit http://0.0.0.0:7000/.

Features

✓ Powerful development server(BrowserSync for static files, Koa for API proxy and template rendering). Automatically restart server by nodemon. ✓ Handlebars templating support. And every view file can use yaml head to specify layout, data file and other settings. ✓ CSS preprocessor(sass), postprocessor(postcss) and sourcemap. Watch .sass file and automatically process it. ✓ Lint scripts automatically(use eslint). ✓ Automagically wire-up dependencies installed with Bower ✓ The gulpfile is wrote in ES2015 features.

Koa Server

Koa is used to render handlebars templates and proxy API currently. But it's easy to enhance it and serve as a product server.

Handlebars

Handlebars is the default template. And some excited features are supported.

Every view file can has a yaml head, just like github jekyll blog system. And inside head we can specify its own layout, data file and so on.
The data file means data for template rendering. The plugin will load the data file with the same name of view file default.
It's ok to set layout: false inside yaml head, and this will close layout and render template just like static html file.

ES2015

Besides gulpfile, the whole server side code is wrote in ES2015. Feel ease and embrace it.

Credits

koa-handlebars.es6.js rewrite based on koa-hbs. Because of yaml support, layout dynamic load and other features, rewrite koa-hbs instead of depend on it.
Borrowed base config and some gulp tasks from generator-gulp-webapp.

Thanks for their great work.