Skip to content

victorpopkov/universal-redux

Repository files navigation

universal-redux

CI CD Code Climate Libraries.io

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

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
│   │   └── dev-tools.js
│   │   ├── index.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.