DEV Community

Cover image for My React 17 Boilerplate (with Webpack 5, Tailwind 2)
Stefan Wuthrich
Stefan Wuthrich

Posted on • Updated on

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

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 :-)

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
Enter fullscreen mode Exit fullscreen mode

Usage

Development server

yarn start / npm start
Enter fullscreen mode Exit fullscreen mode

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

Production build

 yarn build / npm run build
Enter fullscreen mode Exit fullscreen mode

Features

Dependencies

webpack

Babel

Loaders

Eslint

Plugins

Cheers
Stefan - Fullstack Developer - Go/JS

Discussion (6)

Collapse
dendihandian profile image
Dendi Handian • Edited on

I mistook WP as WordPress here

Collapse
golangch profile image
Stefan Wuthrich Author

Fixed ;-)

Collapse
hamzahsn profile image
A.Hamza

I thought that webpack 5 already comes with terser plugin so you don't have to add it to your project ;)

Collapse
golangch profile image
Stefan Wuthrich Author
  • added dotenv-webpack to handle process.env.VARS
  • added react-refresh-webpack-plugin for HMR
Collapse
golangch profile image
Stefan Wuthrich Author

Got first PR which add Husky Lint Hook

Collapse
ujjwalkr profile image
Ujjwal Kumar

cool stuff