Awesome

generator-wbp

Deprecated: this generator was a way for me to start React projects more quickly. However, I since started using the awesome create-react-app, so I won't be maintaining this project anymore. I suggest you check it out!

A Yeoman generator which provides a modern workflow for developing web apps and sites.

Heavily inspired by generator-gulp-webapp, but far more opinionated. I want to make this generator as hardcore as it can be, starting a new project should be a breeze.

Features

gulp for running tasks
browserify for loading node modules on the front-end, with the following plugins:
- babelify for transforming JavaScript with Babel
- browserify-shim for shimming scripts which don't follow a module pattern
- easily include more browserify plugins
BrowserSync for running the local server (it's loaded with features)
React (optional) for managing views, with the following plugins:
- React Router for managing routes
- React Portal for handling things like modals
templating logic for views (if the React option is off) featuring:
- YAML front matter available under page.var
- data files available under site.data.filename.var, similar to Jekyll (currently supports only YAML)
- Lo-Dash templating
Fetch API polyfill wrapped as a convenience helper
FontFaceObserver for reducing FOIT when using webfonts
ESLint for JS & JSX linting, with the following plugins:
- eslint-plugin-react for fine-grained React-savvy JSX linting
- easily include more ESLint plugins
Sass for CSS pre-processing (using libsass)
PostCSS for CSS post-processing, with the following plugins:
- postcss-flexbugs-fixes for fixing some of the flexbugs
- autoprefixer for adding vendor prefixes
- easily include more PostCSS plugins
sourcemaps for JS & CSS
Normalize.css for normalizing styles across browsers
imagemin for image optimization
SVG for icons (<symbol> + <use>) + polyfill for IE
CSS loader component for React
Mocha as the test framework
jsdom for React testing (with TestUtils)
WebdriverIO as Node.js bindings for Selenium (if the React option is off)
PhantomJS as the browser for testing with WebdriverIO, so make sure you have it installed

See the current roadmap.

.babelrc is where you can set your Babel options globally, it will be picked up by both babel and babelify.

Getting Started

Install yo and generator-wbp globally:

❯ npm install --global yo generator-wbp

Now create a new directory for your project:

❯ mkdir my-webapp
❯ cd my-webapp

and run the generator to start scaffolding and installing dependencies:

❯ yo wbp

Scripts

There are some shortcut scripts in the package.json that you can run using npm. There are a couple of benefits to this:

it's usually shorter to type
if I happen to switch to another task runner, the npm scripts will stay the same
when run like this, the gulp command actually uses the local gulp, so we don't have to worry about local and global versions matching or even installing it globally
we don't have to create a gulp task for other shell commands, like deployment in our case

Side note: I'm not entirely sure that it's ok to use npm scripts this way, but we're not going to be publishing the generated "package" (which is why private is set to true), so we might as well abuse them.

Start the local server at http://localhost:9000 and watch files for changes:

❯ npm start

Run tests:

❯ npm test

Make a compressed production-ready build:

❯ npm run build

Preview the build, make sure nothing is broken:

❯ npm run preview

Deploy to S3 using AWS CLI:

❯ npm run deploy

This script needs to be adjusted according to your S3 data, or replace it with another script if you're deploying to somewhere else.

Contributing