karolis-sh / electron-snowpack

Use Snowpack and esbuild for Electron app development

Electron Snowpack

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"
  }
}