twds

react-webpack-5-tailwind-2

React 17 Boilerplate with React 17, Webpack 5, 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

yarn start / npm start

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

Unit Test

 yarn test / npm test

Production build

 yarn build / npm run build

Features

• React 17
• Webpack 5
• Tailwind 2
• Jest 26
• 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