Sveltekit sample

Chrisyhjiang · May 15, 2024 · 83cbd7c · 83cbd7c
1 parent 7e1f015
commit 83cbd7c
Show file tree

Hide file tree

Showing 12 changed files with 177 additions and 0 deletions.
diff --git a/samples/nodejs/sveltekit/.npmrc b/samples/nodejs/sveltekit/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/samples/nodejs/sveltekit/Dockerfile b/samples/nodejs/sveltekit/Dockerfile
@@ -0,0 +1,23 @@
+# Use the official Node.js image as a base image
+FROM node:18-alpine
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the SvelteKit application
+RUN npm run build
+
+# Expose the port the app runs on
+EXPOSE 3000
+
+# Command to run the app
+CMD ["node", "build"]
diff --git a/samples/nodejs/sveltekit/README.md b/samples/nodejs/sveltekit/README.md
@@ -0,0 +1,8 @@
+# Sveltekit Music List API
+
+This is a project that demonstrate both client side component rendering and hydration as well as serverside rendering with external API route configuration. In other words, this app uses sveltekit to take care of both frontend and backend of the music search application.
+
+## Essential Setup Files
+
+1. A <a href="https://docs.docker.com/develop/develop-images/dockerfile_best-practices/">Dockerfile</a>.
+2. A <a href="https://docs.defang.io/docs/concepts/compose">compose file</a> to define and run multi-container Docker applications (this is how Defang identifies services to be deployed).
diff --git a/samples/nodejs/sveltekit/docker-compose.yml b/samples/nodejs/sveltekit/docker-compose.yml
@@ -0,0 +1,12 @@
+version: "3.8"
+
+services:
+  sveltekit:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    environment:
+      NODE_ENV: production
+      PORT: 3000
diff --git a/samples/nodejs/sveltekit/package.json b/samples/nodejs/sveltekit/package.json
@@ -0,0 +1,19 @@
+{
+	"name": "sveltekit",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/adapter-node": "^5.0.1",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"svelte": "^4.2.7",
+		"vite": "^5.0.3"
+	},
+	"type": "module"
+}
diff --git a/samples/nodejs/sveltekit/src/app.html b/samples/nodejs/sveltekit/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/samples/nodejs/sveltekit/src/lib/index.js b/samples/nodejs/sveltekit/src/lib/index.js
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
diff --git a/samples/nodejs/sveltekit/src/routes/+page.svelte b/samples/nodejs/sveltekit/src/routes/+page.svelte
@@ -0,0 +1,65 @@
+<script>
+  import { onMount } from "svelte";
+  let query = "";
+  let results = [];
+  let error = "";
+
+  async function searchSongs() {
+    console.log("Searching for:", query);
+    if (query.length > 2) {
+      try {
+        const response = await fetch(`/api/songs?query=${query}`);
+        const data = await response.json();
+
+        console.log("Response:", data);
+
+        if (response.ok) {
+          results = data.recordings || [];
+          error = "";
+        } else {
+          results = [];
+          error = data.error || "An error occurred";
+        }
+      } catch (err) {
+        console.error("Fetch error:", err);
+        results = [];
+        error = "Failed to fetch data";
+      }
+    } else {
+      results = [];
+      error = "";
+    }
+  }
+</script>
+
+<main class="p-4">
+  <h1 class="text-2xl mb-4">MusicBrainz Song Search</h1>
+  <input
+    type="text"
+    bind:value={query}
+    on:input={searchSongs}
+    class="border p-2 w-full mb-4"
+    placeholder="Search for songs..."
+  />
+
+  {#if error}
+    <p class="text-red-500">{error}</p>
+  {/if}
+
+  {#if results.length > 0}
+    <ul>
+      {#each results as result}
+        <li class="mb-2 p-2 border-b">
+          <strong>{result.title}</strong> by {result["artist-credit"][0].name}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</main>
+
+<style>
+  main {
+    max-width: 600px;
+    margin: 0 auto;
+  }
+</style>
diff --git a/samples/nodejs/sveltekit/src/routes/api/songs/+server.js b/samples/nodejs/sveltekit/src/routes/api/songs/+server.js
@@ -0,0 +1,20 @@
+// src/routes/api/songs/+server.js
+// this is server side rendering by sveltekit
+import { json } from '@sveltejs/kit';
+
+export async function GET({ url }) {
+  const query = url.searchParams.get('query');
+
+  if (!query) {
+    return json({ error: 'Query parameter is required' }, { status: 400 });
+  }
+
+  const headers = {
+    'User-Agent': 'sveltekit-music-app/1.0.0 ([email protected])' // Replace with your app name and email
+  };
+
+  const response = await fetch(`https://musicbrainz.org/ws/2/recording/?query=${query}&fmt=json`, { headers });
+  const data = await response.json();
+
+  return json(data);
+}
diff --git a/samples/nodejs/sveltekit/static/favicon.png b/samples/nodejs/sveltekit/static/favicon.png
diff --git a/samples/nodejs/sveltekit/svelte.config.js b/samples/nodejs/sveltekit/svelte.config.js
@@ -0,0 +1,7 @@
+import adapter from '@sveltejs/adapter-node';
+
+export default {
+  kit: {
+    adapter: adapter()
+  }
+};
diff --git a/samples/nodejs/sveltekit/vite.config.js b/samples/nodejs/sveltekit/vite.config.js
@@ -0,0 +1,9 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+
+export default {
+  plugins: [sveltekit()],
+  server: {
+    host: '0.0.0.0',
+    port: 3000
+  }
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		// place files you want to import through the `$lib` alias in this folder.