opchav / React Pwa Webpack Starter
Programming Languages
Projects that are alternatives of or similar to React Pwa Webpack Starter
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 yourdevDependencies
you also have to addfile-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
- [X] ESLint with standard config
- [X] Prettier
- [X] 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
- Implement a flex box grid from scratch. I have found these guides to help me along
- Maybe? add sass suport with
node-sass
andsass-loader
. I put Maybe? because I intent to use only vanilla JS and CSS in this project.