Click to expand project structure
├── dist
| ├── css
| | ├── main.[contenthash:8].css
| | └── main.[contenthash:8].css.map
| ├── js
| | ├── main.[hash].js
| | └── main.[hash].js.map
| ├── media
| | └── [hash].[ext]
| └── favicon.ico
| └── index.html
|
├── config
| ├── devServer.js
| ├── envs.js
| ├── optimization.js
| ├── output.js
| ├── paths.js
| ├── plugins.js
| └── rules.js
|
├── public
| ├── favicon.ico
| └── index.html
|
├── src
| ├── actions
| ├── components
| ├── constants
| ├── containers
| ├── images
| ├── pages
| ├── reducers
| ├── root
| ├── routes
| ├── styles
| ├── utils
| └── index.js
|
├── server.js
└── webpack.config.js
1 - Clone the boilerplate repository.
git clone git@github.com:mattcarlotta/react-starter-kit.git
2 - Run yarn or npm install to install dependencies.
3 - Run yarn dev or npm run dev to start a development server.
yarn <command> |
Description |
|---|---|
analyze |
Compiles application to a dist folder and analyzes chunk distribution. |
build |
Compiles application to a dist folder. |
dev |
Starts a development server at localhost:3000. |
format |
Prettify all .js files. |
lint:js |
Lint all .js files. |
lint:styles |
Lint all .scss files. |
start |
Starts a production server at localhost:8080 (must run build first). |
test |
Runs all .test.js files once. |
test:cov |
Runs a coverage report for .test.js files in src. |
test:watch |
Runs and watches all .test.js files. |
Click to expand configuration
- config/devServer.js: webpack devServer options.
- config/envs.js: webpack environment variables.
- config/optimization.js: webpack optimization options.
- config/output.j:` webpack output options.
- config/paths.js` webpack config folder paths.
- config/plugins.js: webpack plugins options.
- config/rules.js: webpack rules functions.
- src/styles/assets: media assets imports.
- src/styles/extensions: partial shared extensions.
- src/styles/globals: global asset imports (see notes in global.scss for important information).
- src/styles/variables: partial shared variables.
- src/styles/styles.scss: indexed partial files for easier sharing (see notes in styles.scss for important information).
- src/utils/setupTests/index.js: enzyme test setup for your React components (see notes in setup.js for important information).
- .babelrc: babel config for react js files.
- .browserslistrc: browsers list config.
- .eslintignore: eslint config for ignoring scss files.
- .eslintrc: eslint config for linting js files.
- .prettierc: prettier config.
- .stylelintrc.json: stylelint config for linting scss files.
- jest.json: jest config.
- server.js: an express configuration to serve production assets.
- webpack.config.js: a single webpack environment based config.
By default, any directories within src are aliased (~). This means that you can refer to root files or directories by using the ~ symbol followed by a child file or directory name. For example, ~reducers, refers to the root reducers/index.js file, while ~reducers/Messages refers to the child reducers/Messages/index.js file. This allows for rapid development when referring to root-level directories within src as it eliminates the hassle of specifiying relative paths (like ../../../../../../../reducers) to the directory!
To see the latest package versions, please check out the package.json. If you run into any issues, please fill out an issue report here.
Click to expand brief overview of packages
- Axios
- Babel
- CSS Loader
- Connected React Router
- Eslint
- Enzyme
- Error Overlay Webpack Plugin
- Express
- Friendly Errors Webpack Plugin
- History
- Husky
- Jest
- Lodash
- Mini CSS Extract Plugin
- Morgan
- Prettier
- PropTypes
- React
- React Router Dom
- Redux
- Redux DevTools Extension
- Redux Thunk
- Sass Loader
- Stylelint
- Stylelint-SCSS
- Stylelint-Config-Recommended
- Stylized Components
- Style Loader
- Webpack
- Webpackbar
- Webpack Dev Server (Hot Loaded)