electron-svelte-typescript

Template for apps written with Electron, Svelte and Typescript.

The template does hot module replacement and reloads electron on main process file changes out of the box. It also follows some good security practices, such as Content-Security-Policy meta tags in html, context isolation set to true, remote modules set to false etc.

Get started

To create a new project based on this template you must first clone the repo and then delete the folder .git:

git clone https://github.com/fuzzc0re/electron-svelte-typescript MyAppName
cd MyAppName
rm -rf .git

Note that you will need to have Node.js installed.

Install the dependencies...

npm i

...then start coding in dev mode:

npm start

The start script spins up Rollup in watch mode with a Rollup-Plugin-Serve instance serving the frontend static files on localhost:5000 and a nodemon server to watch for file changes related to the main electron process.

Electron loads its html content from localhost:5000 in dev mode and from build/public/index.html in production mode.

The Svelte development happens in src/frontend and the Electron development in src/electron.

Edit a file in src, save it, and see the changes in the app.

Building and running in production mode

To create an optimized build of the app:

npm run build

To create a distributable version of the app with electron-builder:

npm run dist

In production mode, sourcemaps are disabled, html css and js files are compressed and mangled, devTools are disabled and CSP allows only same origin scripts to load.

Contributing

In order to lint the code you run:

npm run lint

In order to prettify the code you run:

npm run format

You should run the following command, which runs lint and then format, on your contributed code:

npm run preversion

before creating a pull request.

All suggestions are welcome!

Licence

This project is licensed under the terms described in LICENSE.