Electron React Webpack Boilerplate

Minimal Electron, React, PostCSS and Webpack boilerplate to help you get started with building your next app.
Alternatives To Electron React Webpack Boilerplate
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Frontend Webpack Boilerplate662
a day ago53June 06, 202210mitHTML
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.
Electron React Webpack Boilerplate402
12 days ago40March 06, 202116mitJavaScript
Minimal Electron, React, PostCSS and Webpack boilerplate to help you get started with building your next app.
Webpack Typescript React146
a year ago2June 09, 2022mitJavaScript
Webpack 5 boilerplate with support of most common loaders and modules (see tags and description)
7 months ago52July 05, 2022mitHTML
⭐ Production-ready website boilerplate made with webpack 5, modern JS (via Babel 7) & Sass
Typescript Webpack Boilerplate32
16 days ago1mitJavaScript
A starter frontend boilerplate built with TypeScript/JavaScript, Webpack 5, PostCSS, Jest, ESLint, and Stylelint.
React Project9
2 months ago13TypeScript
Awesome react project template.
a year agomitJavaScript
A mixed TypeScript/JavaScript Webpack boilerplate with Express.
React Starter Kit6
2 months ago14mitTypeScript
Duy's React Starter Kit based on Create React App
9 days agomitElm
A Boilerplate to start a elm project with every thing you will need, like: SPA, Bundler, Css(things), compatibility and a way of deploying your site.
Vue And Friends Boilerplate4
4 years agoCSS
Vuejs boilerplate with add-ons.
Alternatives To Electron React Webpack Boilerplate
Select To Compare

Alternative Project Comparisons

Dependency Status devDependency Status MIT License Current release

Paypal Patreon buymeacoffee

Minimal Electron, React and Webpack boilerplate

Minimal Electron, React, PostCSS and Webpack boilerplate to help you get started with building your next app.

Table of contents


Clone this repo

git clone https://github.com/alexdevero/electron-react-webpack-boilerplate.git

Install dependencies

npm install




Run the app

npm run start


yarn start

Build the app (automatic)

npm run package


yarn package

Build the app (manual)

npm run build


yarn build

Test the app (after npm run build || yarn run build)

npm run prod
yarn prod

Add Sass

Adding Sass to boilerplate requires updating webpack configs and adding necessary loaders.

  1. To webpack.build.config.js and webpack.dev.config.js add new object to rules:
  test: /\.scss$/,
  use: [
    { loader: 'style-loader' },
    { loader: 'css-loader' },
    { loader: 'sass-loader' }],
  include: defaultInclude
  1. Install additional loaders for sass, sass-loader and node-sass.

  2. Rename all CSS file to .scss.

Add TailwindCSS

If you don't want to do all these steps, you can clone This Repository and you are good to go.

Adding TainwindCSS to boilerplate requires adding all the dependencies listed on the tailwindcss website for create react app Official Guide. OR follow these steps

  1. install tailwindcss, postcss and autoprefixer.
npm install -D [email protected]:@tailwindcss/postcss7-compat [email protected]^7 [email protected]^9
  1. Install craco.
npm install @craco/craco
  1. Open package.json file, find start and build scripts under scripts.

  2. Add && craco start at the end in start and build scripts. You also have to add build-css script to build the CSS styles using tailwindCSS. "build-css": "npx tailwindcss build -o src/styles/main.css",. You can choose output folder of your own choice. Here are the three scripts after changing/adding.

"start": "cross-env NODE_ENV=development webpack serve --hot --host --config=./webpack.dev.config.js --mode development && craco start",
    "build": "cross-env NODE_ENV=production webpack --config webpack.build.config.js --mode production && craco build",
"build-css": "npx tailwindcss build  -o src/styles/main.css",
  1. Now, create craco.config.js file in your project at root of your project and add the following.
module.exports = {
  style: {
    postcss: {
      plugins: [
  1. Next, generate your tailwind.config.js file:
npx [email protected] init

This will create a minimal tailwind.config.js file at the root of your project.

  1. (Optional) Configure Tailwind to remove unused styles in production In your tailwind.config.js file, configure the purge option with the paths to all of your components so Tailwind can tree-shake unused styles in production builds:
  // tailwind.config.js
  module.exports = {
   purge: [],
   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
    variants: {
      extend: {},
    plugins: [],
  1. Add main.css file in app.js. Make sure you choose correct path for CSS file.
import '../styles/main.css' 
  1. You may have to run npm install [email protected] [email protected] [email protected] if you face different version issues.
  2. You can also check JIT Mode In TailwindCSS if you want to use Just In Time Mode.

Change app title

This boilerplate uses HTML Webpack Plugin to generate the HTML file of the app. Changing app title is possible only through webpack configs, webpack.build.config.js and webpack.dev.config.js. App title can be changed by adding objects of options.

In webpack.build.config.js:

plugins: [
  new HtmlWebpackPlugin({title: 'New app title '}),// Add this (line 41)
  new MiniCssExtractPlugin({
    // Options similar to the same options in webpackOptions.output
    // both options are optional
    filename: 'bundle.css',
    chunkFilename: '[id].css'
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
  new BabiliPlugin()

In webpack.dev.config.js:

plugins: [
  new HtmlWebpackPlugin({title: 'New app title '}),// Add this (line 36)
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('development')

Contact and Support

I want your feedback! Here's a list of different ways to me and request help:

If you feel generous and want to show some extra appreciation:

Buy me a coffee

Code of Conduct

Contributor Code of Conduct. By participating in this project you agree to abide by its terms.


MIT © Alex Devero.

Popular Postcss Projects
Popular Boilerplate Template Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Boilerplate Template