Production-ready, performance-first, optimized, robust, fully-featured boilerplate/example for your new Progressive Web App.

SPOILER: 97/100. It might be better/worse in your browser.

When the 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,
  • Optimize code with Babel React Optimize,
  • Process CSS with PostCSS, purifycss-webpack and other loaders/plugins
  • Check your code with Eslint and Stylelint (that you can uncomment inside postcss.config.js)
• 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. With tree-shaking unused code never makes it into the final bundle.
• 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

These commands generate the dist folder.

npm run test # run tests with Jest

• Implement SSR with code-splitting. See React Router docs. This docs say that it's a very hard task. So, maybe let's try to accomplish it? 😈

• Project must be isomorphic. Code must works with React-Native too. I'll be very happy, if you help me with this task 😉, or just recommend something.

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 /src/server folder.

Performance-first. Main purpose - build highly customizable isomorphic(!) skeleton for PWA, with SSR, code-splitting, following best practices.

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:

1. Don't have own logic and connection with state (as opposite to containers)
2. Aren't "isolated".(!)

As your app's components folder increases in size, it could 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:

1. Reducer/action itself.
2. 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 can fix this:

1. Create global routing object.
2. Create RouteAuth component that protects child component from unauthorized users.
3. Pass a function that checks is user allowed to visit route as prop in every RouteAuth component.
4. When RouteAuth renders it calls that function.
5. As authCheck function can call redux store, we can access redux's state before Route is rendered.
6. Profit!!!!!
7. We have access to redux state in the function that allows Route to be rendered.
8. Also, there is a handler for auth logic in App container.

Like this.

Have a question? Ask it. 😉

PRs, and issues are welcome 😈

Vladimir Metnew vladimirmetnew@gmail.com

MIT