Quantum blox - modular UI boilerplate in react
What is it
This is boilerplate for fully modular web UIs based on ReactJS and Redux + PostCSS with CSS Modules.
Builds are done by Webpack, which is connecting everything together, giving the technology that allows us to achieve full modularity and separation without any overhead.
Getting started with development
To start, clone the repo and
npm i
npm start
Your app will be available on http://localhost:3000 in Hot Module Replacement mode.
Technologies
Additional tools
- React Router - client side routing
- Redux-saga - CQRS sagas in Redux Middleware
- Jest - Testing
- LostGrid - PostCSS grid system
- Axios - http
- Webpack build analyzer - analyzing build size
- NPM check updates - checking for updates
Dev build, watch and serve
To build dev code (unminified + sourcemaps)
npm run build: dev
To watch for changes and rebuild
npm run build:watch
Hot module replacement
To start server in HMR mode, making it available at http://localhost:3000
npm start
Production build
npm run build:Production
Running tests
Single run
npm test
Watch
Watch for changes and reload tests (provides Jest-cli commands)
npm test:watch
Test + generate coverage report
Test code, genenerate html and JSON coverage and also output it in terminal
npm test:coverage
#Build size analysis Guves you html page with zoomable tree view of how your depencencies influence your build size dependencies.
npm run build:analyze
Serving built data
To serve your App in web server mode making it available at http://localhost:3000
npm run serve-static
GH pages deployment
Work in progress
Check for updates
Provides you with a list of updates so you can choose if you want ot keep some of your dependencies up to date.
npm run check-updates