create-react-webpack

Create React Application with all standard practices, with easy formats which is known to users, so that users can easily modify the various config files as needed.

Creating an App

npm

install module

npm i -g create-react-webpack

creating your react app

create-react-webpack demo-app

Once installed globally, above command i.e create-react-webpack for bootstraping new application will be available through out the system.

it will create a directory demo-app in the current folder, with below file footprint.

demo-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── .babelrc
├── .eslintrc.json
├── .eslintignore
├── .prettierrc
├── .prettierignore
├── docker
│   ├── dev.js
│   ├── docker-compose.yml
│   └── Dockerfile.dev
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
│   ├── App.css
│   ├── App.js
│   ├── App.spec.js
│   └── index.js
├── webpack.config.base.js
├── webpack.config.dev.js
└── webpack.config.prod.js

create-react-webpack demo-app -e

It includes the node server for deploying into production into your demo-app, with below file footprint.

demo-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── .babelrc
├── .eslintrc.json
├── .eslintignore
├── .prettierrc
├── .prettierignore
├── docker
│   ├── dev.js
│   ├── docker-compose.yml
│   └── Dockerfile.dev
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
├── server
│   └── index.js
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.spec.js
│   └── index.js
├── webpack.config.base.js
├── webpack.config.dev.js
└── webpack.config.prod.js

Available Scripts

After creating project directory you can run following scripts:-

npm run build

builds the application for production to the dist folder inside directory. Uses webpack prod config along with base config

npm start

Start the production server on default port 3000. Read files from dist folder. before running this first run npm run build.

npm run dev

Start the development server on default port 8080. Starts server in hot mode but doesn't preserve state of component if any while reloading.

npm run docker:dev

Start the development server inside the docker container. Maps machines port 8080 to docker container port 8080. Helpful in case you want to do development inside container keeping the environment same for everyone, removes the need for changing node version for different applications.

npm run dev:hot

Start the development server on default port 8080. Starts server in hot mode preserves state of component also if any while applying hot load patch.

npm test

Launches Test Runner in the intreactive manner.

npm run format

Enforces the formatting rules defined in .prettierrc. For inforcing your rules replace the file or content of prettierrc.

npm run lint

Enforces the linting rules defined in .eslintrc. For inforcing your rules replace the file or content of eslintrc. Here we are using prettier for formatting and eslint for enforcing rules related to best coding practices.