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 + Webpack app.
- Generated App - Understanding apps bootstraped React + Webpack Starter.
$ npx create-react-webpack-project my-app
$ cd my-app
$ npm startthe generated project will vary in the presence of the following flags:
| Flag | What is it for? |
|---|---|
--verbose |
print additional logs. |
--info |
print environment debug info. |
--no-deps |
will no install dependencies on the generated project. |
--use-npm |
will use npm as command. |
--inplace |
apply setup to an existing project. |
-a <alias> |
will setup webpack alias. app by default. |
--typescript |
add TypeScript support. |
--redux |
add redux support and setup using redux thunk middleware by default. |
--redux --saga |
add redux support and setup using redux saga middleware. |
--recoil |
add recoil.js support and setup the state management library for React. |
--antd |
add ant-design setup with ant-design icons package. |
--bootstrap |
add bootstrap and bootstrap-react setup with theme config. |
--material-ui |
add material ui setup with SVG icons. |
--semantic-ui |
add semantic ui and semantic ui react setup with theme config. |
--docker |
generate dockerfiles for development and production environments. |
--android |
generates android setup using ionic react and capacitor. if --docker flag is active, then will generate all dockerfiles to perform android emulation, testing and apk generation. |
(npx comes with npm 5.2+ and higher, see instructions for older npm versions)
Then open http://localhost:8091/ to see your 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 fnm to easily switch Node versions between different projects.
To create a new app, you may choose one of the following methods:
$ npx create-react-webpack-project my-app(npx comes with npm 5.2+ and higher, see instructions for older npm versions)
$ npm init react-webpack-project my-appnpm init <initializer> is available in npm 6+
$ yarn create react-webpack-project my-appyarn 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.
After completing the previous steps, 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:
yarn <script> |
Description |
|---|---|
start |
Serves your app at localhost:8091 |
build:dev |
Builds the application to ./build (the build output dir could be configured in ./config/common-paths.js) |
build:dev:watch |
Builds the application and watch for changes |
build:dev:analyze |
Builds the application with Bundle Analyzer and Visualizer Plugins instaled |
build:dev:dashboard |
Builds the application with Dashboard |
serve:dev:dashboard |
Builds the application with Dashboard |
test |
Runs unit tests with Jest. See testing |
test:watch |
Runs test in watch mode to re-run tests when changed |
lint |
Lints the project for potential errors |
lint:fix |
Lints the project and fixes all correctable errors |
.
├── config # Webpack and Jest configuration
├── public # Static public assets (not imported anywhere in source code)
│ └── index.html # Main HTML page template for app
├── src # Application source code
│ ├── components # Global Reusable Components
│ ├── pages # Components associated with routes
│ ├── routes # Main route definitions and async split points
│ │ └── AppRoutes.jsx # Bootstrap main application routes
│ ├── styles # Application-wide styles
| ├── ...
| ├── i18n.js # i18n configuration
| ├── index.jsx # Application bootstrap and rendering with store
└── static # Static public assets imported anywhere in source code
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.
To add a unit test, create a .test.js file anywhere inside of ./test. Jest and webpack will automatically find these files.
Out of the box, this starter kit is deployable by serving the ./build 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