I am continuing to explore the world of Svelte. Every day I am adding a little bit to my knowledge, and every day I am struggling with my limits. While I’m happy that I was able to find a way to create static pages on GitHub, my goal is to make it easier for me to develop some offline tools. Unlike other frameworks, the Svelte community is quite small and there is no, or at least I could not find, a template suitable for my needs. For this I decided to create my own template to integrate Svelte, Electron and TypeScript.
I start with the “rules of engagement”. I need a tool that:
- can work completely offline
- does not require internet connection to be installed
- can be updated both offline and online
- can be developed using TypeScript
- is relatively simple to develop and expand
I have already created a first template, without TypeScript: MEMENTO - Svelte & Electron. Starting from this I’m implementing the second version, which I’ll call MEMENTO - Svelte, Electron & TypeScript (I have a lot of imagination with the names, huh?).
This post is for me, and above all for the future me, to remember the steps I’m doing. And above all to remind me of some design choices that I’m making. Also because I think I will probably have to develop a third template (the final one? Perhaps) in which to integrate also SvelteKit. But better to take it one step at a time.
So, the first thing to do is to create a new project starting from Svelte:
npx degit sveltejs/template my-svelte-project
cd my-svelte-project
node scripts/setupTypeScript.js
npm install
I install the packages that I will need for Electron
npm i -D electron@latest
npm i -D typescript
npm i -D electron-builder
npm i electron-updater
npm i electron-reload
In this way I get:
- the latest version of ElectronJS
- TypeScript, for use with Electron
- electron-builder to create executable files to publish (for both Windows and Linux and macOS)
- electron-updater to easily update programs to the latest version
- electron-reload to update the contents of Electron’s “Browser Windows” during application development
Then I install nodemon to automatically restart Electron on any source code change. I also think this is useful when developing an application
npm i -D nodemon
After installing everything you need, it’s time to go and fix the structure of the project. There are currently 2 folders
public, where the compiled files of Svelte aresrc, where the Svelte source files are
But this structure doesn’t work very well. Not only because the Electron files are missing but also because I will run into problems later. So I rearrange files in another way:
First of all I create a dist folder: it will be used to contain the compiled files of Svelte and Electron. I move Svelte files (those created automatically) to dist\www.
Then I start editing the src folder. I create 2 additional folders inside it: electron and frontend. In the first I insert the files necessary to make Electron work (for the moment only index.ts and preload.ts). I use frontend instead for everything related to Svelte. But I add the tsconfig.json file.
I also add some files to the root of the project: icon.ico, license.txt, nodemon.json. The icon file and the license file will be needed when installing the app on a PC. I will use the nodemon configuration file when developing the program.
I haven’t written a line of code yet. But the time has come to put my hand to the keyboard and start tidying up some files. The first file to change is dist\www\index.html. I have to make a very simple change, fix the references of the imported files. So it goes like this:
to this:
Basically I removed the first slash from all the url and added some CSP settings.
Now I pass to the section dedicated to the frontend source files. Here I have created a file src\frontend\tsconfig.json: its purpose is to allow you to compile Svelte’s TypeScript files in a different way from how Electron’s ones are compiled (see stackoverflow: How to use multiple tsconfig files in vs-code?). Inserisco questo codice:
I’ll go back to src\electron later. Now I modify the other file related to the TypeScript configuration: the tsconfig.json file located at the root of the project. I write:
Then I configure nodemon.json by entering in the file:
In this way I intercept all the changes made to Electron files and I can automatically restart Electron.
Another file to fix is rollup.config.js. Generally the automatically created file is fine but in this case I changed the file structure: I have to make sure that the various commands refer to the correct folders.
There is one last file to configure, package.json. I begin with the general information:
Then I define the entry point of the program. I decided to put all the compiled files in dist, so I add a line to package.json:
Obviously I omit to report the various dependencies, they add themselves when I import the libraries from npm. I pass instead to the part dedicated to scripts. I need something to run nodemon.
Of course I also need to make sure I can run Electron with the compiled typescript files:
Then I need something to build the executable files and to publish them directly on GitHub:
Finally I have to configure the part dedicated to the creation of the files to be distributed:
Once the configuration is finished, I can finally move on to the code. I start with something simple: I use src\electron\index.ts to create a simple window in which to display a simple HTML file (created by Svelte). So, I start with:
It’s time for the first test; from the command line I type:
npm run nodemon
If I have done everything right an Electron window will appear with a simple “Hello World”:
The next test is to change the window size in index.ts, save the file and see what happens:
Nodemon restarts Electron and applies the changes to the window. But if I only change the Svelte part then Nodemon won’t do anything. This is a task for electron-reload:
If I’m not interested in working on the electron side I can just use:
npm run dev
This way I only monitor changes in files compiled with Svelte.
The next test is about the possibility of creating an executable file. So I run from the command line:
npm run out:win
I get the memento-svelte-electron-typescript Setup 0.0.1.exe file in the out directory.
To publish the app on GitHub I can use the command
npm run publish:win
Now is the time to start working on how to more closely integrate Electron with Svelte. And it’s time to go edit the src\preload.ts file. I need a mechanism to communicate with Electron starting with Svelte: I enable some inbound and outbound communication channels.
As a test I ask Electron for the version number of Chrome, Node and Electron. Then I use this information in a custom component. I add a function on src\electron\index.ts:
This way when I request requestSystemInfo from the component Electron will get the information I need and send it back with a message on the getSystemInfo channel.
So I create the src\frontend\Components\InfoElectron.svelte component:
I get this:
However, I admit that I have not explored yet this pattern well (and in general how to use TypeScript to create the input file for Electron): I recommend also reading Electron IPC Response/Request architecture with TypeScript by LogRocket.
The last thing to fix is the automatic update. To manage it, I import Notification from Electron and autoUpdater from electron-updater
To check for updates just use
This command generates some events that I can intercept. For the moment I need this 2:
This allows me to pop up a system notification when there is an update available. In case you decide to install it, just click on the notification to start the download. After that, when the download is finished, clicking on the notification starts the installation procedure.
Then I create the dev-app-update.yml file. This file is for testing automatic updates in development. I insert the references to the GitHub repository where I host the project:
That’s all for today.
