react-semantic.ui-starter

Production-ready, performance-first, template built with React/Redux/React-Semantic-UI/ [READY]

1 year after

React-Semantic.UI-Starter

Out-of-box:

DEMO: You can find it here

Build Status codecov bitHound Dependencies bitHound Dev Dependencies bitHound Code bitHound Overall Score JavaScript Style Guide

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:

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 :wink:, 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:

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

Where are tests?

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.

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

PRs, and issues are welcome :smiling_imp:

Author

Vladimir Metnew [email protected]

LICENSE

MIT

Related Repositories

Semantic-UI-React

Semantic-UI-React

The official Semantic-UI-React integration ...

reatty

reatty

Simple, but robust starter/example built on React/Redux/React-Semantic-UI [READY ...

awesome-react

awesome-react

A collection of awesome React libraries, resources and shiny things. ...

awesome-react

awesome-react

A collection of awesome React libraries, resources and shiny things. ...

awesome-react

awesome-react

A collection of awesome React libraries, resources and shiny things. ...