Create an Electron and React Boilerplate

Last updated on Jul 10, 2025

Electron lets you build desktop apps using web stuff — like JavaScript, HTML, and CSS. It works by bundling a web browser (Chromium) and some behind-the-scenes tools (Node.js) into your app. That way, you only need to write your code once, and it’ll run on Windows, Mac, and Linux — without needing to learn how to build apps the traditional way for each system.

✅ How to Get Started

pnpm create @quick-start/electron is a shortcut that uses a community-maintained starter project to scaffold an Electron boilerplate.

pnpm create: Tells pnpm to run a project scaffolding tool.
@quick-start/electron: Is the package that contains the boilerplate generator for Electron projects.
It creates a folder with the full Electron app structure, so you can start building immediately.

🧪 Step-by-Step: Create an Electron Project

1. Run the command:

pnpm create @quick-start/electron

2. Answer the prompts:

You’ll be asked things like:

Project name: … electron-react
✔ Select a framework: › react
✔ Add TypeScript? … No / Yes
✔ Add Electron updater plugin? … No / Yes
✔ Enable Electron download mirror proxy? … No / Yes

This gives you control over:

Project name
TypeScript or JavaScript
Whether to include frontend frameworks like Vue, React, or Svelte

.
├── build
│   ├── entitlements.mac.plist
│   ├── icon.icns
│   ├── icon.ico
│   └── icon.png
├── dev-app-update.yml
├── electron-builder.yml
├── electron.vite.config.ts
├── eslint.config.mjs
├── package.json
├── README.md
├── resources
│   └── icon.png
├── src
│   ├── main
│   │   └── index.ts
│   ├── preload
│   │   ├── index.d.ts
│   │   └── index.ts
│   └── renderer
│       ├── index.html
│       └── src
│           ├── App.tsx
│           ├── assets
│           │   ├── base.css
│           │   ├── electron.svg
│           │   ├── main.css
│           │   └── wavy-lines.svg
│           ├── components
│           │   └── Versions.tsx
│           ├── env.d.ts
│           └── main.tsx
├── tsconfig.json
├── tsconfig.node.json
└── tsconfig.web.json

📁 What You Get

After it's done, your project folder (electron-react) will include:

main.js or main.ts → Electron's main process
A Vite frontend (if selected) inside src/
Preconfigured package.json scripts like:

{
  "name": "electron-react",
  "version": "1.0.0",
  "description": "An Electron application with React and TypeScript",
  "main": "./out/main/index.js",
  "author": "example.com",
  "homepage": "https://electron-vite.org",
  "scripts": {
    "format": "prettier --write .",
    "lint": "eslint --cache .",
    "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
    "typecheck:web": "tsc --noEmit -p tsconfig.web.json --composite false",
    "typecheck": "npm run typecheck:node && npm run typecheck:web",
    "start": "electron-vite preview",
    "dev": "electron-vite dev",
    "build": "npm run typecheck && electron-vite build",
    "postinstall": "electron-builder install-app-deps",
    "build:unpack": "npm run build && electron-builder --dir",
    "build:win": "npm run build && electron-builder --win",
    "build:mac": "electron-vite build && electron-builder --mac",
    "build:linux": "electron-vite build && electron-builder --linux"
  },
  "dependencies": {
    "@electron-toolkit/preload": "^3.0.1",
    "@electron-toolkit/utils": "^4.0.0",
    "electron-updater": "^6.3.9"
  },
  "devDependencies": {
    "@electron-toolkit/eslint-config-prettier": "^3.0.0",
    "@electron-toolkit/eslint-config-ts": "^3.0.0",
    "@electron-toolkit/tsconfig": "^1.0.1",
    "@types/node": "^22.14.1",
    "@types/react": "^19.1.1",
    "@types/react-dom": "^19.1.2",
    "@vitejs/plugin-react": "^4.3.4",
    "electron": "^35.1.5",
    "electron-builder": "^25.1.8",
    "electron-vite": "^3.1.0",
    "eslint": "^9.24.0",
    "eslint-plugin-react": "^7.37.5",
    "eslint-plugin-react-hooks": "^5.2.0",
    "eslint-plugin-react-refresh": "^0.4.19",
    "prettier": "^3.5.3",
    "react": "^19.1.0",
    "react-dom": "^19.1.0",
    "typescript": "^5.8.3",
    "vite": "^6.2.6"
  },
  "pnpm": {
    "onlyBuiltDependencies": [
      "electron",
      "esbuild"
    ]
  }
}

▶️ Run the App

cd electron-vue
pnpm install
pnpm dev

This:

Starts the Vite dev server
Launches Electron with the app UI

▶️ Install Tailwind CSS

 pnpm install tailwindcss @tailwindcss/vite

▶️ Config Vite Plugins

Add the @tailwindcss/vite plugin to the Vite configuration, electron.vite.config.ts.

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'

import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src')
      }
    },
    plugins: [
      react(),
      tailwindcss(),
    ]
  }
})

▶️ Import Tailwind CSS

Add an @import "tailwindcss"; to ./src/prerender/src/assets/main.css CSS file. For example,

@import "tailwindcss";

@import './base.css';

body {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-image: url('./wavy-lines.svg');
  background-size: cover;
  user-select: none;
}
...

▶️ Start Testing Tailwind CSS in the Code

Add the Hello Tailwind CSS! to ./src/prerender/src/main.ts

import Versions from './components/Versions'
import electronLogo from './assets/electron.svg'

function App(): React.JSX.Element {
  const ipcHandle = (): void => window.electron.ipcRenderer.send('ping')

  return (
    <>
      <img alt="logo" className="logo" src={electronLogo} />
      <div className="creator">Powered by electron-vite</div>
      <div className="text">
        Build an Electron app with <span className="react">React</span>
        &nbsp;and <span className="ts">TypeScript</span>
      </div>
      <p className="tip">
        Please try pressing <code>F12</code> to open the devTool
      </p>
      <div className="actions">
        <div className="action">
          <a href="https://electron-vite.org/" target="_blank" rel="noreferrer">
            Documentation
          </a>
        </div>
        <div className="action">
          <a target="_blank" rel="noreferrer" onClick={ipcHandle}>
            Send IPC
          </a>
        </div>
      </div>
      <h1 class="text-3xl font-bold underline">
        Hello Tailwind CSS!
      </h1>        
      <Versions></Versions>
    </>
  )
}

export default App

▶️ Run the Testing

pnpm dev