Skip to main content

​
Development Setup

1

Install Dependencies

Install all required npm packages including Electron, React, and CodeMirror:
npm install
This also runs electron-builder install-app-deps via the postinstall script to install native dependencies.
2

Start Development Server

Run the Vite development server for hot module reloading:
npm run dev
The dev server starts at http://localhost:5173 by default.
3

Launch Electron (Optional)

To test in the Electron environment during development:
npm run electron:dev
This builds the Electron main process and starts the app.
The app detects whether it’s running in Electron. If you only run npm run dev, you’ll see a message to launch Electron for full functionality.

​
Build Commands

All build commands are defined in package.json:9-16.

​
Development Builds

npm run dev

​
Production Builds

1

Build Renderer Process

Compile TypeScript and build the React app with Vite:
npm run build
This runs:
  1. tsc - Type checking
  2. vite build - Bundles React app to dist/
The build output goes to the dist/ directory.
2

Build Main Process

Compile the Electron main process and preload script:
npm run build:electron
This executes build-electron.mjs which uses esbuild to bundle:
  • electron/main.ts → dist-electron/main.cjs
  • electron/preload.ts → dist-electron/preload.cjs
3

Package Application

Create distributable packages for your platform:
npm run electron:build
This command:
  1. Builds the renderer (vite build)
  2. Builds the main process (build:electron)
  3. Runs electron-builder to create installers

​
Electron Build Process

​
Build Configuration

The Electron Builder configuration is defined in package.json:66-85: 
{
  "build": {
    "appId": "com.codeeditorthing.app",
    "productName": "Code Editor Thing",
    "directories": {
      "output": "dist-electron"
    },
    "mac": {
      "target": "dmg"
    },
    "files": [
      "dist/**/*",
      "dist-electron/main.cjs",
      "dist-electron/preload.cjs"
    ]
  }
}

​
Build Outputs

dist/

Renderer ProcessVite-bundled React application:
  • index.html
  • JavaScript bundles
  • CSS files
  • Assets

dist-electron/

Main Process & PackagesElectron files and installers:
  • main.cjs - Main process
  • preload.cjs - Preload script
  • Platform-specific installers (after electron:build)

​
Platform-Specific Builds

​
macOS

npm run electron:build
Produces:
  • dist-electron/Code Editor Thing.dmg - DMG installer
  • dist-electron/mac/Code Editor Thing.app - Application bundle

​
Windows

Electron Builder auto-detects the platform. On Windows, it creates:
  • .exe installer
  • Unpacked application directory
Modify the build.mac section in package.json to build.win for Windows-specific settings.

​
Linux

Add Linux configuration to package.json: 
"linux": {
  "target": ["AppImage", "deb"]
}

​
Build Workflow

​
Development vs Production

AspectDevelopmentProduction
RendererVite dev server (HMR)Static files in dist/
Main ProcessRebuilt on changesPre-built .cjs files
URLhttp://localhost:5173file:// protocol
DevToolsAuto-openDisabled
Source MapsEnabledOptional

​
Optimization Tips

1

Code Splitting

Vite automatically splits vendor code. Large dependencies like CodeMirror are bundled separately for better caching.
2

Tree Shaking

Import only what you need from libraries:
// Good
import { EditorView } from "codemirror"

// Avoid
import * as CM from "codemirror"
3

Asset Optimization

Vite optimizes assets during build. Place images in src/assets/ to benefit from automatic optimization.
4

ASAR Packaging

The app uses ASAR archives ("asar": true) to package files into a single archive for faster startup.

​
Troubleshooting

Run type checking separately to see detailed errors:
npx tsc --noEmit
Check the Electron dev tools console. Common issues:
  • Preload script path is incorrect
  • Vite dev server isn’t running
  • Content Security Policy blocking resources
Rebuild native dependencies for Electron:
npm run postinstall
This re-runs electron-builder install-app-deps.
Ensure all files are present:
  • dist/ directory exists (run npm run build)
  • dist-electron/main.cjs exists (run npm run build:electron)
  • No path errors in package.json build config

​
Next Steps

Architecture

Understand the codebase structure

Contributing

Learn how to contribute changes

Build docs developers (and LLMs) love

Get started for freeTalk to us