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.
npm i -g create-react-webpack
create-react-webpack demo-app
Once installed globally, above command i.ecreate-react-webpack for bootstraping new application will be available through out the system.
it will create a directorydemo-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
Itincludes thenode server for deployinginto production into yourdemo-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
After creating project directory you can run following scripts:-
builds the application for production to thedist folder inside directory.
Uses webpackprodconfig along withbaseconfig
Start the production server on default port3000.
Read files fromdist folder.
before running this first runnpm run build.
Start the development server on default port8080.
Starts server in hot mode but doesn't preserve state of component if any while reloading.
Start the development server inside the docker container.
Maps machines port8080 todocker container port8080.
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.
Start the development server on default port8080.
Starts server in hot mode preserves state of component also if any while applying hot load patch.
Launches Test Runner in the intreactive manner.
Enforces the formatting rules defined in.prettierrc.
For inforcing your rulesreplace thefile orcontent ofprettierrc.
Enforces the linting rules defined in.eslintrc.
For inforcing your rulesreplace thefile orcontent ofeslintrc.
Here we are usingprettier for formatting andeslint for enforcing rules related to best coding practices.