Electron-Svelte Template

Get started creatinbg modern Electron/Svelte/Typescript with this templatw which provides hotreloading, electron-builder, svelte, and typescript setup. This template is a great starting off point for building your next project. The frontend and backend code are seperated and can easily be worked on independently of one another. Furthermore, with hotreloading of not only the svelte but also all typescript this makes development a breeze.

To get started you will need to install dependecies in both the root of the project and the renderer/ folder where all of the ftontend code is contained.

Folder structure:

• /
  • readme.md
  • package.json
  • electron (Contains all the electron specific code of the application)
    • app.ts
    • preload.ts (Sets up comminication between renderer and main process in electron (IPC))
    • tsconfig.json (Electron specific tsconfig file.)
    • ...
  • renderer (Contains all code/configs which are required for the frontend of your app)
    • src
    • vite.config.json
    • package.json
    • ...

Commands

• npm run dev :

  • 프론트엔드(Svelte/Vite): Vite dev 서버(HMR)로 소스 변경 시 자동 반영
  • Electron 메인 프로세스: electron-reload로 소스 변경 시 자동 재시작
  • Electron TypeScript: tsc --watch로 main process 코드 변경 시 자동 빌드
  • 모든 변경사항이 실시간 반영됩니다. (별도 수동 빌드/재시작 불필요)

• npm run package :

  • electron-builder로 앱을 패키징합니다.