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

See the contributing docs, interesting stuff.

License

MIT © Matija Marohnić