Merge pull request #327 from DefangLabs/linda-nextjs-cv

commit111 · web-flow · commit acb6528cc392 · 2025-02-27T11:20:24.000-08:00
Add Nextjs CV (from market.dev) sample
diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
@@ -0,0 +1,2 @@
+
+FROM mcr.microsoft.com/devcontainers/typescript-node:22-bookworm
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -0,0 +1,11 @@
+{
+  "build": {
+    "dockerfile": "Dockerfile",
+    "context": ".."
+  },
+  "features": {
+    "ghcr.io/defanglabs/devcontainer-feature/defang-cli:1.0.4": {},
+    "ghcr.io/devcontainers/features/docker-in-docker:2": {},
+    "ghcr.io/devcontainers/features/aws-cli:1": {}
+  }
+}
diff --git a/.github/workflows/deploy.yaml b/.github/workflows/deploy.yaml
@@ -0,0 +1,21 @@
+name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    environment: playground
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      id-token: write
+
+    steps:
+    - name: Checkout Repo
+      uses: actions/checkout@v4
+
+    - name: Deploy
+      uses: DefangLabs/defang-github-action@v1.1.0
diff --git a/README.md b/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
diff --git a/app/.npmrc b/app/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/app/Dockerfile b/app/Dockerfile
@@ -0,0 +1,32 @@
+# Use the slim version of Node.js v20 on Debian Bookworm as the base image
+FROM node:20-bookworm-slim
+
+RUN apt-get update -qq \
+      && apt-get install -y curl \
+      && apt-get clean \
+      && rm -rf /var/lib/apt/lists/*
+
+# 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"]
diff --git a/app/package.json b/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"
+	}
+}
diff --git a/app/src/app.html b/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>
diff --git a/app/src/lib/db.js b/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 };
+}
diff --git a/app/src/lib/index.js b/app/src/lib/index.js
@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.
diff --git a/app/src/routes/+page.svelte b/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>
diff --git a/app/src/routes/api/songs/+server.js b/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 });
+}
diff --git a/app/static/favicon.png b/app/static/favicon.png
diff --git a/app/svelte.config.js b/app/svelte.config.js
@@ -0,0 +1,10 @@
+import adapter from '@sveltejs/adapter-node';
+import preprocess from 'svelte-preprocess';
+
+export default {
+  preprocess: preprocess(),
+
+  kit: {
+    adapter: adapter(),
+  }
+};
diff --git a/app/vite.config.js b/app/vite.config.js
@@ -0,0 +1,11 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [sveltekit()],
+  build: {
+    rollupOptions: {
+      external: ['node-fetch', 'mongodb']
+    }
+  }
+});
diff --git a/compose.yaml b/compose.yaml
@@ -0,0 +1,41 @@
+services:
+  sveltekit:
+    restart: unless-stopped
+    build:
+      context: ./app
+      dockerfile: Dockerfile
+      args:
+        MONGODB_URI: "mongodb://mongo:27017/musicdb"
+    environment:
+      NODE_ENV: production
+      HOST: "0.0.0.0"
+      PORT: 3000
+      MONGODB_URI: "mongodb://mongo:27017/musicdb"
+    ports:
+      - "3000:3000"
+    depends_on:
+      - mongo
+    #deploy:
+    #  resources:
+    #    reservations:
+    #      memory: 256M
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3000/"]
+
+  mongo:
+    restart: unless-stopped
+    image: mongo:latest
+    ports:
+      - mode: host
+        target: 27017
+    volumes:
+      - mongo-data:/data/db
+    environment:
+      MONGO_INITDB_DATABASE: musicdb
+    #deploy:
+    #  resources:
+    #    reservations:
+    #      memory: 256M
+
+volumes:
+  mongo-data:

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+`
	`2`	`+FROM mcr.microsoft.com/devcontainers/typescript-node:22-bookworm`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	+// place files you want to import through the `$lib` alias in this folder.