React-Semantic.UI-Starter

Out-of-box:

DEMO: You can find it here

What is it?

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

Lighthouse result - you can find it here

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

Includes:

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...

Usage

Install:

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

ENV vars:

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

Run:

###############################################################
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!
###############################################################

Build:

###############################################################
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.

Test:

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

Lint:

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

Docs:

npm run docs # generate docs and `serve`

Nearest future:

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.

FAQ

Where are static assets?

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

Where is manifest.json?

You can find it in webpack_config/config.js

Is SSR available?

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

How lazy-loading implemented:

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

Is theming available?

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

How it differs from other starters?

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.

"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".(!)

Where are tests?

There are tests for actions and for reducers. Each reducer/action has own folder, where you can find:

Reducer/action itself.
Tests for it.

How to write tests?

You can find action testing example here. It uses redux-mock-store.

How does the built app look?

Like this.

Also:

Have a question? Ask it. 😉

PRs, and issues are welcome 😈

Author

Vladimir Metnew vladimirmetnew@gmail.com

LICENSE

MIT

luigiinred/react-semantic.ui-starter