Example of the universal project on react, redux, koa, etc.
Table of Contents
- React (
- Redux (
- react-redux (
- redux-saga middleware
- react-redux (
- react-router (
- CSS modules!
- postcss-loader for style autoprefixing
- Pre-configured folder aliases and globals
- Separate vendor-only bundle for common dependencies
- CSS extraction during production builds
- Babel (
react-transform-hmrfor hot reloading
redbox-reactfor more visible error reporting
- Uses Airbnb's ESLint config (with some softened rules)
Just clone the repo and install the necessary node modules:
$ git clone https://github.com/bystrobank/react-redux-universal.git $ cd react-redux-universal $ npm install # Install Node modules listed in ./package.json (may take a while the first time) $ npm start # Compile and launch
Before delving into the descriptions for each available npm script, here's a brief summary of the three which will most likely be your bread and butter:
- Doing live development with HMR (hot module reload)?
npm run watch) to spin up the koa and webpack-dev-server (HMR) with redux-devtools.
npm run watch:loggerto spin up the koa and webpack-dev-server (HMR) with redux-logger.
- Doing live development without HMR? Use
npm run devto spin up the only koa server in watch mode.
- Compiling the application to disk? Use
npm run compile.
Great, now that introductions have been made here's everything in full detail:
npm run watch) - Spins up koa server to serve your app at
localhost:4000and webpack-dev-server (HMR) at
npm run compile- Compiles the application to disk (
npm run watch:logger- Same as
npm start, but uses redux-logger instead redux-devtools.
npm run dev- Spins up the only koa server to serve your app at
npm run lint- Runs ESLint, StyleLint, Flow check your JS and CSS source code.
npm run lint:js- Run ESLint check your JS source code.
npm run lint:js:fix- Run ESLint with option for automatically fix problems in your JS source code.
npm run lint:css- Run StyleLint check your CSS code.
npm run flow- Run Flow for static type checks your JS source code.
NOTE: Koa host and port defined by env variables
webpack-dev-server is launched on the same host as koa.
Project path defined by env variable 'PROJECT_PATH' and empty by default (http://localhost:4000/PROJECT_PATH/root_route/...).
The folder structure provided is only meant to serve as a guide, it is by no means prescriptive. It is something that has worked very well for me and my team, but use only what makes sense to you.
. ├── bin # Build/Start scripts ├── build # All build-related configuration │ └── webpack # Environment-specific configuration files for webpack ├── config # Project configuration settings ├── dist # Compiled application (src) for server side rendering ├── public # Assets and compiled application (src) for client side rendering ├── server # Koa application | ├── helpers # Helpers for API | ├── middleware # Koa middleware | | ├── api # Available to application of API | | ├── renderRoute # Routes rendering | | └── ... # Other middlewares │ ├── app.js # Server side entry point in application │ └── index.js # Server application entry point ├── src # Application source code │ ├── components # Common React components │ ├── config # Application configuration settings │ ├── containers # Layouts, routes root smart components with child dumb components, reducers, actions, sagas, styles etc and other HOC with reducers, actions, sagas, styles etc combined on features │ ├── helpers # Helpers of application │ ├── redux # Common reducers │ ├── routes # Application route definitions │ ├── index.js # Client side entry point in application │ └── index.html # HTML template of application ├── .babelrc # Global babel settings ├── .editorconfig # Editor config ├── .eslintignore # The ignored objects for eslint ├── .eslintrc # Global eslint settings ├── .gitignore # The ignored objects for git ├── LICENSE.md # License ├── README.md # This text ├── package.json # NPM settings ├── webpack.config-server.js # Settings for webpack of bundle of application for server side └── webpack.config.js # Settings for webpack of bundle of application for client side
Using Redux DevTools
Redux Devtools are enabled by default in
npm run watch) mode.
- CTRL+H Toggle DevTools Dock
- CTRL+Q Move DevTools Dock Position
- see redux-devtools-dock-monitor for more detailed information.
If you have the Redux DevTools chrome extension installed it will automatically be used on the client-side instead.
If you want to disable the dev tools use
npm run watch:logger or
npm run dev mode.
DevTools are not enabled during production.