DEMO: You can find it here
Production-ready, performance-first, optimized, robust, fully-featured boilerplate/example for your new Progressive Web App.
Lighthouse result - you can find it here
SPOILER: 97/100. It might be better/worse in your browser.
When app is cached with Service Workers:
- React and Redux
- React-Router v4(!) + React-Router-Redux v5(!)
- JSON-server - mock db.
- Redux-thunk and Redux-Devtools-Extension
- Fetch polyfill
- Semantic-ui-react - UI components.
- Store2 - LocalStorage access.
- Webpack 2:
- babel (stage-0),
- HMR, devServer, hotMiddleware,
- better code optimization with Babel React Optimize,
- Remove unused css with purifycss-webpack
- Jest and Enzyme - awesome libraries for testing.
- why-did-you-update and React-Addons-Perf for better performance optimization.
- Lodash - is a dependency of Semantic-ui-react, but with tree-shaking you import in bundle only code that you use.
- Offline-plugin, webpack-manifest-plugin and preload-webpack-plugin for your next progressive app.
- And more tools for building and testing...
git clone https://github.com/Metnew/react-semantic.ui-starter.git
cd react-semantic.ui-starter && rm -rf .git
npm install
npm run dev # run app in dev mode
npm run db # run mock db for app(from another process)
npm run build # build app
npm run build:demo # build with process.env.BUILD_DEMO = true
It generates dist
folder.
npm run test # run tests with Jest
You can store static assets (images, videos) in /static
folder.
You can find it in webpack_config/config.js
It's under active development inside /server
folder.
Performance-first.
Main purpose - build highly customizable skeleton for PWA, with SSR, following best practices.
No, (currently no, but maybe... π).
"You have a components folder and containers folder..and in the container you have another components folder?"
Components inside containers/**/components
are components that are required by container.
For example, Dashboard
(container) has DashboardComponent
(component). You can think about DashboardComponent
as "Isolated component", it isn't used in app anywhere except own parent-container.
Components in components are components that:
- Don't have own logic and connection with state (as opposite to containers)
- Aren't "isolated".(!)
As your app's components will increase in size, it can be refactored to similar structure that implemented in - semantic-ui-react.
There are tests for actions and for reducers.
Each reducer/action has own folder, where you can find:
- Reducer/action itself.
- Tests for it.
You can find action testing example here.
It uses redux-mock-store.
Migration from React-Router v3 to v4 may cause some problems.
There is no onEnter
props in Route
component.
But we still can solve it:
- Create global routing object.
- Create RouteAuth component that protects child component from unauthorized users.
- Pass function that checks is user allowed to visit route as prop in every
RouteAuth
component. - When RouteAuth renders it calls that function.
- As
authCheck
function can call redux store, we can access redux's state beforeRoute
is rendered. - Profit!!!!!
- We have access to redux state in function that allows
Route
to be rendered. - Also, there is a handler for auth logic in App container.
Yes, because of tabs.
You can remove rules
property from .eslinrc.json
and it will follow. Also eslint --fix
is active, you can change it in /webpack_config/webpack.base.js
Unstable branch with latest features.
Have a question? Ask it. π
PRs, and issues are welcome π
Vladimir Metnew vladimirmetnew@gmail.com
MIT