feat: vite+svelte+tailwind setup

This commit is contained in:
Timothy Jaeryang Baek
2025-01-08 19:15:46 -08:00
parent 1d0bd81560
commit c57cea5932
11 changed files with 1147 additions and 181 deletions

View File

@@ -33,7 +33,7 @@ const config: ForgeConfig = {
renderer: [
{
name: 'main_window',
config: 'vite.renderer.config.ts',
config: 'vite.renderer.config.mts',
},
],
}),

View File

@@ -2,12 +2,10 @@
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
<title>Open WebUI</title>
</head>
<body>
<h1>💖 Hello World!</h1>
<p>Welcome to your Electron application.</p>
<div id="app"></div>
<script type="module" src="/src/renderer.ts"></script>
</body>
</html>

1235
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -21,14 +21,20 @@
"@electron-forge/plugin-fuses": "^7.6.0",
"@electron-forge/plugin-vite": "^7.6.0",
"@electron/fuses": "^1.8.0",
"@sveltejs/vite-plugin-svelte": "^5.0.3",
"@tailwindcss/vite": "^4.0.0-beta.8",
"@tsconfig/svelte": "^5.0.4",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"electron": "33.3.1",
"eslint": "^8.57.1",
"eslint-plugin-import": "^2.31.0",
"svelte": "^5.17.1",
"svelte-check": "^4.1.3",
"tailwindcss": "^4.0.0-beta.8",
"ts-node": "^10.9.2",
"typescript": "~4.5.4",
"vite": "^5.4.11"
"typescript": "^5.7.3",
"vite": "^6.0.7"
},
"keywords": [],
"author": {

View File

@@ -1,7 +0,0 @@
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
Arial, sans-serif;
margin: auto;
max-width: 38rem;
padding: 2rem;
}

11
src/render/App.svelte Normal file
View File

@@ -0,0 +1,11 @@
<script lang="ts">
import { onMount } from "svelte";
onMount(() => {
console.log("Mounted");
});
</script>
<main>
<div class=" text-xl font-bold">Open WebUI App</div>
</main>

1
src/render/app.css Normal file
View File

@@ -0,0 +1 @@
@import "tailwindcss";

View File

@@ -1,31 +1,9 @@
/**
* This file will automatically be loaded by vite and run in the "renderer" context.
* To learn more about the differences between the "main" and the "renderer" context in
* Electron, visit:
*
* https://electronjs.org/docs/tutorial/application-architecture#main-and-renderer-processes
*
* By default, Node.js integration in this file is disabled. When enabling Node.js integration
* in a renderer process, please be aware of potential security implications. You can read
* more about security risks here:
*
* https://electronjs.org/docs/tutorial/security
*
* To enable Node.js integration in this file, open up `main.ts` and enable the `nodeIntegration`
* flag:
*
* ```
* // Create the browser window.
* mainWindow = new BrowserWindow({
* width: 800,
* height: 600,
* webPreferences: {
* nodeIntegration: true
* }
* });
* ```
*/
import { mount } from 'svelte'
import './render/app.css'
import App from './render/App.svelte'
import './index.css';
const app = mount(App, {
target: document.getElementById('app'),
})
console.log('👋 This message is being logged by "renderer.ts", included via Vite');
export default app

7
svelte.config.js Normal file
View File

@@ -0,0 +1,7 @@
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
export default {
// Consult https://svelte.dev/docs#compile-time-svelte-preprocess
// for more information about preprocessors
preprocess: vitePreprocess(),
};

9
vite.renderer.config.mts Normal file
View File

@@ -0,0 +1,9 @@
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte'
import tailwindcss from '@tailwindcss/vite';
// https://vitejs.dev/config
export default defineConfig({
plugins: [tailwindcss(), svelte()],
});

View File

@@ -1,4 +0,0 @@
import { defineConfig } from 'vite';
// https://vitejs.dev/config
export default defineConfig({});