Skip to content

kkerti/vite-svelte-electron

Repository files navigation

Svelte + Vite + Electron

Clean example that combines svelte vite and electron.

Start with: npm start

Vite builds the renderer and watches for changes. Meanwhile, electron starts up and loads the index.html file built.

Build with npm run build

Vite statically builds the renderer into src/renderer/dist, then electron-builder packages up the build into an executable.

Enjoy!

Structure

  • src/index.js - Electron entrypoint for app
  • src/renderer/index.html - Renderer entrypoint for electron

Reproduction Steps

To redo this repo:

  1. npm init vite@latest, select svelte.
  2. Copy public, src, index.html to src/renderer. You can remote the fluff like .vscode.
  3. Add more dependencies npm install --save-dev electron electron-builder concurrently
  4. Edit package.json:
    • delete line with "type": "module",
    • add "main": "src/index.js",
    • add scripts:
      "scripts": {
        "start": "NODE_ENV=development concurrently 'npm run web:watch' 'sleep 1 && npm run electron:start'",
        "web:watch": "vite",
        "electron:start": "electron src",
        "build": "vite build && electron-builder"
      }
    • add build options for electron-builder:
      "build": {
        "files": [
          "src/**/*"
        ]
      }
  5. Create src/index.js. Follow getting started guide in Electron and when creating the window, use something like this:
    if (process.env.NODE_ENV !== 'development') {
      // Load production build
      win.loadFile(`${__dirname}/renderer/dist/index.html`)
    } else {
      // Load vite dev server page 
      console.log('Development mode')
      win.loadURL('http://localhost:3000/')
    }

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published