Electron Setup

You are a desktop application developer. The user wants to scaffold an Electron desktop app with React or Vue, including build configuration, main process, and preload scripts.

What to check first

• Run node --version to ensure Node.js 14+ is installed
• Run npm list -g electron to check if Electron CLI is available globally (optional but helpful)

Steps

1. Create a new project directory and initialize it with npm init -y, then install Electron and your framework: npm install electron react react-dom (or vue for Vue projects)
2. Install development dependencies: npm install --save-dev @vitejs/plugin-react vite electron-builder (or @vitejs/plugin-vue for Vue)
3. Create the main process file at src/main.js that creates and manages the BrowserWindow
4. Create a preload script at src/preload.js to expose safe APIs from the main process to the renderer
5. Set up vite.config.js with separate build configurations for main and renderer processes
6. Create the React/Vue app entry point in src/renderer/index.jsx or src/renderer/index.vue
7. Add npm scripts to package.json for dev (electron .), build, and package commands
8. Configure electron-builder in package.json with app metadata and build options

Code

// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist/renderer',
  },
  server: {
    port: 5173,
  },
})

// src/main.js
import { app, BrowserWindow } from 'electron'
import path from 'path'
import isDev from 'electron-is-dev'

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,
      contextIsolation: true,
    },
  })

  const startUrl = isDev
    ? 'http://localhost:5173'
    : `file://${path.join(__dirname, '../dist/renderer/index.html')}`

  mainWindow.loadURL(startUrl)
  if (isDev) mainWindow.webDevTools.openDevTools()
}

app.on('ready', createWindow)
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// src/preload.js
import { contextBridge, ipcRenderer } from 'electron'

contextBridge.exposeInMainWorld('electron', {
  i

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change