create-react-redux-webpack-project v1.1.0

React Redux + Webpack Starter

This starter kit is designed to get you up and running with a bunch of awesome front-end technologies.

The primary goal of this project is to provide a stable foundation upon which to build modern web appliications. Its purpose is not to dictate your project structure or to demonstrate a complete real-world application, but to provide a set of tools intended to make front-end development robust and easy.

• Creating an app - Create a React Redux + Webpack app.
• Generated App - Understanding apps bootstraped React Redux + Webpack Starter.

Quickstart

$ npx create-react-redux-webpack-project my-app
$ cd my-app
$ npm start

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

Then open http://localhost:8091/ to see your app.

Creating an app

You’ll need to have Node 8.10.0 or later on your local development machine (but it’s not required on the server). You can use nvm (macOS/Linux) or nvm-windows to easily switch Node versions between different projects.

To create a new app, you may choose one of the following methods:

npx

$ npx create-react-redux-webpack-project my-app

(npx comes with npm 5.2+ and higher, see instructions for older npm versions)

npm

$ npm init react-redux-webpack-project my-app

npm init <initializer> is available in npm 6+

yarn

$ yarn create react-redux-webpack-project my-app

yarn create is available in Yarn 0.25+

It will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies. See Project Structure.

Generated App

Understanding apps bootstrapped with React Redux + Webpack Starter.

The template consists of:

• a typical project layout structure
• a Babel setup and configuration
• a Webpack setup and configuration
• an ESLint setup and configuration
• a LESS and Semantic UI setup and configuration
• a sample React component to display list codes
• a Redux setup to handle state
• a React Router setup to show basic navigation

Additionaly, the template provides a development and production webpack configuration.

Developed With

• Node.js - Javascript runtime
• React - A javascript library for building user interfaces
• React Router - Declarative routing for React
• Redux - Redux is a predictable state container for JavaScript apps.
• Redux-Promise-Middleware - Redux middleware for promises, async functions and conditional optimistic updates
• Redux-Thunk - Thunk middleware for Redux
• Babel - A transpiler for javascript
• Webpack - A module bundler
• LESS - A css metalanguage

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Requirements

The following software is required to be installed on your system:

• Node v10.x
• Yarn v1.7.0 or later

Type the following commands in the terminal to verify your node and yarn versions

$ node -v
$ yarn -v

Install

After confirming that your environment meets the above requirements, you can create a new project based on react-redux-webpack-starter by doing the following:

Clone the repository from GitHub

$ git clone https://github.com/ulises-jeremias/react-redux-webpack-starter.git <my-project-name>

OR USING SSH

$ git clone git@github.com:ulises-jeremias/react-redux-webpack-starter.git <my-project-name>

Install node modules

When that's done, install the project dependencies. It is recommended that you use Yarn for deterministic dependency management, but npm install will suffice.

$ cd <my-project-name>
$ yarn

Running the Project

After completing the installation step, you're ready to start the project!

$ yarn start  # Start the development server (or `npm start`)

While developing, you will probably rely mostly on yarn start; however, there are additional scripts at your disposal:

Project Structure

.
├── config                   # Webpack configuration
├── public                   # Static public assets (not imported anywhere in source code)
│   └── index.html           # Main HTML page container for app
├── src                      # Application source code
|   ├── actions              # Redux actions
│   ├── components           # Global Reusable Components
│   ├── containers           # Global Reusable Container Components and application Layout in which to render routes
|   ├── reducers             # Reducer registry and injection
│   ├── routes               # Main route definitions and async split points
│   │   └── app.js           # Bootstrap main application routes
|   ├── state                # Store initial state
│   ├── store.js             # Redux-specific pieces
│   ├── styles               # Application-wide styles
|   |   ├── custom           # Custom application styles
|   |   └── semantic-ui      # Semantic-UI theme files
|   ├── i18n.js              # i18n configuration
|   ├── index.js             # Application bootstrap and rendering with store
|   └── store.js             # Create and instrument redux store
├── static                   # Static public assets imported anywhere in source code
└── test                     # Unit tests

Live Development

Hot Reloading

Hot reloading is enabled by default when the application is running in development mode (yarn start). This feature is implemented with webpack's Hot Module Replacement capabilities, where code updates can be injected to the application while it's running, no full reload required. Here's how it works:

For JavaScript modules, a code change will trigger the application to re-render from the top of the tree. Global state is preserved (i.e. redux), but any local component state is reset. This differs from React Hot Loader, but we've found that performing a full re-render helps avoid subtle bugs caused by RHL patching.

Testing

To add a unit test, create a .test.js file anywhere inside of ./test. Jest and webpack will automatically find these files.

Deployment

Out of the box, this starter kit is deployable by serving the ./dist folder generated by yarn build:prod. This project does not concern itself with the details of server-side rendering or API structure, since that demands a more opinionated structure that makes it difficult to extend the starter kit. The simplest deployment strategy is a static deployment.

the build output dir could be configured in ./config/common-paths.js