victorpopkov / universal-redux

Universal React and Redux web app boilerplate bundled with webpack.

universal-redux

Universal React and Redux web app boilerplate bundled with webpack. As a CSS framework, Bootstrap 5 is used with all components provided by Reactstrap.

• Features
• Running
  • Development
  • Production
• Configurations
  • Environment variables
• Directory structure

Features

• Based on the Ducks pattern
• Fully isomorphic (universal-webpack)
• Fully pre-configured Bootstrap 5 with Reactstrap
• Hot Module Replacement (HMR)
• Inline SVGs as React components (babel-plugin-inline-react-svg)
• React Router v4 (react-router)
• Redux actions use axios for requests with requests cancellation support
• Redux related stuff is built with Immutable.js in mind
• Serve API directly or using proxy

Running

Development

To start coding you just need to:

1. Clone the repository: https://github.com/victorpopkov/universal-redux.git
2. Install packages: yarn install
3. Export .env.dev environment variables
4. Launch: yarn dev
5. Visit in your browser (default: http://localhost:3000)

Production

In order to launch the production version you will need to build the project first before actually starting it:

1. Clone the repository: https://github.com/victorpopkov/universal-redux.git
2. Install packages: yarn install
3. Export .env.prod environment variables
4. Build: yarn build
5. Launch: yarn start
6. Visit in your browser (default: http://localhost:8080)

Configurations

All app-specific configurations can be found in the /config root directory, and most are just the environment variables.

Environment variables

Environment variable	Default	Description
APP_API_PORT	3030
APP_API_PROXY_DISABLED	0	Enable or disable API proxy. When the value is set to 1 all other APP_API_PROXY_* variables can be safely removed as the app will talk to the API directly.
APP_API_PROXY_PATH	/api	Only when APP_API_PROXY_DISABLED is enabled.
APP_API_PROXY_TARGET	http://localhost:3030	API proxy target (without a trailing slash) used by the http-proxy. By default, it points to the current project API. Only when APP_API_PROXY_DISABLED is enabled.
APP_API_TARGET	http://localhost:3030	API target (without a trailing slash). Only when APP_API_PROXY_DISABLED is enabled.
APP_BASE_PATH		App base path (without a trailing slash).
APP_DEV_SERVER_PORT	3001	webpack-dev-server port. Only in development mode.
APP_HOST	0.0.0.0
APP_MORGAN_FORMAT	combined	Morgan HTTP request logger middleware format.
APP_PORT	3000
APP_PUBLIC_PATH	/	App public path (with a trailing slash) to serve static assets and scripts.

Directory structure

.
├── api/
├── bin/
│   ├── api.js
│   └── server.js
├── build/
├── config/
├── src/
│   ├── app/ # app source
│   ├── assets/ # global assets
│   │   ├── images/
│   │   └── scss/
│   ├── helpers/
│   │   ├── ApiClient.js # helper to use `axios` library
│   │   └── Html.jsx     # helper for HTML Server-Side Rendering (SSR)
│   ├── middlewares
│   │   └── client.js # our tiny client middleware
│   ├── store
│   │   ├── configureStore.js
│   │   └── dev-tools.js
│   ├── client.jsx
│   ├── reducers.js
│   ├── routes.js
│   └── server.jsx
├── webpack/ # webpack configs
│   └── webpack-dev-server.js           # development server with HMR configs
│   ├── dev.base.config.js              # base (development)
│   ├── dev.client.config.js            # universal-webpack client (development)
│   ├── dev.server.config.js            # universal-webpack server (development)
│   ├── paths.js
│   ├── prod.base.config.js             # base (production)
│   ├── prod.client.config.js           # universal-webpack client (production)
│   ├── prod.server.config.js           # universal-webpack server (production)
│   ├── universal-webpack-settings.json
└── webpack.base.config.js

License

Released under the MIT License.