This is a template for developing an app in TypeScript/Electron, Svelte and Tailwind CSS with hot-reloading.
The purpose of this template is enabling hot-reloading for every technology in the app:
- Watch and constantly recompile the TypeScript/Electron client with
tsc-watch
. - Watch and constantly rebundle the Svelte app in
/renderer
with Rollup. - Watch and constantly reload the TypeScript/Electron client with
electron-reload
. - Generate the Tailwind CSS build file by running it through PostCSS once.
This dev setup will watch on .ts
files (TypeScript/Electron client), .js
files (Svelte frontend) and index.html
.
- Clone repo.
- Install dependencies:
npm install
- Generate Tailwind CSS build file:
npm run css
- Kickstart the hot-reload cycle:
npm run start
npm run start
bundles the Svelte app intobuild/client/public/bundle.js
withrollup
. Changes to the Svelte app will trigger rebundling.rollup
spawns a child process to compile the TypeScript/Electron client files intobuild/client/
withtsc-watch
. Changes to the TypeScript/Electron client will trigger recompilation.- The client imports
client/utils/hotReload
to hot reload itself withelectron-reload
whenever changes occur inbuild/client/renderer/bundle.js
(bundled Svelte app) or inclient/public/index.html
.
© 2020 Iván Ovejero
Distributed under the MIT License. See LICENSE.md