My React 17 Boilerplate (with Webpack 5, Tailwind 2)

#javascript #react #showdev #tailwindcss

I published my first React Boilerplate with React 17, Tailwind 2, using babel, sass, with a hot dev server and an optimized production build.
Any feedback is welcome :-)

Looking for a React Job?

Checkout the React Jobs Board with OnSite and Remote React Jobs

Updated (newest first):

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
2 PR's accepted

Github repo

Installation

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

Usage

Development server

yarn start / npm start

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

Production build

 yarn build / npm run build

Features

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
cross-env - Cross platform 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

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.