hashemkhalifa / webpack-react-boilerplate

Minimal React 16 and Webpack 4 boilerplate with babel 7, using the new webpack-dev-server, react-hot-loader, CSS-Modules

Minimal React and Webpack 4 boilerplate with babel

Minimal webpack and react boilerplate using latest version of react and babel as well as jest and enzyme for more details about technologies used. click with real time server changes ;)

check out Medium article for more details

Table of contents

Project structure

Installation

Configuration

Technologies used

Project structure

build/
src/
|- index.jsx _______________________________ # Application entry
|- App.jsx _________________________________ # Application init
|  |- Components/
|    |- hello-world/
|       |- index.jsx _______________________ # Sample component

webpack
|- paths.js ________________________________ # webpack paths needed
|- webpack.common.js _______________________ # common webpack config
|- webpack.dev.js __________________________ # development config
|- webpack.prod.js _________________________ # production config

Installation

1- Clone the boilerplate repo

git clone [email protected]:HashemKhalifa/webpack-react-boilerplate.git

2- yarn or npm install to install npm packages

3- start dev server using yarn start or npm start.

3- build and bundling your resources for production yarn build.

4- Unit testing will watch all your changes in the test files as well as create coverage folder for you. yarn test

Configuration

• Webpack Config paths based on your file structure you can go to webpack/paths.js and modify the source and file names based on your need.
• webpack/webpack.common.js config common webpack for both dev and production environments.
• webpack/webpack.dev.js config webpack for dev environment.
• webpack/webpack.prod.js config webpack for production environment.
• /webpack.config.js main webpack config that merge common and webpack environment based config.
• Enzyme config /setupTest.js here you will have all setup for enzyme to test your component.
• Prettier config /.prettierc.
• Browsers list config /.browserslistrc.

Technologies used

• Webpack 4
• Babel 7 [ transforming JSX and ES6,ES7,ES8 ]
• React 16.8
• Lodash
• Jest [ Unit test]
• Enzyme for UI testing.
• Eslint with airbnb config
• Prettier [ Code formatter ]
• Style & CSS Loader & SASS-loader
• CSS modules [ Isolated style based on each component ]
• Browsers list [ Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env ] React Fast Refresh[For react hot module replacement]
• Webpack dev serve

webpack-react-boilerplate's Issues

How to add favicon icon to this config?

eslint error

Hey brother. Great work you've done here so far! I've been searching for a well-designed starter to base my own boilerplate on and yours was the closest I found to what I needed.

One thing I ran into while playing with it was an eslint error.

> lint-staged

 ❯ Running tasks for *.{js,jsx,css,md}
   ✔ prettier --write --single-quote
   ✖ eslint --fix
     git add
✖ "eslint --fix" found some errors. Please fix them and try committing again.
  
/Users/unicorngod/Desktop/lab/webpack-react-boilerplate/webpack.config.js
10:19  error  Calls to require() should use string literals  import/no-dynamic-require

✖ 1 problem (1 error, 0 warnings)

The error is caused by a dynamic import in webpack.config.js

To fix it I simply added the following eslint flag before the dynamic import:

/* eslint-disable global-require,import/no-dynamic-require */

so the webpack.config.js file would look like this:

const common = require("./webpack/webpack.common.js");
const webpackMerge = require("webpack-merge");

const envs = {
  development: "dev",
  production: "prod",
};

const env = envs[process.env.NODE_ENV || "development"];

/* eslint-disable global-require,import/no-dynamic-require */
const envConfig = require(`./webpack/webpack.${env}.js`);
module.exports = webpackMerge(common, envConfig);

Cheers!

Error: Cannot find module 'eslint/lib/formatters/stylish'

I'v just cloned the repo, runned npm install than npm start and I'v got:

[./node_modules/webpack/hot/log.js] (webpack)/hot/log.js 1.34 KiB {main} [built]
[./src/index.jsx] 457 bytes {main} [built] [failed] [1 error]
    + 20 hidden modules

ERROR in ./src/index.jsx
Module build failed (from ./node_modules/eslint-loader/index.js):
Error: Cannot find module 'eslint/lib/formatters/stylish'
    at Function.Module._resolveFilename (module.js:548:15)
    at Function.Module._load (module.js:475:25)
    at Module.require (module.js:597:17)
    at require (internal/module.js:11:18)
    at Object.module.exports (/Users/artur/Work/webpack-react-boilerplate/node_modules/eslint-loader/index.js:199:26)
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html

Also during install I'v got the warnings:

npm WARN [email protected] requires a peer of eslint@^4.19.1 || ^5.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@^4.19.1 || ^5.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@>=1.6.0 <6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of eslint@>=4 <6.0.0 but none is installed. You must install peer dependencies yourself.

npm test runs with no issues

Having a terrible time deploying to heroku

Hi sorry, a new-ish beginner here. I've used this boilerplate to create a react app, now having a tough time getting it onto heroku.

Has anyone else tried to get this onto heroku?

Thanks so much in advance.

How to clean and build project?

Hi.

Excellent boilerplate, I'm very grateful!

I'd like to know why it's printing so many errors/warnings that do no harm.

I'm having problems with building the project, and clean it.

If I ran yarn build, this pops out:

It's like every single line of code I wrote, it's wrong.
And with npm start this is how it goes:

I really do not understand how to clean & run it.
I'm pretty sure my code it's fine.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Replace dependency babel-eslint with @babel/eslint-parser 7.11.0
• Update dependency @pmmmwh/react-refresh-webpack-plugin to v0.5.11
• Update dependency babel-plugin-import to v1.13.8
• Update dependency enzyme-adapter-react-16 to v1.15.8
• Update babel monorepo (@babel/core, @babel/plugin-proposal-class-properties, @babel/plugin-proposal-decorators, @babel/plugin-proposal-export-namespace-from, @babel/plugin-proposal-function-sent, @babel/plugin-proposal-json-strings, @babel/plugin-proposal-numeric-separator, @babel/plugin-proposal-throw-expressions, @babel/plugin-transform-react-constant-elements, @babel/plugin-transform-react-inline-elements, @babel/plugin-transform-runtime, @babel/preset-env, @babel/preset-react, @babel/register, @babel/runtime)
• Update dependency babel-loader to v8.3.0
• Update dependency browserslist to v4.23.0
• Update dependency core-js to v3.36.1
• Update dependency eslint-plugin-import to v2.29.1
• Update dependency eslint-plugin-jsx-a11y to v6.8.0
• Update dependency eslint-plugin-react to v7.34.1
• Update dependency eslint-webpack-plugin to v2.7.0
• Update dependency jest-css-modules-transform to v4.4.2
• Update dependency prettier to v2.8.8
• Update dependency prop-types to v15.8.1
• Update dependency react-refresh to ^0.14.0
• Update dependency sass to v1.74.1
• Update dependency webpack to v4.47.0
• Update dependency webpack-cli to v4.10.0
• Update actions/cache action to v4
• Update actions/checkout action to v4
• Update actions/setup-node action to v4
• Update amondnet/vercel-action action to v25
• Update dependency babel-loader to v9
• Update dependency connect-history-api-fallback to v2
• Update dependency css-loader to v7
• Update dependency eslint-config-prettier to v9
• Update dependency eslint-plugin-jest to v27
• Update dependency eslint-plugin-prettier to v5
• Update dependency eslint-watch to v8
• Update dependency eslint-webpack-plugin to v4
• Update dependency husky to v9
• Update dependency jsdom to v24
• Update dependency lint-staged to v15
• Update dependency npm-check-updates to v16
• Update dependency prettier to v3
• Update dependency pretty-quick to v4
• Update dependency sass-loader to v14
• Update dependency style-loader to v3
• Update dependency webpack-cli to v5
• Update dependency webpack-dev-server to v5
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• Update dependency clean-webpack-plugin to v4
• Update dependency html-webpack-plugin to v5

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency eslint to v8
• Update dependency eslint-config-airbnb to v19
• Update dependency mini-css-extract-plugin to v2
• Update dependency terser-webpack-plugin to v5
• Update dependency webpack to v5
• Update dependency webpack-merge to v5
• Update jest monorepo to v29 (major) (babel-jest, jest)
• Update react monorepo to v18 (major) (react, react-dom)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/CI.yml

• actions/checkout v2
• actions/setup-node v2
• actions/cache v2
• amondnet/vercel-action v20

npm

package.json

• @babel/plugin-transform-react-constant-elements 7.16.0
• @babel/plugin-transform-react-inline-elements 7.16.0
• babel-plugin-import ^1.13.1
• babel-plugin-transform-react-pure-class-to-function 1.0.1
• babel-plugin-transform-react-remove-prop-types 0.4.24
• core-js 3.19.2
• lodash 4.17.21
• prop-types 15.7.2
• react 16.14.0
• react-dom 16.14.0
• @babel/core 7.16.0
• @babel/plugin-proposal-class-properties 7.16.0
• @babel/plugin-proposal-decorators 7.16.4
• @babel/plugin-proposal-export-namespace-from 7.16.0
• @babel/plugin-proposal-function-sent 7.16.0
• @babel/plugin-proposal-json-strings 7.16.0
• @babel/plugin-proposal-numeric-separator 7.16.0
• @babel/plugin-proposal-throw-expressions 7.16.0
• @babel/plugin-syntax-dynamic-import 7.8.3
• @babel/plugin-syntax-import-meta 7.10.4
• @babel/plugin-transform-runtime 7.16.4
• @babel/preset-env 7.16.4
• @babel/preset-react 7.16.0
• @babel/register 7.16.0
• @babel/runtime 7.16.3
• @pmmmwh/react-refresh-webpack-plugin ^0.5.4
• babel-core 7.0.0-bridge.0
• babel-eslint 10.1.0
• babel-jest 25.5.1
• babel-loader 8.2.3
• babel-plugin-lodash 3.3.4
• babel-preset-react-optimize 1.0.1
• browserslist 4.18.1
• clean-webpack-plugin 3.0.0
• connect-history-api-fallback 1.6.0
• cross-env 7.0.3
• css-loader 3.6.0
• enzyme 3.11.0
• enzyme-adapter-react-16 1.15.6
• eslint 7.32.0
• eslint-config-airbnb 18.2.1
• eslint-config-prettier 7.2.0
• eslint-plugin-import 2.25.3
• eslint-plugin-jest 23.20.0
• eslint-plugin-jsx-a11y 6.5.1
• eslint-plugin-prettier 3.4.1
• eslint-plugin-react 7.27.1
• eslint-watch 7.0.0
• eslint-webpack-plugin 2.6.0
• file-loader 6.2.0
• html-webpack-plugin 4.5.2
• husky 6.0.0
• identity-obj-proxy 3.0.0
• jest 25.5.4
• jest-css-modules-transform 4.3.0
• jest-enzyme 7.1.2
• jest-fetch-mock 3.0.3
• jsdom 16.7.0
• koa-connect 2.1.0
• lint-staged 11.2.6
• mini-css-extract-plugin 0.12.0
• npm-check-updates 10.3.1
• optimize-css-assets-webpack-plugin 6.0.1
• prettier 2.5.0
• pretty-quick 2.0.2
• react-refresh ^0.11.0
• sass 1.44.0
• sass-loader 8.0.2
• script-ext-html-webpack-plugin 2.1.5
• style-loader 1.3.0
• terser-webpack-plugin 4.2.3
• webpack 4.46.0
• webpack-cli 4.9.1
• webpack-dev-server 3.11.3
• webpack-merge 4.2.2
• node >=8
• npm >=3
• babel-core 7.0.0-bridge.0

---

• Check this box to trigger a request for Renovate to run again on this repository

Commit failed with error

When I try to commit all of the files, I get an error:

Warning: Setting pre-commit script in package.json > scripts will be deprecated Please move it to husky.hooks in package.json, a .huskyrc file, or a husky.config.js file Or run ./node_modules/.bin/husky-upgrade for automatic update See https://github.com/typicode/husky for usage husky > pre-commit (node v10.16.0) Stashing changes... [started] Stashing changes... [skipped] → No partially staged files found... Running linters... [started] Running tasks for *.{js,jsx,css,md} [started] prettier --write --single-quote [started] prettier --write --single-quote [completed] eslint --fix [started] eslint --fix [failed] → Running tasks for *.{js,jsx,css,md} [failed] → Running linters... [failed] ✖ eslint --fix found some errors. Please fix them and try committing again. /Users/joshua/WebstormProjects/it-app/client/babel.config.js 1:18 warning Unexpected unnamed function func-names /Users/joshua/WebstormProjects/it-app/client/src/components/hello-world/hello-world.css 1:1 error Parsing error: Unexpected token > 1 | .hello-world { | ^ 2 | margin-top: 10rem; 3 | font-size: 2rem; 4 | text-align: center; ✖ 2 problems (1 error, 1 warning) husky > pre-commit hook failed (add --no-verify to bypass)

I get the same error attempting to commit in VSCode.

This is the cause I think:

✖ eslint --fix found some errors. Please fix them and try committing again.

/Users/joshua/WebstormProjects/it-app/client/babel.config.js
1:18 warning Unexpected unnamed function func-names

/Users/joshua/WebstormProjects/it-app/client/src/components/hello-world/hello-world.css
1:1 error Parsing error: Unexpected token

1 | .hello-world {
| ^
2 | margin-top: 10rem;
3 | font-size: 2rem;
4 | text-align: center;

✖ 2 problems (1 error, 1 warning)

Not Working in IE

I have cloned the repository. done yarn start. Opend it IE-11. This is the issue. Even i tested in some other IE versions its showing the same issue.

Remove "@babel/plugin-transform-react-inline-elements" plugin in the development environment

Because:

This transform should be enabled only in production (e.g., just before minifying your code) because, although it improves runtime performance, it makes warning messages more cryptic and skips important checks that happen in development mode, including propTypes.

babel-plugin-transform-react-inline-elements

Disable HMR in production

TY, the boilerplate is great.

OS: windows, Linux
Node version: v6.11.3
NPM version: 3.10.10
Webpack version: 4.20.2
webpack-hot-client: 4.1.1

Issue: When running production the HMR is enabled - please advise how to disable for production.
I didn't see this option (full removal in the https://github.com/gaearon/react-hot-loader project only cold which isn't cleaning the package from the content)
Requested: In production hot module should be removed (in my case).

Lack of .babelrc causes errors in testing

Loving this project – thanks for all the hard work!

I tried running yarn test out-of-the-box, and got the following error:
FAIL __tests__/app.test.jsx ● Test suite failed to run Jest encountered an unexpected token This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. **By default, if Jest sees a Babel config, it will use that to transform your files**, ignoring "node_modules".

I'm quite new to Jest/Enzyme, but I'll (naively) submit a PR with a .babelrc, if it helps. 😄

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Heroku configuration

Someone tried to deploy an application created with this boilrplate with heroku?

CleanWebpackPlugin is not a function

Hello, I just cloned the project, ran npm install and npm run build and am getting the current error.

TypeError: CleanWebpackPlugin is not a constructor

is this is a know issue?

Not working on IE

Tried opening in IE. No errors nothing is displayed

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update dependency @pmmmwh/react-refresh-webpack-plugin to v0.5.11
• Update dependency babel-plugin-import to v1.13.8
• Update dependency enzyme-adapter-react-16 to v1.15.8
• Update babel monorepo (@babel/core, @babel/plugin-proposal-class-properties, @babel/plugin-proposal-decorators, @babel/plugin-proposal-export-namespace-from, @babel/plugin-proposal-function-sent, @babel/plugin-proposal-json-strings, @babel/plugin-proposal-numeric-separator, @babel/plugin-proposal-throw-expressions, @babel/plugin-transform-react-constant-elements, @babel/plugin-transform-react-inline-elements, @babel/plugin-transform-runtime, @babel/preset-env, @babel/preset-react, @babel/register, @babel/runtime)
• Update dependency babel-loader to v8.3.0
• Update dependency browserslist to v4.23.0
• Update dependency core-js to v3.37.0
• Update dependency eslint-plugin-import to v2.29.1
• Update dependency eslint-plugin-jsx-a11y to v6.8.0
• Update dependency eslint-plugin-react to v7.34.1
• Update dependency eslint-webpack-plugin to v2.7.0
• Update dependency jest-css-modules-transform to v4.4.2
• Update dependency prettier to v2.8.8
• Update dependency prop-types to v15.8.1
• Update dependency react-refresh to ^0.14.0
• Update dependency sass to v1.75.0
• Update dependency webpack to v4.47.0
• Update dependency webpack-cli to v4.10.0
• Update actions/cache action to v4
• Update actions/checkout action to v4
• Update actions/setup-node action to v4
• Update amondnet/vercel-action action to v25
• Update dependency babel-loader to v9
• Update dependency connect-history-api-fallback to v2
• Update dependency css-loader to v7
• Update dependency eslint to v9
• Update dependency eslint-config-prettier to v9
• Update dependency eslint-plugin-jest to v28
• Update dependency eslint-plugin-prettier to v5
• Update dependency eslint-watch to v8
• Update dependency eslint-webpack-plugin to v4
• Update dependency husky to v9
• Update dependency jsdom to v24
• Update dependency lint-staged to v15
• Update dependency npm-check-updates to v16
• Update dependency prettier to v3
• Update dependency pretty-quick to v4
• Update dependency sass-loader to v14
• Update dependency style-loader to v4
• Update dependency webpack-cli to v5
• Update dependency webpack-dev-server to v5
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• Update dependency clean-webpack-plugin to v4
• Update dependency html-webpack-plugin to v5

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Replace dependency babel-eslint with @babel/eslint-parser 7.11.0
• Update dependency eslint-config-airbnb to v19
• Update dependency mini-css-extract-plugin to v2
• Update dependency terser-webpack-plugin to v5
• Update dependency webpack to v5
• Update dependency webpack-merge to v5
• Update jest monorepo to v29 (major) (babel-jest, jest)
• Update react monorepo to v18 (major) (react, react-dom)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/CI.yml

• actions/checkout v2
• actions/setup-node v2
• actions/cache v2
• amondnet/vercel-action v20

npm

package.json

• @babel/plugin-transform-react-constant-elements 7.16.0
• @babel/plugin-transform-react-inline-elements 7.16.0
• babel-plugin-import ^1.13.1
• babel-plugin-transform-react-pure-class-to-function 1.0.1
• babel-plugin-transform-react-remove-prop-types 0.4.24
• core-js 3.19.2
• lodash 4.17.21
• prop-types 15.7.2
• react 16.14.0
• react-dom 16.14.0
• @babel/core 7.16.0
• @babel/plugin-proposal-class-properties 7.16.0
• @babel/plugin-proposal-decorators 7.16.4
• @babel/plugin-proposal-export-namespace-from 7.16.0
• @babel/plugin-proposal-function-sent 7.16.0
• @babel/plugin-proposal-json-strings 7.16.0
• @babel/plugin-proposal-numeric-separator 7.16.0
• @babel/plugin-proposal-throw-expressions 7.16.0
• @babel/plugin-syntax-dynamic-import 7.8.3
• @babel/plugin-syntax-import-meta 7.10.4
• @babel/plugin-transform-runtime 7.16.4
• @babel/preset-env 7.16.4
• @babel/preset-react 7.16.0
• @babel/register 7.16.0
• @babel/runtime 7.16.3
• @pmmmwh/react-refresh-webpack-plugin ^0.5.4
• babel-core 7.0.0-bridge.0
• babel-eslint 10.1.0
• babel-jest 25.5.1
• babel-loader 8.2.3
• babel-plugin-lodash 3.3.4
• babel-preset-react-optimize 1.0.1
• browserslist 4.18.1
• clean-webpack-plugin 3.0.0
• connect-history-api-fallback 1.6.0
• cross-env 7.0.3
• css-loader 3.6.0
• enzyme 3.11.0
• enzyme-adapter-react-16 1.15.6
• eslint 7.32.0
• eslint-config-airbnb 18.2.1
• eslint-config-prettier 7.2.0
• eslint-plugin-import 2.25.3
• eslint-plugin-jest 23.20.0
• eslint-plugin-jsx-a11y 6.5.1
• eslint-plugin-prettier 3.4.1
• eslint-plugin-react 7.27.1
• eslint-watch 7.0.0
• eslint-webpack-plugin 2.6.0
• file-loader 6.2.0
• html-webpack-plugin 4.5.2
• husky 6.0.0
• identity-obj-proxy 3.0.0
• jest 25.5.4
• jest-css-modules-transform 4.3.0
• jest-enzyme 7.1.2
• jest-fetch-mock 3.0.3
• jsdom 16.7.0
• koa-connect 2.1.0
• lint-staged 11.2.6
• mini-css-extract-plugin 0.12.0
• npm-check-updates 10.3.1
• optimize-css-assets-webpack-plugin 6.0.1
• prettier 2.5.0
• pretty-quick 2.0.2
• react-refresh ^0.11.0
• sass 1.44.0
• sass-loader 8.0.2
• script-ext-html-webpack-plugin 2.1.5
• style-loader 1.3.0
• terser-webpack-plugin 4.2.3
• webpack 4.46.0
• webpack-cli 4.9.1
• webpack-dev-server 3.11.3
• webpack-merge 4.2.2
• node >=8
• npm >=3
• babel-core 7.0.0-bridge.0

---

• Check this box to trigger a request for Renovate to run again on this repository

Suggestion: Typescript Setup

Hello! your project is WONDERFUL, thank you so much for doing this!

I'd like to suggest you, if possible, add typescript to your project as this is a point of confusion for many devs (me included)
when I try to add typescript there is confusion between the linters and if babel is still needed, and common issues that happen with everyone like one linter overwriting the other, etc.

I'm bringing the suggestion but at this moment I'm not 100% sure how to do this setup so I would'nt be able to create a PR for you to implement this, sorry.