Soteria Admin Dashboard

Features:

• Electron
• Svelte
• TailwindCSS
• Rollup
• SCSS support

Get started

Install the dependencies...

cd soteria-admin
npm install
# or
yarn install

...then start Electron in development mode:

npm run electron:dev
# or
yarn electron:dev

Build and Publish Your Application:

Now, you can build your Electron app using electron-forge:

npm run make
# or 
yarn make

After building, you can publish your app using:

npm run publish 
# or 
yarn publish

This will publish your app to the specified provider (e.g., GitHub) and make it available for auto-updates.

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.

Versioning

Use these three npm commands that automatically increments the package version and creates a git commit along with a corresponding version tag.

• npm version patch — for releases with only bug fixes
• npm version minor — for releases with new features w/ or w/o bug fixes
• npm version major — for major releases or breaking features

Remember to push your commit with --tag attribute i.e git push origin main --tags

🚨 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',
        ],
    }
},