From 83cbd7caf55cdb912d68bfa53ee8dac91fd8f1e4 Mon Sep 17 00:00:00 2001 From: Christopher Yihan Jiang <48700578+Chrisyhjiang@users.noreply.github.com> Date: Wed, 15 May 2024 09:00:22 -0700 Subject: [PATCH] Sveltekit sample --- samples/nodejs/sveltekit/.npmrc | 1 + samples/nodejs/sveltekit/Dockerfile | 23 +++++++ samples/nodejs/sveltekit/README.md | 8 +++ samples/nodejs/sveltekit/docker-compose.yml | 12 ++++ samples/nodejs/sveltekit/package.json | 19 +++++ samples/nodejs/sveltekit/src/app.html | 12 ++++ samples/nodejs/sveltekit/src/lib/index.js | 1 + .../nodejs/sveltekit/src/routes/+page.svelte | 65 ++++++++++++++++++ .../sveltekit/src/routes/api/songs/+server.js | 20 ++++++ samples/nodejs/sveltekit/static/favicon.png | Bin 0 -> 1571 bytes samples/nodejs/sveltekit/svelte.config.js | 7 ++ samples/nodejs/sveltekit/vite.config.js | 9 +++ 12 files changed, 177 insertions(+) create mode 100644 samples/nodejs/sveltekit/.npmrc create mode 100644 samples/nodejs/sveltekit/Dockerfile create mode 100644 samples/nodejs/sveltekit/README.md create mode 100644 samples/nodejs/sveltekit/docker-compose.yml create mode 100644 samples/nodejs/sveltekit/package.json create mode 100644 samples/nodejs/sveltekit/src/app.html create mode 100644 samples/nodejs/sveltekit/src/lib/index.js create mode 100644 samples/nodejs/sveltekit/src/routes/+page.svelte create mode 100644 samples/nodejs/sveltekit/src/routes/api/songs/+server.js create mode 100644 samples/nodejs/sveltekit/static/favicon.png create mode 100644 samples/nodejs/sveltekit/svelte.config.js create mode 100644 samples/nodejs/sveltekit/vite.config.js diff --git a/samples/nodejs/sveltekit/.npmrc b/samples/nodejs/sveltekit/.npmrc new file mode 100644 index 000000000..b6f27f135 --- /dev/null +++ b/samples/nodejs/sveltekit/.npmrc @@ -0,0 +1 @@ +engine-strict=true diff --git a/samples/nodejs/sveltekit/Dockerfile b/samples/nodejs/sveltekit/Dockerfile new file mode 100644 index 000000000..4d417065c --- /dev/null +++ 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 new file mode 100644 index 000000000..eb0b3f1e7 --- /dev/null +++ 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 Dockerfile. +2. A compose file 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 new file mode 100644 index 000000000..6f8749ff7 --- /dev/null +++ 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 new file mode 100644 index 000000000..233a8fb04 --- /dev/null +++ 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 new file mode 100644 index 000000000..77a5ff52c --- /dev/null +++ b/samples/nodejs/sveltekit/src/app.html @@ -0,0 +1,12 @@ + + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ + diff --git a/samples/nodejs/sveltekit/src/lib/index.js b/samples/nodejs/sveltekit/src/lib/index.js new file mode 100644 index 000000000..856f2b6c3 --- /dev/null +++ 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 new file mode 100644 index 000000000..d60f1a470 --- /dev/null +++ b/samples/nodejs/sveltekit/src/routes/+page.svelte @@ -0,0 +1,65 @@ + + +
+

MusicBrainz Song Search

+ + + {#if error} +

{error}

+ {/if} + + {#if results.length > 0} + + {/if} +
+ + diff --git a/samples/nodejs/sveltekit/src/routes/api/songs/+server.js b/samples/nodejs/sveltekit/src/routes/api/songs/+server.js new file mode 100644 index 000000000..7b2ef022e --- /dev/null +++ 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 (your-email@gmail.com)' // 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 new file mode 100644 index 0000000000000000000000000000000000000000..825b9e65af7c104cfb07089bb28659393b4f2097 GIT binary patch literal 1571 zcmV+;2Hg3HP)Px)-AP12RCwC$UE6KzI1p6{F2N z1VK2vi|pOpn{~#djwYcWXTI_im_u^TJgMZ4JMOsSj!0ma>B?-(Hr@X&W@|R-$}W@Z zgj#$x=!~7LGqHW?IO8+*oE1MyDp!G=L0#^lUx?;!fXv@l^6SvTnf^ac{5OurzC#ZMYc20lI%HhX816AYVs1T3heS1*WaWH z%;x>)-J}YB5#CLzU@GBR6sXYrD>Vw(Fmt#|JP;+}<#6b63Ike{Fuo!?M{yEffez;| zp!PfsuaC)>h>-AdbnwN13g*1LowNjT5?+lFVd#9$!8Z9HA|$*6dQ8EHLu}U|obW6f z2%uGv?vr=KNq7YYa2Roj;|zooo<)lf=&2yxM@e`kM$CmCR#x>gI>I|*Ubr({5Y^rb zghxQU22N}F51}^yfDSt786oMTc!W&V;d?76)9KXX1 z+6Okem(d}YXmmOiZq$!IPk5t8nnS{%?+vDFz3BevmFNgpIod~R{>@#@5x9zJKEHLHv!gHeK~n)Ld!M8DB|Kfe%~123&Hz1Z(86nU7*G5chmyDe ziV7$pB7pJ=96hpxHv9rCR29%bLOXlKU<_13_M8x)6;P8E1Kz6G<&P?$P^%c!M5`2` zfY2zg;VK5~^>TJGQzc+33-n~gKt{{of8GzUkWmU110IgI0DLxRIM>0US|TsM=L|@F z0Bun8U!cRB7-2apz=y-7*UxOxz@Z0)@QM)9wSGki1AZ38ceG7Q72z5`i;i=J`ILzL z@iUO?SBBG-0cQuo+an4TsLy-g-x;8P4UVwk|D8{W@U1Zi z!M)+jqy@nQ$p?5tsHp-6J304Q={v-B>66$P0IDx&YT(`IcZ~bZfmn11#rXd7<5s}y zBi9eim&zQc0Dk|2>$bs0PnLmDfMP5lcXRY&cvJ=zKxI^f0%-d$tD!`LBf9^jMSYUA zI8U?CWdY@}cRq6{5~y+)#h1!*-HcGW@+gZ4B};0OnC~`xQOyH19z*TA!!BJ%9s0V3F?CAJ{hTd#*tf+ur-W9MOURF-@B77_-OshsY}6 zOXRY=5%C^*26z?l)1=$bz30!so5tfABdSYzO+H=CpV~aaUefmjvfZ3Ttu9W&W3Iu6 zROlh0MFA5h;my}8lB0tAV-Rvc2Zs_CCSJnx@d`**$idgy-iMob4dJWWw|21b4NB=LfsYp0Aeh{Ov)yztQi;eL4y5 zMi>8^SzKqk8~k?UiQK^^-5d8c%bV?$F8%X~czyiaKCI2=UH