Production-ready, performance-first, optimized, robust, fully-featured boilerplate/example with Server-side rendering and lazy-loading for your new Progressive Web App.

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

• React and Redux
• SASS, PostCSS, and styled-components support.
• React-Router v4 + React-Router-Redux v5
• JSON-server - mock db.
• rapscallion - async server-side rendering.
• ESDoc - docs generator.
• Redux-thunk, Redux-Devtools-Extension
• Fetch polyfill and normalizr(api response normalization)
• Semantic-ui-react - UI components.
• Store2 and js-cookie - LocalStorage and cookies.
• Webpack 3:
  • Babel (stage-0),
  • HMR, devServer, hotMiddleware,
  • i18n support with i18n-webpack-plugin
  • 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.
• Offline-plugin, favicons-webpack-plugin, webpack-manifest-plugin and preload-webpack-plugin, webpack-bundle-analyzer, compression-webpack-plugin, webpack-common-shake for your new awesome app.
• And more tools for building and testing...

git clone --depth=1 https://github.com/Metnew/react-semantic.ui-starter.git
cd react-semantic.ui-starter && rm -rf .git
npm install

BASE_API - App uses this path for requests with relative urls. By default http://localhost:4000/api/v1 - json-server. BASE_API is required for npm run ssr, npm run dev, npm run build

###############################################################
npm run dev # run app in dev mode, BASE_API env var is required!
###############################################################
npm run db  # run mock db for app(from another process)
###############################################################
npm run ssr # run server-side rendering (IT NEEDS already built app) and BASE_API env var is required!
###############################################################

###############################################################
npm run build # build app, accept next env vars:
# APP_LANGUAGE=ru npm run build - build only selected language, if isn't set, then build app with all i18n languages!
# ANALYZE_BUNDLE npm run build - add `webpack-bundle-analyzer` to plugins
npm run build:demo # build with process.env.BUILD_DEMO = true
###############################################################

These commands generate the dist folder.

npm run test # run tests with Jest, BASE_API env var is required!

npm run lint:styles  # lint styles with Stylelint
npm run lint:scripts # lint scripts with ESlint

npm run docs # generate docs and `serve`

• Project must be isomorphic (design in progress). Code must somehow works with React-Native too. I'll be very happy, if you can help me with this task 😉, or just recommend something.
• Bundle server-side code with Webpack (testing implementation, in master branch soon)
• SSR with HMR(testing implementation, in master branch soon)
• Improved docs || how-it-works guide || article (in progress) - project lacks some info about implementation and design.

You can store static assets (images, videos) in /static folder.

You can find it in webpack_config/config.js

Yes! Check /src/server/server.js. App uses rapscallion for async rendering on server.

Check src/common/routing/index.js. TL;DR: dynamic import().

Yes, with styled-components's <ThemeProvider> you can specify your own theme. By default, app uses theme from www.materialpallette.com.

App is designed for big projects. Personally, I use almost similar boilerplate in production. 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".(!)

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.

Like this.

Have a question? Ask it. 😉

PRs, and issues are welcome 😈

Vladimir Metnew [email protected]

MIT