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 000000000..825b9e65a Binary files /dev/null and b/samples/nodejs/sveltekit/static/favicon.png differ diff --git a/samples/nodejs/sveltekit/svelte.config.js b/samples/nodejs/sveltekit/svelte.config.js new file mode 100644 index 000000000..8b8139963 --- /dev/null +++ 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 new file mode 100644 index 000000000..c68124a8c --- /dev/null +++ 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 + } +};