This application provides an universal rendering (the ability to render on server-side too, improve the SEO and the UX in first render). The idea is to keep the stack simple and easy to maintain. The following technologies are used :
- React
- React-router + React-router-config
- Redux
- Styled-components
- Webpack
- Webpack-serve + React-hot-loader : Client side development
- Express : For the server side rendering
- Axios : Inside a custom http middleware
- ESLint
The main idea is you gonna use a classic client-side only for the development phase using webpack-sere combine to react-hot-loader to update components without complete reloading (especially keeping the state).
For a production mode, just build the client and the server. Then the server powered by express will provide a server side rendering and assets access. If there is no JS (some SEO engine for example), everything is fine, express will handle every routes access. Otherwise the bundle will be fetch, and React will take over the control.
git clone [email protected]:Exayy/react-redux-universal-starter.git
cd react-redux-universal-starter
npm install
npm run dev
npm run build:client & npm run build:server
npm run prod