altafino / React Webpack 5 Tailwind 2
Licence: mit
React 17 Boilerplate with Webpack 5, Tailwind 2, using babel, SASS/PostCSS, HMR, dotenv and an optimized production build
Stars: ✭ 155
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Webpack 5 Tailwind 2
Electron React Webpack Boilerplate
Minimal Electron, React, PostCSS and Webpack boilerplate to help you get started with building your next app.
Stars: ✭ 312 (+101.29%)
Mutual labels: webpack, boilerplate-template, boilerplate
Frontend Webpack Boilerplate
Simple starter webpack 5 project template supporting SASS/PostCSS, Babel ES7, browser syncing, code linting. Easy project setup having multiple features and developer friendly tools.
Stars: ✭ 242 (+56.13%)
Mutual labels: webpack, boilerplate-template, boilerplate
Workflow Reactjs
My workflow with ReactJS + Webpack 3+
Stars: ✭ 150 (-3.23%)
Mutual labels: webpack, boilerplate-template, boilerplate
Html Sass Babel Webpack Boilerplate
Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload
Stars: ✭ 35 (-77.42%)
Mutual labels: webpack, boilerplate-template, boilerplate
Universal Native Boilerplate
Build apps for every native platform with React and React Native
Stars: ✭ 131 (-15.48%)
Mutual labels: webpack, boilerplate
Webpack Starter
✨ A lightweight foundation for your next webpack based frontend project.
Stars: ✭ 1,745 (+1025.81%)
Mutual labels: webpack, boilerplate
React Pages Boilerplate
Deliver react + react-router application to gh-pages
Stars: ✭ 134 (-13.55%)
Mutual labels: webpack, boilerplate
Eleventy Starter Boilerplate
🚀 Eleventy Starter is production-ready with SEO-friendly for quickly starting a blog. ⚡ Built with Eleventy, ESLint, Prettier, Webpack, PostCSS, Tailwind CSS and Netlify CMS (optional).
Stars: ✭ 139 (-10.32%)
Mutual labels: webpack, boilerplate
React Redux Graphql Apollo Bootstrap Webpack Starter
react js + redux + graphQL + Apollo + react router + hot reload + devTools + bootstrap + webpack starter
Stars: ✭ 127 (-18.06%)
Mutual labels: webpack, boilerplate
Wp Tailwind
A WordPress starter theme that utilizes Tailwind + PurgeCSS.
Stars: ✭ 135 (-12.9%)
Mutual labels: webpack, tailwindcss
Project Webcube
Continuously updated JS infrastructure for modern web dev
Stars: ✭ 141 (-9.03%)
Mutual labels: webpack, boilerplate
Koa React Isomorphic
Boilerplate for Koa & React
Stars: ✭ 128 (-17.42%)
Mutual labels: webpack, boilerplate
Create Elm App
🍃 Create Elm apps with zero configuration
Stars: ✭ 1,650 (+964.52%)
Mutual labels: webpack, boilerplate
Sage
WordPress starter theme with a modern development workflow
Stars: ✭ 11,531 (+7339.35%)
Mutual labels: webpack, tailwindcss
Redux React Starter
DEPRECATED use the new https://github.com/didierfranc/react-webpack-4
Stars: ✭ 137 (-11.61%)
Mutual labels: webpack, boilerplate
Js Stack Boilerplate
Final boilerplate code of the JavaScript Stack from Scratch tutorial –
Stars: ✭ 145 (-6.45%)
Mutual labels: webpack, boilerplate
Awesome Chrome Extension Boilerplate
Use react + typescript + webpack to enhance your chrome extension development experience
Stars: ✭ 146 (-5.81%)
Mutual labels: webpack, boilerplate
React Redux Styled Hot Universal
react boilerplate used best practices and focus on performance
Stars: ✭ 147 (-5.16%)
Mutual labels: webpack, boilerplate
Serverless Prisma
AWS Serverless Prisma Boilerplate
Stars: ✭ 126 (-18.71%)
Mutual labels: webpack, boilerplate
react-webpack-5-tailwind-2
React 17 Boilerplate with React 17, Webpack 5, Tailwind 2, HMR, using babel, sass, with a hot dev server and an optimized production build
Maintained by Altafino - Full-Stack Go/JS Development
Last Changes (the 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
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)
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
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. -
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].