replace with 1-click deploy button

Author: raphaeltm

.github/workflows/deploy.yaml

@@ -0,0 +1,20 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+    - name: Checkout Repo
+      uses: actions/checkout@v4
+
+    - name: Deploy
+      uses: DefangLabs/[email protected]

README.md

@@ -0,0 +1,45 @@
+# Sveltekit & MongoDB
+
+[![1-click-deploy](https://defang.io/deploy-with-defang.png)](https://portal.defang.dev/redirect?url=https%3A%2F%2Fgithub.com%2Fnew%3Ftemplate_name%3Dsample-sveltekit-mongodb-template%26template_owner%3DDefangSamples)
+
+This is a project that demonstrate both client side component rendering and hydration as well as serverside rendering with external API route configuration. Furthermore, there is also a mongodb connection (not hosted on the atlas) to cache the queried results.
+
+## NOTE
+
+This sample showcases how you could deploy a full-stack application with Defang and Sveltekit. However, it deploys mongodb as a defang service. Defang [services](https://12factor.net/processes) are ephemeral and should not be used to run stateful workloads in production as they will be reset on every deployment. For production use cases you should use a managed database like RDS, Aiven, or others. In the future, Defang will help you provision and connect to managed databases.
+
+## Essential Setup Files
+
+1. Download [Defang CLI] (https://github.com/DefangLabs/defang)
+2. (optional) If you are using [Defang BYOC] (https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-configure.html) authenticated your AWS account.
+3. (optional for local development) [Docker CLI] (https://docs.docker.com/engine/install/)
+
+## Prerequisite
+
+1. Download [Defang CLI] (https://github.com/DefangLabs/defang)
+2. (optional) If you are using [Defang BYOC](https://docs.defang.io/docs/concepts/defang-byoc) make sure you have properly
+3. [Docker CLI] (https://docs.docker.com/engine/install/)
+
+4. [NodeJS] (https://nodejs.org/en/download/package-manager)
+
+## Development
+
+For development, we use a local container. This can be seen in the compose.yaml and /src/routes/api/songs/+server.js file and the server.js file where we create a pool of connections. To run the sample locally after clonging the respository, you can run on docker by doing
+
+1.  docker compose up --build
+
+## A Step-by-Step Guide
+
+1. Open the terminal and type `defang login`
+2. Type `defang compose up` in the CLI
+3. Your app should be up and running with Defang in minutes!
+
+---
+
+Title: SvelteKit & MongoDB
+
+Short Description: A full-stack application using SvelteKit for the frontend and MongoDB for the database.
+
+Tags: SvelteKit, MongoDB, Full-stack, Node.js, JavaScript
+
+Languages: nodejs

app/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

app/Dockerfile

@@ -0,0 +1,27 @@
+# Use the slim version of Node.js v20 on Debian Bookworm as the base image
+FROM node:20-bookworm-slim
+
+# 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 . .
+
+# Set environment variable for MongoDB URI
+ARG MONGODB_URI
+ENV MONGODB_URI=$MONGODB_URI
+
+# 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"]

app/package.json

@@ -0,0 +1,24 @@
+{
+	"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.5.8",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"svelte": "^4.2.7",
+		"svelte-preprocess": "^5.1.4",
+		"vite": "^5.2.11"
+	},
+	"type": "module",
+	"dependencies": {
+		"mongodb": "^6.6.1",
+		"node-fetch": "^3.3.2"
+	}
+}

app/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>

app/src/lib/db.js

@@ -0,0 +1,25 @@
+import { MongoClient } from 'mongodb';
+
+const uri = process.env.MONGODB_URI || 'mongodb://localhost:27017/musicdb';
+const client = new MongoClient(uri);
+
+let cachedClient = null;
+let cachedDb = null;
+
+export async function connectToDatabase() {
+  if (cachedClient && cachedDb) {
+    return { client: cachedClient, db: cachedDb };
+  }
+
+  // Connect the client
+  await client.connect();
+  const db = client.db(); // Connects to the specified database in the URI
+
+  // Ensure the collections exist (this step is optional because MongoDB will create collections on first use)
+  await db.createCollection('songs').catch(() => {});
+  await db.createCollection('searches').catch(() => {});
+
+  cachedClient = client;
+  cachedDb = db;
+  return { client: cachedClient, db: cachedDb };
+}

app/src/lib/index.js

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

app/src/routes/+page.svelte

@@ -0,0 +1,26 @@
+<script>
+  import { onMount } from "svelte";
+  import { writable } from "svelte/store";
+
+  let query = "";
+  let songs = writable([]);
+
+  async function searchSongs() {
+    const res = await fetch(`/api/songs?query=${query}`);
+    const data = await res.json();
+    songs.set(data.songs);
+  }
+
+  onMount(() => {
+    // Optionally, perform an initial search
+  });
+</script>
+
+<input bind:value={query} placeholder="Search for a song..." />
+<button on:click={searchSongs}>Search</button>
+
+<ul>
+  {#each $songs as song}
+    <li>{song.title} by {song.artist}</li>
+  {/each}
+</ul>

app/src/routes/api/songs/+server.js

@@ -0,0 +1,49 @@
+import { connectToDatabase } from '$lib/db';
+import fetch from 'node-fetch';
+import { ObjectId } from 'mongodb';
+import { json } from '@sveltejs/kit'; // Import the json utility
+
+export async function GET({ url }) {
+  const query = url.searchParams.get('query');
+  if (!query) {
+    return json({ error: 'Query parameter is required' }, { status: 400 });
+  }
+
+  const { db } = await connectToDatabase();
+
+  // Check if the search query is already cached
+  const cachedSearch = await db.collection('searches').findOne({ query });
+
+  if (cachedSearch) {
+    // Fetch cached results from the Songs collection
+    const songIds = cachedSearch.results.map(id => new ObjectId(id));
+    const songs = await db.collection('songs').find({ _id: { $in: songIds } }).toArray();
+    return json({ songs });
+  }
+
+  // If not cached, fetch from MusicBrainz API
+  const response = await fetch(`https://musicbrainz.org/ws/2/recording?query=${query}&fmt=json`);
+  const data = await response.json();
+
+  // Ensure the data is in the expected format
+  if (!data.recordings || !Array.isArray(data.recordings)) {
+    return json({ error: 'Invalid data format from MusicBrainz API' }, { status: 500 });
+  }
+
+  const songs = data.recordings.map(recording => ({
+    title: recording.title,
+    artist: recording['artist-credit']?.[0]?.name || 'Unknown artist',
+    album: recording.releases?.[0]?.title || 'Unknown album',
+    musicbrainz_id: recording.id,
+    data: recording
+  }));
+
+  // Save the songs in the Songs collection
+  const result = await db.collection('songs').insertMany(songs);
+  const songIds = Object.values(result.insertedIds);
+
+  // Cache the search query and results in the Searches collection
+  await db.collection('searches').insertOne({ query, results: songIds, timestamp: new Date() });
+
+  return json({ songs });
+}