Electron Sveltekit Starter

Starter template for Electron + Svelte + TailwindCSS apps.

Based on Svelte + TailwindCSS 2.0 starter.

Features:

• Electron 15
• Svelte 3
• TailwindCSS 2
• Rollup
• SCSS support

There's also a simple dark/light mode switch, and a surprise button 👇

🚨 Limitations

In development mode (running npm run dev / yarn dev), the CSS bundle includes all of TailwindCSS and weighs in at ~6.8MB. You don't want to deploy this to production.

In production mode (running npm run build / yarn build), all the unused CSS styles are purged, dropping the bundle to a much more manageable size (~7KB in this case). However, I haven't yet found a way to stop Tailwind from purging dynamic Svelte classes (such as class:dark or class:from-blue-700={$dark}).

As a result, the production bundle won't contain such dynamic classes. To get around this, in tailwind.config.js, under purge, add an options object with a safelist array containing all the classes you wish to protect from purging:

purge: {
    enabled: production,
    content: [
        './src/**/*.html',
        './src/**/*.svelte',
    ],
    options: {
        safelist: [
            'border-blue-300',
            'border-orange-500',
            'border-pink-100',
            'border-pink-900',
            'dark',
            'from-blue-500',
            'from-blue-700',
            'from-yellow-200',
            'text-pink-100',
            'text-pink-900',
            'to-blue-800',
            'to-pink-300',
            'to-purple-800',
            'to-yellow-500',
        ],
    }
},

Get started

Install the dependencies...

cd svelte-app
npm install
# or
yarn install

...then start Electron in development mode:

npm run electron:dev
# or
yarn electron:dev

Building for production

To build for the current platform:

npm run electron:build
# or
yarn electron:build

Platform-specific builds:

# Mac
yarn electron:build:mac

# Windows
yarn electron:build:win

# Linux
yarn electron:build:linux

App icons

Follow these instructions to generate application icons for each platform (Mac/Windows/Linux).

First, install the electron-icon-maker utility globally.

Next, in your project folder, run the electron-icon-maker command to create the icon sets:

electron-icon-maker --input=generic-app-icon.png
# Creates the following folders:
# ./icons/mac
# ./icons/png
# ./icons/win

If you want the icons folder to be created inside another folder (such as src), modify the command as follows:

electron-icon-maker --input=generic-app-icon.png --output=./src

I like to flatten the icon structure, so that all the icons are in ./icons.

Finally, configure the icons for each platform in electron-builder.yml.