How to Make Your Very First Desktop App With Electron and Svelte

Creating a Reminder App from Scratch

Reminder app created with Electron and Svelte
How to Make Your Very First Desktop App With Electron and Svelte
Mockup of the electron, svelte app

What is Electron?

Setting Up Svelte

Adding SCSS support

How to add scss support to Svelte
Import the SCSS plugin, then call it at the end of your plugins array.

Setting Up Electron

resources cannot be loaded due to wrong path
The default Svelte app
Spawning the child process at the end of rollup.config.js
Spawning the child process at the end of rollup.config.js

Adding hot reload

Testing out hot reload in electron

Setting Up The Store

Creating The Sidebar

The current state of the app after adding the sidebar

Adding the sidebar controller

Creating new mementoes in Svelte
Selecting a memento sets its state to active

Creating The Main Frame

The project structure for the main component

Adding the layout for the notification card

Opening a memento in Svelte

Handle images

Handling images in Svelte

Removing memento

Adding the settings template

Preview notifications

Saving memento

we need to convert date and time to a cron pattern
cron uses months from 0–11. Hence we need to -1 from the current date

Generating cron job patterns

Scheduling jobs

Final Touches

Let’s hide the application menu in electron
We want the application’s menu to be hidden

Hide application in system tray

Adding the application into the task bar

Conclusion

Get full access to all stories on Medium
Learn how to create an executable build from your Electron app

A note from JavaScript In Plain English

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ferenc Almasi

💻 Frontend dev • 🐦 Tweets webtips on twitter • ✍️ Writes on webtips.dev • 💛 Support on medium.com/@ferencalmasi/membership