Skip to content

Use Snowpack and esbuild for Electron app development

License

Notifications You must be signed in to change notification settings

karolis-sh/electron-snowpack

Repository files navigation

Electron Snowpack

npm version Node.js CI License: MIT

Supercharged Electron application development with Snowpack and esbuild

Getting Started

  • npx electron-snowpack --help

Check out the examples folder for the common use cases. For further guidance read the Snowpack and Electron docs.

Features

  • ✅ esbuild for main (TypeScript, Live Reload)
  • ✅ Snowpack for renderer (TypeScript, HMR + Fast Refresh, plugins, etc.)
  • .env variables
  • ✅ Ability to extend snowpack.config.js and tsconfig.json
  • ✅ Config preset for electron-builder
  • 🚧 Minification (➕ main, ➖ renderer)

Snowpack

Snowpack will be used as a development server and bundler for your public static files and src/renderer code. To setup just extend your snowpack.config.js:

module.exports = {
  extends: 'electron-snowpack/config/snowpack.js',
};

Environment Variables

Built-in support for .env files (just as @snowpack/plugin-dotenv):

  • .env.NODE_ENV.local
  • .env.NODE_ENV
  • .env

NODE_ENV, MODE and all SNOWPACK_* environment variables will be bundled with the built app (all on main and a subset for renderer). See Snowpack's Environment Variables documentation to learn more.

Also you can adjust the way electron-snowpack itself works via environment variables:

  • ELECTRON_SNOWPACK_PORT - the default Snowpack port

TypeScript

For a minimal setup to get TypeScript working for renderer have a root tsconfig.json:

{
  "extends": "electron-snowpack/config/tsconfig.json",
  "include": ["src"]
}

Electron Builder

electron-builder is a separate complete solution to package and build a ready for distribution Electron app for macOS, Windows and Linux with “auto-update” support out of the box.

electron-snowpack provides a config starter that will just work with the builder. Update your electron-builder setup in package.json:

{
  "build": {
    "extends": "electron-snowpack/config/electron-builder.js"
  }
}