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.
- 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
- 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 (only 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-core and babelify.
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
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.
See the contributing docs, interesting stuff.
MIT © Matija Marohnić