{"id":22994368,"url":"https://github.com/donadam2/webpack-react-boilerplate","last_synced_at":"2025-07-27T09:11:17.816Z","repository":{"id":37398192,"uuid":"183434280","full_name":"DonAdam2/webpack-react-boilerplate","owner":"DonAdam2","description":"Webpack boilerplate for react","archived":false,"fork":false,"pushed_at":"2025-07-25T05:43:59.000Z","size":5982,"stargazers_count":12,"open_issues_count":3,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-25T10:46:56.310Z","etag":null,"topics":["jest","plopjs","react","react-router-dom-v6","redux-toolkit","scss","webpack5"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DonAdam2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-04-25T12:54:25.000Z","updated_at":"2025-07-25T05:44:02.000Z","dependencies_parsed_at":"2023-11-09T14:27:25.627Z","dependency_job_id":"dec1f0ff-15ca-4340-9dee-dfe327432db9","html_url":"https://github.com/DonAdam2/webpack-react-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/DonAdam2/webpack-react-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Fwebpack-react-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Fwebpack-react-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Fwebpack-react-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Fwebpack-react-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DonAdam2","download_url":"https://codeload.github.com/DonAdam2/webpack-react-boilerplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DonAdam2%2Fwebpack-react-boilerplate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267335186,"owners_count":24070714,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-27T02:00:11.917Z","response_time":82,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["jest","plopjs","react","react-router-dom-v6","redux-toolkit","scss","webpack5"],"created_at":"2024-12-15T05:17:58.500Z","updated_at":"2025-07-27T09:11:17.810Z","avatar_url":"https://github.com/DonAdam2.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Table of Contents:\n- [Overview](#this-webpack-v51002-boilerplate-supports-the-following)\n- [Prerequisites](#prerequisites)\n- [Installing \u0026 getting started](#installing--getting-started)\n- [Windows subsystem for Linux (WSL2)](#windows-subsystem-for-linux-wsl2-for-docker)\n- [Available React configuration](#available-react-configurations)\n- [Available Jest mocks](#available-jest-mocks)\n- [Available aliases](#available-aliases)\n- [Environments](#environments)\n- [Enable CSS modules](#enable-css-modules)\n- [Enable HTTPS in development](#enable-https-in-development-pnpm-start)\n- [Start the development server without opening the app in the browser](#start-the-development-server-without-opening-the-app-in-the-browser-pnpm-start)\n- [Enable PWA (production only)](#enable-pwa-pnpm-generate-progressivewebapp)\n- [Configuring prettier](#configuring-prettier)\n- [Site meta tags](#site-meta-tags)\n- [Add Cypress](#add-cypress)\n- [Extras](#extras)\n- [Code generator](#code-generator-using-plop)\n- [Available scripts](#available-scripts)\n\n## This webpack (V5.100.2) boilerplate supports the following:\n\n- Testing using **jest**, **react-testing-library**\n- **SCSS** preprocessor\n- Autoprefixer for CSS (it supports IE \u003e= 11)\n- Hot reloading for **JS** \u0026 **CSS** and **redux** store (in development)\n- Prettier (for code format)\n- Docker setup for development\n- Docker setup for production (basic setup **using nginx**)\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Prerequisites:\n\n- nodeJS \u003e 17.X.X or Docker\n\n## Installing / Getting Started:\n\n### Development (locally):\n\n- Clone repo =\u003e `git clone git@github.com:DonAdam2/webpack-react-boilerplate.git`\n- Navigate to project directory `cd webpack-react-boilerplate`\n- Install dependencies =\u003e `pnpm install`\n- Start the development server =\u003e `pnpm start`\n\n### Development (using Docker) (port 3000):\n\n- Clone repo =\u003e `git clone git@github.com:DonAdam2/webpack-react-boilerplate.git`\n- Navigate to project directory `cd webpack-react-boilerplate`\n- Install dependencies (required for prettier) =\u003e `pnpm install`\n- Start the development server =\u003e `docker-compose up web-dev`\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n### Windows subsystem for linux \"WSL2\" (for Docker):\n\n- If you are using Windows 11 or 10, it's recommended to use WSL2:\n  - [Install WSL on windows](https://pureinfotech.com/install-wsl-windows-11/)\n  - [Install docker on windows](https://docs.docker.com/desktop/install/windows-install/)\n  - Open docker desktop app:\n    - settings =\u003e resources =\u003e WSL integration =\u003e enable required Ubuntu integration\n  - [Setup SSH keys (if you want) on windows and share it with WSL](https://devblogs.microsoft.com/commandline/sharing-ssh-keys-between-windows-and-wsl-2/)\n  - Create a new directory in ubuntu:\n  ```\n  mkdir workspace\n  cd workspace\n  ```\n  - Clone this repo into the selected Ubuntu:\n  ```\n  git clone git@github.com:DonAdam2/webpack-react-boilerplate.git\n  ```\n  - Install curl in Ubuntu:\n  ```\n  sudo apt-get install curl\n  ```\n  - Install nvm:\n  ```\n  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash\n  ```\n  - Install required node version:\n  ```\n  nvm install --lts\n  ```\n  - Install pnpm globally:\n  ```\n  npm install -g pnpm\n  ```\n  - Update permissions to be able to install NPM packages\n  ```\n  sudo chown -R $(whoami) ~/workspace/webpack-react-boilerplate\n  ```\n  - Install packages (for linting purposes):\n  ```\n  pnpm install\n  ```\n  - Run docker for development:\n  ```\n  docker-compose up web-dev\n  ```\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Docker for production (_basic setup_) (port 8080) (modify it to your needs):\n- Update the **_production_** section of the **_Dockerfile_** to meet your needs\n- Run the following command to build your image =\u003e `docker-compose up web-prod`\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Available React configurations:\n\n- React router dom v6\n- Redux toolkit with Redux logger \u0026 Redux devTool\n- 2 environments {production: .env, development: .env.development}\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Available Jest mocks:\n\n- RenderWithRedux =\u003e overrides the render method of RTL with redux\n- RenderWithReactIntl =\u003e overrides the render method of RTL with react-intl provider (if you are using it you need to download it)\n- RenderWithRouter =\u003e overrides the render method of RTL with react router\n- RenderWithProviders =\u003e overrides the render method of RTL with all providers\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Available aliases:\n- @/jest =\u003e for the jest directory\n- @/js =\u003e for the JS directory\n- @/scss =\u003e for the SCSS directory\n- @/public =\u003e for the public directory, (don't forget to prepend the **tilde** symbol in scss files):\n  ```\n  background-image: url('~@/public/asstes/images/favicon.png');\n  ```\n  ```\n  @font-face {\n    font-family: 'Roboto';\n    src: url('~@/public/asstes/fonts/Roboto-Regular.ttf');\n    font-weight: normal;\n    font-style: normal;\n    font-display: swap;\n  }\n  ```\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Environments:\n\n### Available environments:\n- Development =\u003e _.env.development_\n- Production =\u003e _.env_\n\n### Override environment files:\n\n#### Development:\n- Create a file with the chosen env extension in **/environments** directory, .e.g `.env.local`\n- Install **env-cmd** package\n- Update your start script `\"start\": \"env-cmd -f environments/.env.local node scripts/start.js\",`\n\n#### Production:\n- Create a file with the chosen env extension in **/environments** directory, .e.g `.env.prod`\n- Install **env-cmd** package\n- Update your build script `\"build\": \"env-cmd -f environments/.env.prod webpack --config buildTools/webpack.prod.js --progress --color\"`\n\n#### Staging (new production environment):\n- Create a file with the chosen env extension in **/environments** directory, .e.g `.env.staging`\n- Install **env-cmd** package\n- Add a new build script `\"build:staging\": \"env-cmd -f environments/.env.staging webpack --config buildTools/webpack.prod.js --progress --color\"`\n\n### Update environment variables:\n\nPlease keep in mind that environment variables configured using webpack which means that you need to re-run the corresponding environment script (pnpm start, pnpm build) if you update the environment file.\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Enable CSS modules:\n### Each component has its own styles \"no conflict between different components styles\"\n\n- Open **/buildTools/constants.js** and set **isCssModules** to true\n- Then in every component add the required import as follows:\n  ```\n  import classes from './requiredStyles.scss'\n  ```\n- Use it as follows:\n  ```\n  \u003cdiv className={classes.wrapper} /\u003e\n  ```\n  - Note:\n    - In development class names will be in (componentName_class-name) format =\u003e e.g. `box_box-wrapper`\n    - In production class names will be in (letter_letter) unique format to **reduce the bundle size** =\u003e e.g. `a_i`\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Enable HTTPS in development `pnpm start`\n\nAdd `set HTTPS=true` to `pnpm start` script =\u003e `\"start\": \"set HTTPS=true \u0026\u0026 node scripts/start.js\"`\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Start the development server without opening the app in the browser `pnpm start`\n\nAdd `set BROWSER=none` to `pnpm start` script =\u003e `\"start\": \"set BROWSER=none \u0026\u0026 node scripts/start.js\"`\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Enable PWA `pnpm generate progressiveWebApp`\n\n- Run the given script to add the required files for progressive web app\n- Install the following packages:\n  \n  ```\n  pnpm add -D workbox-webpack-plugin workbox-cacheable-response workbox-core workbox-expiration workbox-precaching workbox-routing workbox-strategies workbox-window webpack-pwa-manifest\n  ```\n- Add **pwa** directory `/public/assets/images/pwa`, then add your PWA images using the following names:\n  - icon_192x192.png\n  - icon_256x256.png\n  - icon_384x384.png\n  - icon_512x512.png\n- Open `/buildTools/webpack.prod.js` file and update manifest data in `WebpackPwaManifest` plugin:\n  - start_url (indicates what page should launch when someone opens your progressive web app.)\n  - theme_color (This sometimes affects how the OS displays the site (e.g., on Android's task switcher, the theme color surrounds the site).)\n  - background_color (tells the browser what color to use on the startup splash screen that users will see when they launch your app.)\n  - name\n  - short_name\n  - description\n  - orientation (you can enforce the orientation of your app, it can be ommited.)\n  - categories (This is intended to be used by app stores to categorize your app.)\n- Update **cache APIs** section as needed in `/src/serviceWorker/swSource` file\n- You are good to go.\n\n**Notes**:\n\n- If you get the following error in production:\n  ```\n  Uncaught (in promise) bad-precaching-response: \n  bad-precaching-response :: [{\"url\":\"https:\n  ```\n  - Add the given package or file in exclude array of [InjectManifest](https://developer.chrome.com/docs/workbox/reference/workbox-webpack-plugin/#type-InjectManifest) plugin in `/buildTools/webpack.prod.js` as follows:\n  ```\n  new InjectManifest({\n    //this is the source of your service worker setup\n    swSrc: \\`\\${PATHS.src}/serviceWorker/swSource\\`,\n    dontCacheBustURLsMatching: ${dontCacheBustURLsMatching},         \n    // Bump up the default maximum size (2mb) to (5mb) that's precached,\n    // to make lazy-loading failure scenarios less likely.\n    maximumFileSizeToCacheInBytes: 5 * 1024 * 1024,\n    //this is the output name of your service worker file\n    swDest: 'serviceWorker.js',\n    exclude: ['fileName'],\n  }),`,\n  ```\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Configuring Prettier\n\nThis build relies on [Prettier formatter](https://prettier.io/) to enforce code style. And [ESLint](https://eslint.org/) for identifying problematic patterns found in the code.\n\n- Setting up prettier:\n\n  1- You can find steps on how to set up prettier formatter with WebStorm/PhpStorm [here](https://prettier.io/docs/en/webstorm.html#running-prettier-on-save-using-file-watcher).\n\n  **Notes**:\n\n  - It's better to use the local `node_modules` version of prettier instead of a global one, to avoid version conflicts (in case the globally installed version does not match the version specified in `package.json`).\n\n  2- Follow the next steps to set up **prettier** and **eslint** in **_VS Code_**:\n\n  - Install `prettier` plugin\n\n  - Install `eslint` plugin\n\n  - Open **_VS Code settings_** `CTRL + ,`:\n\n    a- Search for `formatter` =\u003e check **Format on save**\n\n    b- Search for `prettier` =\u003e add `.prettierrc` in **_Prettier: Config Path_** section \u0026\u0026 check **_Prettier: Require Config_**\n\n  3- Please refer to other tutorials if you are using a different IDE.\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Site meta tags:\n\n- This app includes search engines, Facebook, Twitter and regular meta tags\n\n#### To update them:\n\n- Open **_/buildTools/constants.js_** file and update metaInfo object\n- Open **_public/assets/images_** and replace (favicon.png, metaImage.jpg) with your images but using the same name\n\n  **Notes**:\n\n  - It's very important to set `PRODUCTION_DOMAIN` in any production environment file, to generate site meta tags correctly\n  - `PRODUCTION_DOMAIN` is the domain of your deployed app\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Add Cypress:\n\n- Install the following packages:\n  ```\n  pnpm add -D cypress start-server-and-test\n  ```\n- Add the following scripts in `package.json`:\n  ```\n  \"cypress:prepare\": \"set BROWSER=none \u0026\u0026 set ENV=test \u0026\u0026 pnpm start\", //starts the app without opening it in the browser\n  \"cypress:start\": \"start-server-and-test cypress:prepare 3000\", //Runs the previous command and waits for localhost to start up\n  \"cypress:open\": \"pnpm cypress:start \\\"cypress open\\\"\", //Runs cypress tests in electron browser (recommended by cypress)\n  \"cypress:run\": \"pnpm cypress:start \\\"cypress run\\\"\" //Runs cypress tests in headless mode (no browser)\n  ```\n\n  - Note:\n    - If you would like to start the E2E tests automatically you can update `cypress:open` command to the following, but after running it at least once:\n    ```\n    \"cypress:open\": \"pnpm cypress:start \\\"cypress open --e2e -b electron\\\"\"\n    ```\n- Run `cypress:open` command and choose E2E to configure it\n- Open `cypress.config.js` file and add the baseUrl:\n  ```\n   baseUrl: 'http://localhost:3000/',\n  ```\n- Add **e2e directory** in **cypress directory** then add your test files inside it using the following convention `fileName.cy.js`\n- If you would like to add code coverage for **E2E**, do the following [Documentations](https://github.com/cypress-io/code-coverage):\n  - Install the following package:\n    ```\n    pnpm add -D @cypress/code-coverage\n    ```\n  - Import the installed package in `cypress.config.js` file:\n    ```\n    setupNodeEvents(on, config) {\n      require('@cypress/code-coverage/task')(on, config);\n      // include any other plugin code...\n\n      // It's IMPORTANT to return the config object\n      // with any changed environment variables\n      return config;\n    },\n    ```\n  - Add the following import in `cypress/support/e2e.js` file:\n    ```\n    import '@cypress/code-coverage/support';\n    ```\n  - Add the following to `babel.config.js` file before the return:\n    ```\n    if (process.env['ENV']?.trim() === 'test') {\n      plugins.push('istanbul');\n    }\n    ```\n    - Note:\n      - To open the coverage report go to `/coverage/lcov-report/index.html`\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Extras:\n\n- Private route guard =\u003e protect the given route based on a token.\n- Public route guard =\u003e used for public routes and authentication routes (ex: login, signup, ...etc) {if authenticated it will redirect the user to the home page}\n- Restricted route guard =\u003e protect the given route based on a token, and a list of permissions (can be an array or a string).\n- Restricted section =\u003e protect the given section based on a list of permissions (can be an array or a string).\n- Generic error boundary fallback component (you can customize it)\n- Cookies, local storage and sessions storage mangers to store data in the browser. (**Note:** the data is encrypted using crypto-js package before storing it.)\n- Basic mixins `(scss/generic/_mixins.scss)`\n- Normalize styles `(scss/generic/_normalize.scss)`\n- App typography styles `(scss/generic/_typography.scss)`\n- 4 break points `(scss/generic/_variables.scss)`\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Code generator (using plop):\n### It allows you to generate the following (pnpm generate):\n- Components\n- Containers\n- Pages\n- Custom hooks\n- Services\n- Reducers\n- progressiveWebApp\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e\n\n## Available Scripts\n\nIn the project directory, you can run:\n\n### `pnpm start`\n\nRuns the app in the development mode.\u003cbr\u003e\nIt will open [http://localhost:3000](http://localhost:3000) automatically in the browser to see your app.\n\nAll changes will be injected automatically without reloading the page.\u003cbr\u003e\n\nYou will see in the console the following:\n\n- All redux store related changes\n- Any of the following errors:\n  1. Linting errors.\n  2. Code format errors (because of [prettier](https://prettier.io/))\n\n### `pnpm build`\n\nBuilds the app for production to the `dist` folder.\u003cbr\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr\u003e\nYour app is ready to be deployed!\n\n### `pnpm build:serve`\n\nServes the app on `http://localhost:8080/` from the `dist` folder to check the production version.\n\n**_Note:_** Use this script only if you ran the build script `pnpm build`.\n\n### `pnpm analyze-bundle`\n\nIt allows you to analyze the bundle size.\n\n### `pnpm test`\n\nIt runs all test files.\n\n### `pnpm test:watch`\n\n- It runs all unit test files in `/src` directory using watch mode.\n- Will run all your tests once then again on every change of your source code\n\n### `pnpm test:coverage`\n\nIt runs test coverage.\n\n### `pnpm test:clear`\n\nClears test cache.\n\n### `pnpm generate` **_component_** || **_page_** || **_hook_** || **_service_** || **_reducer_** || **_progressiveWebApp_**\n\n- It creates a boilerplate for component, container, page, custom hook, service, reducer or progressive web app setup.\n\n\u003cp dir=\"rtl\"\u003e\u003ca href=\"#table-of-contents\"\u003eBack to top\u003c/a\u003e\u003c/p\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonadam2%2Fwebpack-react-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdonadam2%2Fwebpack-react-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdonadam2%2Fwebpack-react-boilerplate/lists"}