https://github.com/aloktakshak/create-react-webpack
Create-React-Webpack
https://github.com/aloktakshak/create-react-webpack
bootstrap-react create-react-webpack react react-application-using-webpack react-boilerplate react-with-webpack webpack webpack-boilerplate
Last synced: 3 months ago
JSON representation
Create-React-Webpack
- Host: GitHub
- URL: https://github.com/aloktakshak/create-react-webpack
- Owner: AlokTakshak
- Created: 2019-07-21T06:04:34.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-07-24T13:54:27.000Z (almost 5 years ago)
- Last Synced: 2025-03-03T17:14:27.433Z (3 months ago)
- Topics: bootstrap-react, create-react-webpack, react, react-application-using-webpack, react-boilerplate, react-with-webpack, webpack, webpack-boilerplate
- Language: JavaScript
- Homepage:
- Size: 229 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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.