├── .gitignore ├── README.md ├── electron-builder.config.json ├── electron_svelte.svg ├── icon.png ├── package.json ├── screenshot.png ├── src ├── app.html ├── app.scss ├── electron.cjs ├── lib │ ├── Counter.svelte │ └── SideBar.svelte └── routes │ ├── +layout.js │ ├── +layout.svelte │ ├── +page.svelte │ ├── page1 │ └── +page.svelte │ ├── page2 │ └── +page.svelte │ └── page3 │ └── +page.svelte ├── static ├── favicon.ico └── robots.txt ├── svelte.config.js └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | node_modules 3 | .svelte-kit 4 | build 5 | dist -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SvelteKit + Electron 2 | 3 |

4 | 5 |

6 |

7 | A minimal project template for Electron and SvelteKit configured with adapter-static. 8 |

9 | 10 | ## Screenshot 11 | ![Screenshot](https://github.com/Dax89/electron-sveltekit/blob/master/screenshot.png) 12 | 13 | ## Installation 14 | 15 | ``` 16 | npx degit Dax89/electron-sveltekit 17 | ``` 18 | 19 | ## Commands 20 | - `npm run dev`: Runs SvelteKit in dev mode 21 | - `npm run preview`: Runs SvelteKit in production mode 22 | - `npm run electron`: Runs SvelteKit with electron in dev mode 23 | - `npm run build`: Runs SvelteKit compiler 24 | - `npm run dev:package`: Creates an Electron package (you can inspect the contents) 25 | - `npm run package`: Creates a distributable Electron package 26 | 27 | ## Bootstrap 5 and FontAwesome support 28 | 29 | Download the template and install the dependencies: 30 | 31 | ``` 32 | npx degit Dax89/electron-sveltekit 33 | npm install --save bootstrap@next @fortawesome/fontawesome-free 34 | ``` 35 | 36 | Add these lines in `src/app.scss`: 37 | 38 | ``` 39 | @import "bootstrap/scss/bootstrap"; 40 | @import "@fortawesome/fontawesome-free/css/all.min.css"; 41 | ``` 42 | -------------------------------------------------------------------------------- /electron-builder.config.json: -------------------------------------------------------------------------------- 1 | { 2 | asar: false, 3 | directories: { output: "dist" }, 4 | files: [ 5 | "src/electron.cjs", 6 | { from: "build", to: "" } 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /electron_svelte.svg: -------------------------------------------------------------------------------- 1 | 2 | 97 | -------------------------------------------------------------------------------- /icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dax89/electron-sveltekit/8b6b3edb89bd76f7f2db35ba2d83207fda2a58ad/icon.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "author": "anonymous", 3 | "devDependencies": { 4 | "@sveltejs/adapter-node": "^1.0.0-next.101", 5 | "@sveltejs/adapter-static": "^1.0.0-next.48", 6 | "@sveltejs/kit": "^1.0.0-next.562", 7 | "concurrently": "^6.5.1", 8 | "electron": "^12.2.3", 9 | "electron-builder": "^22.14.13", 10 | "electron-reloader": "^1.2.3", 11 | "sass": "^1.56.1", 12 | "svelte": "^3.53.1", 13 | "svelte-preprocess": "^4.10.7", 14 | "vite": "^4.0.4" 15 | }, 16 | "license": "", 17 | "private": true, 18 | "dependencies": { 19 | "electron-serve": "^1.1.0", 20 | "electron-window-state": "^5.0.3" 21 | }, 22 | "main": "src/electron.cjs", 23 | "scripts": { 24 | "dev": "vite dev", 25 | "package": "npm run build && electron-builder --config electron-builder.config.json", 26 | "dev:package": "npm run build && electron-builder --config electron-builder.config.json --dir", 27 | "electron": "concurrently --kill-others \"vite dev\" \"electron src/electron.cjs\"", 28 | "preview": "vite preview", 29 | "build": "vite build" 30 | }, 31 | "version": "1.0.0", 32 | "name": "electron-sveltekit", 33 | "type": "module", 34 | "description": "Electron and SvelteKit integration" 35 | } 36 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dax89/electron-sveltekit/8b6b3edb89bd76f7f2db35ba2d83207fda2a58ad/screenshot.png -------------------------------------------------------------------------------- /src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 10 | %sveltekit.head% 11 | 12 | 13 |

14 | %sveltekit.body% 15 |

16 | 17 | 18 | -------------------------------------------------------------------------------- /src/app.scss: -------------------------------------------------------------------------------- 1 | $primary: #ff3e00; 2 | 3 | :root { 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; 5 | } 6 | 7 | .text-primary { 8 | color: $primary; 9 | } 10 | 11 | .button { 12 | padding: 10px 10px; 13 | display: inline-block; 14 | background-color: $primary; 15 | color: white; 16 | text-decoration: none; 17 | border: none; 18 | } 19 | 20 | /* The sidebar menu */ 21 | .sidenav { 22 | height: 100%; /* Full-height: remove this if you want "auto" height */ 23 | width: 160px; /* Set the width of the sidebar */ 24 | position: fixed; /* Fixed Sidebar (stay in place on scroll) */ 25 | z-index: 1; /* Stay on top */ 26 | top: 0; /* Stay at the top */ 27 | left: 0; 28 | background-color: $primary; 29 | overflow-x: hidden; /* Disable horizontal scroll */ 30 | padding-top: 20px; 31 | } 32 | 33 | .sidenav a { 34 | padding: 6px 8px 6px 16px; 35 | text-decoration: none; 36 | font-size: 20px; 37 | font-weight: bold; 38 | color: white; 39 | display: block; 40 | } 41 | 42 | .sidenav a:hover { 43 | background-color: #f1f1f1; 44 | color: $primary; 45 | } 46 | 47 | .main { 48 | margin-left: 160px; /* Same as the width of the sidebar */ 49 | padding: 0px 10px; 50 | } 51 | 52 | /* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */ 53 | @media screen and (max-height: 450px) { 54 | .sidenav {padding-top: 15px;} 55 | .sidenav a {font-size: 18px;} 56 | } 57 | -------------------------------------------------------------------------------- /src/electron.cjs: -------------------------------------------------------------------------------- 1 | const {app, ipcMain, BrowserWindow} = require("electron"); 2 | const serve = require("electron-serve"); 3 | const ws = require("electron-window-state"); 4 | try { require("electron-reloader")(module); } catch {} 5 | 6 | const loadURL = serve({directory: "."}); 7 | const port = process.env.PORT || 3000; 8 | const isdev = !app.isPackaged || (process.env.NODE_ENV == "development"); 9 | let mainwindow; 10 | 11 | function loadVite(port) { 12 | mainwindow.loadURL(`http://localhost:${port}`).catch(() => { 13 | setTimeout(() => { loadVite(port); }, 200); 14 | }); 15 | } 16 | 17 | function createMainWindow() { 18 | let mws = ws({ 19 | defaultWidth: 1000, 20 | defaultHeight: 800 21 | }); 22 | 23 | mainwindow = new BrowserWindow({ 24 | x: mws.x, 25 | y: mws.y, 26 | width: mws.width, 27 | height: mws.height, 28 | 29 | webPreferences: { 30 | nodeIntegration: true, 31 | contextIsolation: false, 32 | devTools: isdev || true 33 | } 34 | }); 35 | 36 | mainwindow.once("close", () => { mainwindow = null; }); 37 | 38 | if(!isdev) mainwindow.removeMenu(); 39 | else mainwindow.webContents.openDevTools(); 40 | mws.manage(mainwindow); 41 | 42 | if(isdev) loadVite(port); 43 | else loadURL(mainwindow); 44 | } 45 | 46 | app.once("ready", createMainWindow); 47 | app.on("activate", () => { if(!mainwindow) createMainWindow(); }); 48 | app.on("window-all-closed", () => { if(process.platform !== "darwin") app.quit(); }); 49 | 50 | -------------------------------------------------------------------------------- /src/lib/Counter.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 | 12 | -------------------------------------------------------------------------------- /src/lib/SideBar.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 |

8 | Page 1 9 | Page 2 10 | Page 3 11 |

12 | -------------------------------------------------------------------------------- /src/routes/+layout.js: -------------------------------------------------------------------------------- 1 | export const prerender = true; 2 | -------------------------------------------------------------------------------- /src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 | 8 |

9 | 10 |

11 | -------------------------------------------------------------------------------- /src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | Svelte Template 7 | 8 | 9 |

10 |

Hello world!

11 | 12 |

Visit svelte.dev to learn how to build Svelte apps.

13 |

14 | 15 | 47 | -------------------------------------------------------------------------------- /src/routes/page1/+page.svelte: -------------------------------------------------------------------------------- 1 | 2 | Page 1 3 | 4 | 5 |

Page 1

6 |

This is the page 1

7 | 8 |

9 | Home 10 | Page 2 11 | Page 3 12 |

13 | 14 | -------------------------------------------------------------------------------- /src/routes/page2/+page.svelte: -------------------------------------------------------------------------------- 1 | 2 | Page 2 3 | 4 | 5 |

Page 2

6 |

This is the page 2

7 | 8 |

9 | Home 10 | Page 1 11 | Page 3 12 |

13 | 14 | -------------------------------------------------------------------------------- /src/routes/page3/+page.svelte: -------------------------------------------------------------------------------- 1 | 2 | Page 3 3 | 4 | 5 |

Page 3

6 |

This is the page 3

7 | 8 |

9 | Home 10 | Page 1 11 | Page 2 12 |

13 | 14 | -------------------------------------------------------------------------------- /static/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Dax89/electron-sveltekit/8b6b3edb89bd76f7f2db35ba2d83207fda2a58ad/static/favicon.ico -------------------------------------------------------------------------------- /static/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | import preprocess from "svelte-preprocess" 2 | import adapter from "@sveltejs/adapter-static" 3 | //import node from "@sveltejs/adapter-node"; 4 | 5 | //const dev = process.env.NODE_ENV == "development" 6 | 7 | export default { 8 | kit: { 9 | //adapter: node() 10 | adapter: adapter(), 11 | }, 12 | 13 | preprocess: preprocess(), 14 | } 15 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { sveltekit } from "@sveltejs/kit/vite"; 2 | 3 | /** @type {import('vite').UserConfig} */ 4 | const config = { 5 | plugins: [sveltekit()], 6 | 7 | server: { 8 | port: 3000 9 | } 10 | }; 11 | 12 | export default config; 13 | --------------------------------------------------------------------------------