https://github.com/ivov/typescript-electron-svelte-template

Template for developing an app in TypeScript/Electron, Svelte and Tailwind CSS with hot-reloading.
https://github.com/ivov/typescript-electron-svelte-template

Last synced: 26 days ago
JSON representation

Template for developing an app in TypeScript/Electron, Svelte and Tailwind CSS with hot-reloading.

• Host: GitHub
• URL: https://github.com/ivov/typescript-electron-svelte-template
• Owner: ivov
• License: mit
• Created: 2020-05-31T00:05:52.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-12-12T19:38:33.000Z (almost 4 years ago)
• Last Synced: 2024-10-03T12:21:10.816Z (about 1 month ago)
• Language: TypeScript
• Size: 156 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# normative-template

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`.

## Installation

1. Clone repo.

2. Install dependencies: `npm install`

3. Generate Tailwind CSS build file: `npm run css`

4. Kickstart the hot-reload cycle: `npm run start`

## How it works

1. `npm run start` bundles the Svelte app into `build/client/public/bundle.js` with `rollup`. Changes to the Svelte app will trigger rebundling.

2. `rollup` spawns a child process to compile the TypeScript/Electron client files into `build/client/` with `tsc-watch`. Changes to the TypeScript/Electron client will trigger recompilation.

3. The client imports `client/utils/hotReload` to hot reload itself with `electron-reload` whenever changes occur in `build/client/renderer/bundle.js` (bundled Svelte app) or in `client/public/index.html`.



    



## Author

© 2020 Iván Ovejero

## License

Distributed under the MIT License. See [LICENSE.md](LICENSE.md)