{"id":13847123,"url":"https://github.com/altafino/react-webpack-5-tailwind-2","last_synced_at":"2025-07-12T08:31:20.687Z","repository":{"id":46075481,"uuid":"325777260","full_name":"altafino/react-webpack-5-tailwind-2","owner":"altafino","description":"React 17 Boilerplate with Webpack 6, Tailwind 2, using babel, SASS/PostCSS, HMR, dotenv and an optimized production build","archived":true,"fork":false,"pushed_at":"2022-06-20T09:29:58.000Z","size":627,"stargazers_count":295,"open_issues_count":4,"forks_count":68,"subscribers_count":10,"default_branch":"main","last_synced_at":"2024-11-21T21:42:29.021Z","etag":null,"topics":["boilerplate","boilerplate-template","react","reactjs","tailwind","tailwindcss","webpack"],"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/altafino.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}},"created_at":"2020-12-31T10:38:06.000Z","updated_at":"2024-07-24T09:06:38.000Z","dependencies_parsed_at":"2022-09-24T09:00:31.558Z","dependency_job_id":null,"html_url":"https://github.com/altafino/react-webpack-5-tailwind-2","commit_stats":null,"previous_names":[],"tags_count":20,"template":true,"template_full_name":null,"purl":"pkg:github/altafino/react-webpack-5-tailwind-2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altafino%2Freact-webpack-5-tailwind-2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altafino%2Freact-webpack-5-tailwind-2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altafino%2Freact-webpack-5-tailwind-2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altafino%2Freact-webpack-5-tailwind-2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/altafino","download_url":"https://codeload.github.com/altafino/react-webpack-5-tailwind-2/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/altafino%2Freact-webpack-5-tailwind-2/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264962163,"owners_count":23689751,"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":["boilerplate","boilerplate-template","react","reactjs","tailwind","tailwindcss","webpack"],"created_at":"2024-08-04T18:00:54.926Z","updated_at":"2025-07-12T08:31:20.361Z","avatar_url":"https://github.com/altafino.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# unmaintained\nI am not more maintain this project actively for different reasons. One is, that with Vite we have a nicer way to handle different aspects, other is time.\nBut I check and can accept pull requests.\n\n### Visit my [Job Board for React Jobs](https://reactjsjob.com)\n\n\n# react-webpack-6-tailwind-2\n\nReact 17 Boilerplate with React 17, Webpack 6, Tailwind 2, HMR, using babel, Jest unit testing, sass, with a hot dev server and an optimized production build\n\n[Demo](https://dreamy-shirley-041c74.netlify.app/)\n\nMaintained by [Altafino - Full-Stack Go/JS Development](https://altafino.com)\n\n## Last Changes (the newest first):\n\n- added full support for unit testing (with file mocks) using Jest\n- added SVGR as a webpack loader to import your SVG directly as a React Component.\n- added build-staging script. same as build but using .env.staging\n- added dotenv-webpack to handle process.env.VARS\n- added Prettier\n- added react-refresh-webpack-plugin for HMR\n\n## Installation\n\n```\ngit clone https://github.com/altafino/react-webpack-5-tailwind-2.git\ncd react-webpack-5-tailwind-2\nyarn / npm i\n```\n\nTo use it for your own project the easiest way is to use the green Template Button on top right of this repo on Github.\n\n## Usage\n\n### Development server\n\n```bash\nyarn start / npm start\n```\n\nYou can view the development server at `localhost:3000`.\n(change port in ./config/webpack.dev.js)\n\n### Unit Test\n\n```bash\n yarn test / npm test\n```\n\n### Production build\n\n```bash\n yarn build / npm run build\n```\n\n## Features\n\n- [React 17](https://reactjs.org/)\n- [Webpack 6](https://webpack.js.org/)\n- [Tailwind 2](https://tailwindcss.com)\n- [Jest 27](http://jestjs.io/)\n- [PostCss](https://postcss.org/)\n- [Babel](https://babeljs.io/)\n- [Sass](https://sass-lang.com/)\n- [Eslint](https://eslint.org/)\n- [Husky](https://github.com/typicode/husky) ( tks [@rubinj30](https://github.com/rubinj30) )\n\n## Dependencies\n\n### webpack\n\n- [`webpack`](https://github.com/webpack/webpack) - Module and asset bundler.\n- [`webpack-cli`](https://github.com/webpack/webpack-cli) - Command line interface for webpack\n- [`webpack-dev-server`](https://github.com/webpack/webpack-dev-server) - Development server for webpack\n- [`webpack-merge`](https://github.com/survivejs/webpack-merge) - Simplify development/production configuration\n\n### Babel\n\n- [`@babel/core`](https://www.npmjs.com/package/@babel/core) - Transpile ES6+ to backwards compatible JavaScript\n- [`@babel/plugin-proposal-class-properties`](https://babeljs.io/docs/en/babel-plugin-proposal-class-properties) - Use properties directly on a class (an example Babel config)\n- [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) - Smart defaults for Babel\n\n### Jest\n\n- [`jest`](https://jestjs.io/) - Delightful JavaScript Testing\n- [`@testing-library/jest-dom`](https://github.com/testing-library/jest-dom#readme) - Custom jest matchers to test the state of the DOM\n- [`@testing-library/react`](https://testing-library.com/docs/react-testing-library/intro/) - Simple and complete React DOM testing utilities\n- [`@testing-library/user-event`](https://github.com/testing-library/user-event#readme) - Fire events the same way the user does\n\n### Loaders\n\n- [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) - Transpile files with Babel and webpack\n- [`sass-loader`](https://webpack.js.org/loaders/sass-loader/) - Load SCSS and compile to CSS\n- [`node-sass`](https://github.com/sass/node-sass) - Node Sass\n- [`css-loader`](https://webpack.js.org/loaders/css-loader/) - Resolve CSS imports\n- [`postcss-loader`](https://webpack.js.org/loaders/postcss-loader/) - Loader to process CSS with PostCSS\n- [`style-loader`](https://webpack.js.org/loaders/style-loader/) - Inject CSS into the DOM\n\n### Eslint\n\n- [`eslint-config-prettier`](https://www.npmjs.com/package/eslint-config-prettier) - Turns off all rules that are unnecessary or might conflict with Prettier.\n- [`eslint-import-resolver-alias`](https://www.npmjs.com/package/eslint-import-resolver-alias) - a simple Node behavior import resolution plugin for eslint-plugin-import, supporting module alias.\n- [`eslint-plugin-babel`](https://www.npmjs.com/package/eslint-plugin-babel) - an eslint rule plugin companion to babel-eslint.\n- [`eslint-plugin-import`](https://www.npmjs.com/package/eslint-plugin-import) - This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names.\n- [`eslint-plugin-prettier`](https://www.npmjs.com/package/eslint-plugin-prettier) - Runs prettier as an eslint rule.\n- [`eslint-plugin-react`](https://www.npmjs.com/package/eslint-plugin-react) - React specific linting rules for ESLint.\n- [`eslint-plugin-react-hooks`](https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks) - Enforces the Rules of React Hooks.\n\n### Plugins\n\n- [`clean-webpack-plugin`](https://github.com/johnagan/clean-webpack-plugin) - Remove/clean build folders\n- [`copy-webpack-plugin`](https://github.com/webpack-contrib/copy-webpack-plugin) - Copy files to build directory\n- [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin) - Generate HTML files from template\n- [`mini-css-extract-plugin`](https://github.com/webpack-contrib/mini-css-extract-plugin) - Extract CSS into separate files\n- [`optimize-css-assets-webpack-plugin`](https://github.com/NMFR/optimize-css-assets-webpack-plugin) - Optimize and minimize CSS assets\n- [`terser-webpack-plugin`](https://github.com/webpack-contrib/terser-webpack-plugin) - Optimize and minimize JavaScript\n- [`react-refresh-webpack-plugin`](https://github.com/pmmmwh/react-refresh-webpack-plugin) - HMR using React Fast Refresh\n- [`dotenv-webpack`](https://github.com/mrsteele/dotenv-webpack) - Supports dotenv and other environment variables\n- [`@svgr/webpack`](https://github.com/mrsteele/dotenv-webpack) - SVGR can be used as a webpack loader, this way you can import your SVG directly as a React Component.\n- [`babel-jest`](https://www.npmjs.com/package/babel-jest) - Babel jest plugin for transforimg `.js` and `.jsx` files\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faltafino%2Freact-webpack-5-tailwind-2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faltafino%2Freact-webpack-5-tailwind-2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faltafino%2Freact-webpack-5-tailwind-2/lists"}