SvelteKit static adapter

frontend/Dockerfile

@@ -2,17 +2,21 @@ FROM node:20 as frontend-builder
 
 WORKDIR /app
 
-COPY . .
-
+COPY package.json .
+COPY package-lock.json .
 RUN npm install
+
+COPY . .
 RUN npm run build
 
-FROM node:20-alpine
+FROM nginx:alpine
 
-COPY --from=frontend-builder /app .
+COPY --from=frontend-builder /app/build /usr/share/nginx/html
+COPY run.sh .
+RUN chmod +x run.sh
 
-EXPOSE 4173
+EXPOSE 80
 
 ENV PUBLIC_BACKEND_URL=http://localhost:3000
 
-CMD ["npm", "run", "preview", "--", "--port", "4173", "--host", "0.0.0.0"]
+CMD ["./run.sh"]

frontend/package-lock.json

@@ -15,7 +15,7 @@
 			},
 			"devDependencies": {
 				"@playwright/test": "^1.28.1",
-				"@sveltejs/adapter-auto": "^3.0.0",
+				"@sveltejs/adapter-static": "^3.0.1",
 				"@sveltejs/kit": "^2.0.0",
 				"@sveltejs/vite-plugin-svelte": "^3.0.0",
 				"@types/eslint": "8.56.0",
@@ -824,14 +824,11 @@
 				"win32"
 			]
 		},
-		"node_modules/@sveltejs/adapter-auto": {
+		"node_modules/@sveltejs/adapter-static": {
 			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-3.0.1.tgz",
-			"integrity": "sha512-OpilmvRN136lUgOa9F0zpSI6g+PouOmk+YvJQrB+/hAtllLghjjYuoyfUsrF7U6oJ52cxCtAJTPXgZdyyCffrQ==",
+			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-static/-/adapter-static-3.0.1.tgz",
+			"integrity": "sha512-6lMvf7xYEJ+oGeR5L8DFJJrowkefTK6ZgA4JiMqoClMkKq0s6yvsd3FZfCFvX1fQ0tpCD7fkuRVHsnUVgsHyNg==",
 			"dev": true,
-			"dependencies": {
-				"import-meta-resolve": "^4.0.0"
-			},
 			"peerDependencies": {
 				"@sveltejs/kit": "^2.0.0"
 			}
@@ -2242,16 +2239,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/import-meta-resolve": {
-			"version": "4.0.0",
-			"resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.0.0.tgz",
-			"integrity": "sha512-okYUR7ZQPH+efeuMJGlq4f8ubUgO50kByRPyt/Cy1Io4PSRsPjxME+YlVaCOx+NIToW7hCsZNFJyTPFFKepRSA==",
-			"dev": true,
-			"funding": {
-				"type": "github",
-				"url": "https://github.com/sponsors/wooorm"
-			}
-		},
 		"node_modules/imurmurhash": {
 			"version": "0.1.4",
 			"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",

frontend/package.json

@@ -15,7 +15,7 @@
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.28.1",
-		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-static": "^3.0.1",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/eslint": "8.56.0",

frontend/run.sh

@@ -0,0 +1,5 @@
+PUBLIC_BACKEND_URL=${PUBLIC_BACKEND_URL:-http://localhost:3000}
+
+find /usr/share/nginx/html -type f -exec sed -i "s|http://localhost:3000|$PUBLIC_BACKEND_URL|g" {} +
+
+nginx -g 'daemon off;'

frontend/src/lib/components/projects/SelectProject.svelte

@@ -40,10 +40,10 @@
 	{:else}
 		<div
 			class="title"
-			on:click={() => (location.href = `/project/${project.id}`)}
+			on:click={() => (location.href = `/project.html?id=${project.id}`)}
 			on:keydown={(e) => {
 				if (e.key === 'Enter') {
-					location.href = `/project/${project.id}`;
+					location.href = `/project?id=${project.id}`;
 				}
 			}}
 			tabindex="0"

frontend/src/lib/utils/api.ts

@@ -1,9 +1,10 @@
 import axios, { Axios, type AxiosResponse } from 'axios';
 import { toastAlert } from './toasts';
 import { setupCache } from 'axios-cache-interceptor';
-import { env } from '$env/dynamic/public';
+// import { env } from '$env/dynamic/public';
 
-const backend = env.PUBLIC_BACKEND_URL || 'http://localhost:3000';
+// const backend = env.PUBLIC_BACKEND_URL || 'http://localhost:3000';
+const backend = 'http://localhost:3000';
 
 export default setupCache(
 	new Axios({

frontend/src/routes/+layout.js

@@ -0,0 +1 @@
+export const prerender = true;

frontend/src/routes/+page.js

@@ -1 +0,0 @@
-export const ssr = false;

frontend/src/routes/manifest.json/+server.ts

@@ -1,45 +0,0 @@
-import projectsApi from '$lib/api/projectsApi';
-
-interface Shortcut {
-	name: string;
-	description: string;
-	url: string;
-	icons: {
-		src: string;
-		sizes: string;
-	}[];
-}
-
-export async function GET() {
-	const icon = {
-		src: '/img/icon.svg',
-		type: 'image/svg+xml',
-		sizes: 'any'
-	};
-
-	const projects = await projectsApi.getAll();
-
-	const shortcuts: Shortcut[] = projects.map((project) => {
-		return {
-			name: `Project ${project.title}`,
-			description: `Shortcut for project ${project.title}`,
-			url: `/${project.id}`,
-			icons: [icon]
-		};
-	});
-
-	const manifest = {
-		short_name: 'Focus',
-		name: 'Focus',
-		start_url: '/',
-		display: 'standalone',
-		icons: [icon],
-		shortcuts
-	};
-
-	return new Response(JSON.stringify(manifest), {
-		headers: {
-			'Content-Type': 'application/manifest+json'
-		}
-	});
-}

frontend/src/routes/project/+page.svelte

@@ -1,17 +1,16 @@
 <script lang="ts">
-	import { page } from '$app/stores';
 	import projectsApi from '$lib/api/projectsApi';
 	import Sidebar from '$lib/components/project/Sidebar.svelte';
 	import type Project from '$lib/types/Project';
 	import { SvelteToast } from '@zerodevx/svelte-toast';
 	import { onMount } from 'svelte';
 	import ProjectComponent from '$lib/components/project/Project.svelte';
-
-	let projectId: number = +$page.params.project;
+	import { page } from '$app/stores';
 
 	let project: Project;
 
 	onMount(async () => {
+		const projectId = parseInt($page.url.searchParams.get('id') || '0');
 		const res = await projectsApi.get(projectId);
 
 		if (!res) return;

frontend/static/manifest.json

@@ -0,0 +1,13 @@
+{
+	"short_name": "Focus",
+	"name": "Focus",
+	"start_url": "/",
+	"display": "standalone",
+	"icons": [
+		{
+			"src": "/img/icon.svg",
+			"type": "image/svg+xml",
+			"sizes": "any"
+		}
+	]
+}

frontend/svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */