{"id":27384250,"url":"https://github.com/valera-rozuvan/react-webpack-starter","last_synced_at":"2026-02-25T03:37:37.348Z","repository":{"id":41952942,"uuid":"456549812","full_name":"valera-rozuvan/react-webpack-starter","owner":"valera-rozuvan","description":"an opinionated react with webpack starter","archived":false,"fork":false,"pushed_at":"2025-02-25T14:32:00.000Z","size":2270,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-04T12:53:08.402Z","etag":null,"topics":["react","react-redux","reactjs","redux","typescript","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/valera-rozuvan.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}},"created_at":"2022-02-07T14:53:51.000Z","updated_at":"2025-02-25T14:32:00.000Z","dependencies_parsed_at":"2024-02-01T18:41:08.046Z","dependency_job_id":"c708e208-1503-485f-912e-100274df59b9","html_url":"https://github.com/valera-rozuvan/react-webpack-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valera-rozuvan%2Freact-webpack-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valera-rozuvan%2Freact-webpack-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valera-rozuvan%2Freact-webpack-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/valera-rozuvan%2Freact-webpack-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/valera-rozuvan","download_url":"https://codeload.github.com/valera-rozuvan/react-webpack-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248742408,"owners_count":21154484,"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","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":["react","react-redux","reactjs","redux","typescript","webpack"],"created_at":"2025-04-13T16:24:31.609Z","updated_at":"2026-02-25T03:37:32.317Z","avatar_url":"https://github.com/valera-rozuvan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-webpack-starter\n\nan opinionated react with webpack starter\n\n## Rationale\n\nUsing the following versions of NPM packages:\n\n- dependencies\n  - [react](https://www.npmjs.com/package/react) v19.0.0\n  - [react-dom](https://www.npmjs.com/package/react-dom) v19.0.0\n  - [react-router-dom](https://www.npmjs.com/package/react-router-dom) v7.2.0\n  - [redux](https://www.npmjs.com/package/redux) v5.0.1\n  - [react-redux](https://www.npmjs.com/package/react-redux) v9.2.0\n- devDependencies\n  - [sass](https://www.npmjs.com/package/sass) v1.85.1\n  - [webpack](https://www.npmjs.com/package/webpack) v5.98.0\n  - [typescript](https://www.npmjs.com/package/typescript) v5.3.3\n  - [@babel/core](https://www.npmjs.com/package/@babel/core) v7.26.9\n  - a few others; see [package.json](./package.json)\n\nwe aim to bootstrap a complete React development environment for coding in TypeScript. We want an option to create a build for production deployments, along with an option to quickly start a development server. The project uses [dart-sass](https://github.com/sass/dart-sass) for styling; `dart-sass` is compiled to JavaScript as a NPM package (see [sass](https://www.npmjs.com/package/sass)).\n\nA strict requirement for this project is to keep the build as small as possible. Therefore, unneeded Node.js and NPM packages are not included in the resulting build. One should include **only necessary** Node.js back-end code in front-end apps (and do so with caution)!\n\n## Older version of React\n\nAs time progresses, React is being updated. New major versions keep appearing every year or so. Starter for older version of React will live in separate branches.\n\n- React v18 - checokut branch `react_v18`\n- React v17 - checkout branch `react_v17`\n- React v16 - checkout branch `react_v16`\n\n## Pre-requisites\n\nYou need at least v16.x of Node.js available. See [instructions](https://nodejs.org/en/download/) on how to set up Node.js locally. The author has tested this project using the following versions of Node.js:\n\n```text\nv16.20.2\nv18.20.7\nv20.18.3\n```\n\n## Installing\n\nFirst clone this repo somewhere:\n\n```shell\ngit clone https://github.com/valera-rozuvan/react-webpack-starter.git\n```\n\nSwitch to repo folder, and install dependencies:\n\n```shell\ncd /home/user/path/to/react-webpack-starter\nnpm install\n```\n\n## Running\n\nSeveral `npm` scripts are included for running, building, and doing other maintenance tasks. See [package.json](./package.json), section `scripts`. Below, a short description is given for each `npm` script.\n\n### Local development\n\nLaunch a dev server with auto reloading, and source maps for debugging:\n\n```shell\nnpm run start\n```\n\nYou can now open [localhost:3000](http://localhost:3000/) in your browser, and observe the live application.\n\nIf you want to change the default port `3000`, add the line:\n\n```text\nPORT=8001\n```\n\nto the end of `.env` file. Replace `8001` with the desired port number. Now, you should be able to access the local site via the desired port [localhost:8001](http://localhost:8001/).\n\n### Generating a build for debugging\n\nCreate a build for debugging purposes (source maps will be included, NO live reload):\n\n```shell\nnpm run build:local\n```\n\nThis will generate a `build` folder, which is suitable to be used with a 3rd party static file server. Use for testing purposes only!\n\n### Production build\n\nCreate a minified production build (NO source maps, NO live reload):\n\n```shell\nnpm run build\n```\n\nThis will generate a `build` folder. Use any static file server to host your production front-end app.\n\n### Linting\n\nThis project uses [ESLint](https://eslint.org/) to enforce code style and catch simple syntax errors while coding.\n\nCheck all files using settings from `.eslintrc.js` config; report warnings and errors to `stdout`:\n\n```shell\nnpm run lint\n```\n\nTry to automatically fix some warnings and errors:\n\n```shell\nnpm run lint:fix\n```\n\n**NOTE 1**: Author's preference is to use [airbnb coding style](https://airbnb.io/javascript/). You can change that in [.eslintrc.js](.eslintrc.js) config file.\n\n**NOTE 2**: Some files/directories are excluded when linting. See [.eslintignore](.eslintignore) config file.\n\n**NOTE 3**: Some base settings such as character encoding, and indent size, are set in [.editorconfig](./.editorconfig) config file.\n\n## Redux DevTools\n\nOut of the box, this project includes support for the wonderful [Redux DevTools](https://github.com/reduxjs/redux-devtools) extension. While developing, you can use the Redux browser extension to view the Redux store. See [Redux DevTools Extension](https://github.com/reduxjs/redux-devtools/tree/main/extension#installation) guide for installation instructions.\n\nFor production builds, this is skipped. The extension code is not included in the final bundle.\n\n## dotenv\n\nOut of the box, this project supports a `.env` configuration file. Environment variables from this file are sourced using [dotenv](https://www.npmjs.com/package/dotenv) NPM package. This happens when Webpack is performing a build. Variable names which have a prefix `REACT_APP_` will be available at runtime in the React app via the global object `process.env`. When you run this project, you can open the browser's JavaScript console, and observe the following:\n\n```text\nprocess.env.REACT_APP_BASE_URL = 'https://example.com'\nprocess.env.REACT_APP_API_URL = 'https://api.example.com'\n```\n\n![ENV vars preview in browser](./env_vars_preview_in_browser.png \"ENV vars preview in browser\")\n\nThe above variables are defined in the [.env](./.env) file.\n\nNOTE: The `dotenv` NPM package is used only at build time. It is not included in the resulting build.\n\n## CSS modules\n\nYou can define global CSS styles, or you can use CSS modules. Search this project for `colorBg` string. This is a CSS class name. You will see that it's defined in several places. Depending on the file name, the definition of `colorBg` is treated differently. Please read more about [CSS modules](https://css-tricks.com/css-modules-part-1-need/) (or [another wonderful](https://blog.logrocket.com/a-deep-dive-into-css-modules/) resource) if you are not familiar with this concept.\n\nIf the file name has the following schema:\n\n- `*.module.css`\n- `*.module.scss`\n- `*.module.sass`\n\nthen that file will be treated as a CSS module. Otherwise, the styles will be applied globally.\n\n---\n\n## license\n\nThe project `'react-webpack-starter'` is licensed under the MIT License.\n\nSee [LICENSE](./LICENSE) for more details.\n\nThe latest source code can be retrieved from one of several mirrors:\n\n1. [github.com/valera-rozuvan/react-webpack-starter](https://github.com/valera-rozuvan/react-webpack-starter)\n\n2. [gitlab.com/valera-rozuvan/react-webpack-starter](https://gitlab.com/valera-rozuvan/react-webpack-starter)\n\n3. [git.rozuvan.net/react-webpack-starter](https://git.rozuvan.net/react-webpack-starter)\n\nCopyright (c) 2022-2025 [Valera Rozuvan](https://valera.rozuvan.net/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalera-rozuvan%2Freact-webpack-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvalera-rozuvan%2Freact-webpack-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvalera-rozuvan%2Freact-webpack-starter/lists"}