Webpack3 boilerplate for building SPA / PWA / offline front-end apps with ⚛️ Preact
Using preact-redux-react-router-starter
will kickstart your next application! 💯 It is designed to fit the "90% use-case" for those who want to build offline-first web apps (see features below).
🚩 Important: This is meant for client-side apps only; there is no support included for universal / server-side rendering.
Please note: Boilerplate does not incorporate the latest "css-in-js" or "css modules" technique. Instead, the more traditional approach is taken, wherein styles
and scripts
are kept separate. That said, you may certainly and easily take that route if desired. ✅
git clone https://github.com/ganapativs/preact-redux-react-router-starter
cd preact-redux-react-router-starter
npm install
npm run build
npm start
❗ Pro Tip: Use Yarn to install dependencies 3x faster than NPM!
- Offline Caching (via
serviceWorker
) - Stylus & Autoprefixer
- Asset Versioning (aka "cache-busting")
- babel-env (Automatically use required babel plugins to support ES6 & ES7 on latest browsers), babel-stage-0 (Latest features) & babel-sitrep support
- Hot Module Replacement (HMR) for all files
- Preact's Developer Tools
- Redux Developer Tools
Any of the following commands can (and should 😉) be run from the command line.
If using Yarn, all instances of
npm
can be replaced withyarn
. 👌
$ npm run build
Compiles all files. Output is sent to the dist
directory.
$ npm start
Runs your application (from the dist
directory) in the browser.
$ npm run watch
Like start
, but will auto-compile & auto-reload the server after any file changes within the src
directory.
You can inspect and modify the state of your Preact UI components at runtime using the React Developer Tools browser extension.
- Install the React Developer Tools extension
- Import the
preact/devtools
module in your app - Reload and go to the 'React' tab in the browser's development tools
You can inspect redux actions and store changes at runtime using the Redux Developer Tools browser extension.
- Install the Redux Developer Tools extension
- Configure redux store to use extension(If available)
- Reload and go to the 'Redux' tab in the browser's development tools
This boilerplate is based on Preact Starter by Luke Edwards.
MIT © Ganapati V S