Boilerplate to build a React PWA with Webpack + Workbox

I have build this boilerplate following the Webpack documentation which is great.

Why another boilerplate?

The answer is simple. I wanted to go through the whole process of setting up my environment to build awesome web apps and be able to understand every single piece of a boilerplate config. That's why I decided to build my own. I'm very thankful to the new Webpack documentation which has helped me a lot.

This starter kit comes with:

• Yarn: A fast dependency manager
• Webpack 3 setup for production and development environments
• Workbox: JavaScript Libraries for Progressive Web Apps
• Prettier: Opinionated Code Formatter
• Live reload with webpack-dev-server
• Babel 7 to compile next generation JavaScript
• SASS
• HTML Webpack Plugin: Especially useful for webpack bundles that include a hash in the filename which changes every compilation. With this plugin you write a HTML template and the plugin takes care of inserting the .js and .css script for you whenever your code changes and gets compiled.
• css-loader and style-loader to loader your css and put into your .js bundle when in dev mode or load the css and put it in a separate folder when in production mode with extract-text-webpack-plugin
• url-loader used to load your images into your bundle. This plugin can return a Data Url if the file is smaller than a byte limit. That means if you have an image file which is less than a size lime you have specified on your webpack config that assets gets bundled inline, otherwise it is copied to to your dist folder with file-loader. Hence, when you add url-loader to your devDependencies you also have to add file-loader cuz it's a peer dependencie.

Getting Started

To get started, clone the repo and run yarn install, or npm install if you are using npm. I recommend Yarn because it's fast than npm and also enables you to have a cache on your machine so you don't waste your bandwidth having to download everything whenever your run npm install.

Get the latest snapshot, or the entire repo if you remove --depth=1

git clone --depth=1 https://github.com/oPauloChaves/es6-webpack2-starter.git project-name
cd project-name
yarn install
# or
npm install

You have to have Node (version >= 6) installed on your machine. This project depends on webpack-dev-server which recommends you use version 6 for the moment because there are some known issues with version 7. In my machine I have been using node v7 with no issues.

Running in development mode

yarn start
# or
npm start 

The app is available on localhost:3000

Building and running the production build

yarn run build

npm i -g serve
serve -s dist

   ┌────────────────────────────────────────────────┐
   │                                                │
   │   Serving!                                     │
   │                                                │
   │   - Local:            http://localhost:5000    │
   │   - On Your Network:  http://10.0.0.105:5000   │
   │                                                │
   │   Copied local address to clipboard!           │
   │                                                │
   └────────────────────────────────────────────────┘

Testing

Linting

yarn run lint
# or to autofix
yarn run lint:fix

Formatting with Prettier

yarn run format

Contributing

Pull requests are very welcome!

TOD0

• ESLint with standard config
• Prettier
• React 16 + PWA + Babel 7
• Tests
  • Any recommendation? mocha?, chai?, jest? Which one should I invest in?
• Implement a Virtual DOM from scratch just for the purpose of learning with the help of
  • React Codebase Overview
  • React Implementation Notes
  • How to write your own Virtual DOM
• Implement a flex box grid from scratch. I have found these guides to help me along
  • Using CSS Flexible Boxes
  • Better, Simpler Grid Systems
  • A Complete Guide to Flexbox
• Maybe? add sass suport with node-sass and sass-loader. I put Maybe? because I intent to use only vanilla JS and CSS in this project.

Very Helpful resources

• webpack
• The PRPL Pattern
• Webpack 3 + React — Production build tips
• nwb
• On Webpack and Source Map integration
• Conditional compilation and dead code elimination with webpack
• Web App Manifest Generator