Konfiguration vorrausischtlich abgeschlossen

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "quoteProps": "consistent",
+  "printWidth": 120,
+  "tabWidth": 2,
+  "bracketSpacing": false
+}

.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["svelte.svelte-vscode"]
-}

package.json

@@ -5,21 +5,24 @@
   "type": "module",
   "main": "dist-electron/main.js",
   "scripts": {
+    "dev": "npm-run-all --parallel dev:svelte dev:electron",
     "dev:svelte": "vite",
-    "dev:electron": "electron .",
+    "dev:electron": "npm run transpile:electron; cross-env NODE_ENV=development electron .",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json",
     "transpile:electron": "tsc --project src/electron/tsconfig.json",
-	  "dist:mac": "npm run transpile:electron && npm run build && electron-builder --mac --arm64",
+    "dist:mac": "npm run transpile:electron && npm run build && electron-builder --mac --arm64",
     "dist:win": "npm run transpile:electron && npm run build && electron-builder --win --x64",
     "dist:linux": "npm run transpile:electron && npm run build && electron-builder --linux --x64"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "@tsconfig/svelte": "^5.0.4",
+    "cross-env": "^7.0.3",
     "electron": "^36.2.1",
     "electron-builder": "^26.0.12",
+    "npm-run-all": "^4.1.5",
     "svelte": "^5.28.1",
     "svelte-check": "^4.1.6",
     "typescript": "~5.8.3",

src/electron/main.ts

@@ -1,10 +1,13 @@
-import { app, BrowserWindow } from "electron";
-import path from "path";
+import {app, BrowserWindow} from 'electron';
+import path from 'path';
 
 const APPLICATION_PATH = path.join(app.getAppPath(), '/dist-svelte/index.html');
 
-app.on("ready", () => {
-  const mainWindow = new BrowserWindow({}); //@todo 
-  mainWindow.loadFile(APPLICATION_PATH);
-})
-
+app.on('ready', () => {
+  const mainWindow = new BrowserWindow({}); //@todo
+  if (process.env.NODE_ENV === 'development') {
+    mainWindow.loadURL('http://localhost:5123/');
+  } else {
+    mainWindow.loadFile(APPLICATION_PATH);
+  }
+});

src/ui/App.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  import svelteLogo from "./assets/svelte.svg";
-  import Counter from "./lib/Counter.svelte";
+  import svelteLogo from './assets/svelte.svg';
+  import Counter from './lib/Counter.svelte';
 </script>
 
 <main>
+  <p>Hallo Welt</p>
   <div>
     <a href="https://svelte.dev" target="_blank" rel="noreferrer">
       <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
@@ -16,11 +17,8 @@
   </div>
 
   <p>
-    Check out <a
-      href="https://github.com/sveltejs/kit#readme"
-      target="_blank"
-      rel="noreferrer">SvelteKit</a
-    >, the official Svelte app framework powered by Vite!
+    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the
+    official Svelte app framework powered by Vite!
   </p>
 
   <p class="read-the-docs">Click on the Vite and Svelte logos to learn more</p>

vite.config.ts

@@ -7,5 +7,9 @@ export default defineConfig({
   base: "./",
   build: {
     outDir: "dist-svelte"
+  },
+  server: {
+    port: 5123,
+    strictPort: true
   }
 })