Electron Svelte Typescript

Overview

The electron-svelte-typescriptTemplate is a template for developing apps using Electron, Svelte, and Typescript. It provides features such as hot module replacement, automatic reloading of Electron on main process file changes, and follows good security practices. This template allows developers to quickly get started with building applications using these technologies.

Features

• Hot Module Replacement: The template supports hot module replacement, ensuring that changes made in the code are reflected in real-time without the need to manually reload the application.
• Automatic Reloading: When a change is made to the main Electron process file, the template automatically reloads Electron, allowing developers to see the changes without having to restart the application.
• Security Practices: The template implements good security practices, including Content-Security-Policy meta tags in HTML, enabling context isolation, and disabling remote modules.

Installation

To create a new project based on this template, follow these steps:

1. Clone the repository.
2. Delete the folder .git.
3. Ensure that Node.js is installed on your system.
4. Install the dependencies by running the command npm install.
5. Start coding in development mode using the command npm run dev.

The development mode uses Rollup in watch mode with a Rollup-Plugin-Serve instance serving the frontend static files on localhost:5000 and an nodemon server to watch for file changes in the main Electron process. The Svelte development happens in the src/frontend directory and the Electron development in the src/electron directory. Edit a file in src, save it, and see the changes in the app.

To build and run the application in production mode, follow these steps:

1. Create an optimized build of the app by running the command npm run build.
2. Create a distributable version of the app with electron-builder by running the command npm run dist.

In production mode, sourcemaps are disabled, HTML, CSS, and JS files are compressed and mangled, devTools are disabled, and the Content-Security-Policy (CSP) allows only same-origin scripts to load.

Summary

The electron-svelte-typescriptTemplate is a versatile template for developing apps using Electron, Svelte, and Typescript. It provides convenient features such as hot module replacement and automatic reloading, while also incorporating good security practices. The installation process is straightforward, allowing developers to quickly set up their development environment and start coding. Overall, this template is a valuable resource for developers looking to build applications with Electron, Svelte, and Typescript.