GitHub - altafino/react-webpack-5-tailwind-2: React 17 Boilerplate with Webpack 6, Tailwind 2, using babel, SASS/PostCSS, HMR, dotenv and an optimized production build

unmaintained

I 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. But I check and can accept pull requests.

Visit my Job Board for React Jobs

react-webpack-6-tailwind-2

React 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

Demo

Maintained by Altafino - Full-Stack Go/JS Development

Last Changes (the newest first):

• added full support for unit testing (with file mocks) using Jest
• added SVGR as a webpack loader to import your SVG directly as a React Component.
• added build-staging script. same as build but using .env.staging
• added dotenv-webpack to handle process.env.VARS
• added Prettier
• added react-refresh-webpack-plugin for HMR

Installation

git clone https://github.com/altafino/react-webpack-5-tailwind-2.git
cd react-webpack-5-tailwind-2
yarn / npm i

To use it for your own project the easiest way is to use the green Template Button on top right of this repo on Github.

Usage

Development server

You can view the development server at localhost:3000. (change port in ./config/webpack.dev.js)

Unit Test

Production build

 yarn build / npm run build

Features

• React 17
• Webpack 6
• Tailwind 2
• Jest 27
• PostCss
• Babel
• Sass
• Eslint
• Husky ( tks @rubinj30 )

Dependencies

webpack

• webpack - Module and asset bundler.
• webpack-cli - Command line interface for webpack
• webpack-dev-server - Development server for webpack
• webpack-merge - Simplify development/production configuration

Babel

• @babel/core - Transpile ES6+ to backwards compatible JavaScript
• @babel/plugin-proposal-class-properties - Use properties directly on a class (an example Babel config)
• @babel/preset-env - Smart defaults for Babel

Jest

• jest - Delightful JavaScript Testing
• @testing-library/jest-dom - Custom jest matchers to test the state of the DOM
• @testing-library/react - Simple and complete React DOM testing utilities
• @testing-library/user-event - Fire events the same way the user does

Loaders

• babel-loader - Transpile files with Babel and webpack
• sass-loader - Load SCSS and compile to CSS
• node-sass - Node Sass
• css-loader - Resolve CSS imports
• postcss-loader - Loader to process CSS with PostCSS
• style-loader - Inject CSS into the DOM

Eslint

• eslint-config-prettier - Turns off all rules that are unnecessary or might conflict with Prettier.
• eslint-import-resolver-alias - a simple Node behavior import resolution plugin for eslint-plugin-import, supporting module alias.
• eslint-plugin-babel - an eslint rule plugin companion to babel-eslint.
• 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.
• eslint-plugin-prettier - Runs prettier as an eslint rule.
• eslint-plugin-react - React specific linting rules for ESLint.
• eslint-plugin-react-hooks - Enforces the Rules of React Hooks.

Plugins

• clean-webpack-plugin - Remove/clean build folders
• copy-webpack-plugin - Copy files to build directory
• html-webpack-plugin - Generate HTML files from template
• mini-css-extract-plugin - Extract CSS into separate files
• optimize-css-assets-webpack-plugin - Optimize and minimize CSS assets
• terser-webpack-plugin - Optimize and minimize JavaScript
• react-refresh-webpack-plugin - HMR using React Fast Refresh
• dotenv-webpack - Supports dotenv and other environment variables
• @svgr/webpack - SVGR can be used as a webpack loader, this way you can import your SVG directly as a React Component.
• babel-jest - Babel jest plugin for transforimg .js and .jsx files