Merge pull request #378 from Chrisyhjiang/sveltekit

Sveltekit sample

Author: raphaeltm

.gitignore

@@ -5,5 +5,7 @@ node_modules/
 /result
 
 
-.log
+*.log
+*.txt
 .gitignore
+*-lock.json

README.md

@@ -1,87 +1,102 @@
 [![Go package](https://github.com/defang-io/defang/actions/workflows/go.yml/badge.svg?branch=main)](https://github.com/defang-io/defang/actions/workflows/go.yml)
 
 # Defang
+
 Defang is a radically simpler way for developers to create, deploy, and manage cloud applications.
 
 This repo includes:
-* Public releases of the Defang CLI; [click here](https://github.com/defang-io/defang/releases/latest/) for the latest version
-* Samples in Golang, Python, and Node.js that show how to accomplish various tasks and deploy them to the DOP using a Docker Compose file using the Defang CLI.
-* Samples that show how to deploy an app using the [Defang Pulumi Provider](https://github.com/defang-io/pulumi-defang).
+
+- Public releases of the Defang CLI; [click here](https://github.com/defang-io/defang/releases/latest/) for the latest version
+- Samples in Golang, Python, and Node.js that show how to accomplish various tasks and deploy them to the DOP using a Docker Compose file using the Defang CLI.
+- Samples that show how to deploy an app using the [Defang Pulumi Provider](https://github.com/defang-io/pulumi-defang).
 
 ## Getting started
-* Read our [Getting Started](https://docs.defang.io/docs/getting-started) page
-* Follow the installation instructions from the [Installing](https://docs.defang.io/docs/getting-started/installing) page
-* Take a look at our [Samples folder](https://github.com/defang-io/defang/tree/main/samples) for example projects in various programming languages.
-* Try the AI integration by running `defang generate`
-* Start your new service with `defang compose up`
+
+- Read our [Getting Started](https://docs.defang.io/docs/getting-started) page
+- Follow the installation instructions from the [Installing](https://docs.defang.io/docs/getting-started/installing) page
+- Take a look at our [Samples folder](https://github.com/defang-io/defang/tree/main/samples) for example projects in various programming languages.
+- Try the AI integration by running `defang generate`
+- Start your new service with `defang compose up`
 
 ## Installing
+
 Install the Defang CLI from one of the following sources:
-* Using the [Homebrew](https://brew.sh) package manager [defang-io/defang tap](https://github.com/defang-io/homebrew-defang):
+
+- Using the [Homebrew](https://brew.sh) package manager [defang-io/defang tap](https://github.com/defang-io/homebrew-defang):
   ```
   brew install defang-io/defang/defang
   ```
-* Using a shell script:
+- Using a shell script:
   ```
   . <(curl -Ls https://s.defang.io/install)
   ```
-* Using [Go](https://go.dev):
+- Using [Go](https://go.dev):
   ```
   go install github.com/defang-io/defang/src/cmd/cli@latest
   ```
-* Using the [Nix package manager](https://nixos.org):
-  * with Nix-Env:
+- Using the [Nix package manager](https://nixos.org):
+  - with Nix-Env:
     ```
     nix-env -if https://github.com/defang-io/defang/archive/main.tar.gz
     ```
-  * or with Flakes:
+  - or with Flakes:
     ```
     nix profile install github:defang-io/defang#defang-bin --refresh
     ```
-* Download the [latest binary](https://github.com/defang-io/defang/releases/latest/) of the Defang CLI. For this beta, MacOS users will have to explicitly allow running of downloaded programs in the OS security settings.
+- Download the [latest binary](https://github.com/defang-io/defang/releases/latest/) of the Defang CLI. For this beta, MacOS users will have to explicitly allow running of downloaded programs in the OS security settings.
 
 ## Support
-* File any issues [right here on GitHub](https://github.com/defang-io/defang/issues)
+
+- File any issues [right here on GitHub](https://github.com/defang-io/defang/issues)
 
 ## Command completion
+
 The Defang CLI supports command completion for Bash, Zsh, Fish, and Powershell. To get the shell script for command completion, run the following command:
+
 ```
 defang completion [bash|zsh|fish|powershell]
 ```
 
 If you're using Bash, you can add the following to your `~/.bashrc` file:
+
 ```
 source <(defang completion bash)
 ```
 
 If you're using Zsh, you can add the following to your `~/.zshrc` file:
+
 ```
 source <(defang completion zsh)
 ```
+
 or pipe the output to a file called `_defang` in the directory with the completions.
 
 If you're using Fish, you can add the following to your `~/.config/fish/config.fish` file:
+
 ```
 defang completion fish | source
 ```
 
 If you're using Powershell, you can add the following to your `$HOME\Documents\PowerShell\Microsoft.PowerShell_profile.ps1` file:
+
 ```
 Invoke-Expression -Command (defang completion powershell | Out-String)
 ```
 
 ## Environment Variables
+
 The Defang CLI recognizes the following environment variables:
-* `COMPOSE_PROJECT_NAME` - The name of the project to use; overrides the name in the `compose.yaml` file
-* `DEFANG_ACCESS_TOKEN` - The access token to use for authentication; if not specified, uses token from `defang login`
-* `DEFANG_CD_BUCKET` - The S3 bucket to use for the BYOC CD pipeline; defaults to `defang-cd-bucket-…`
-* `DEFANG_CD_IMAGE` - The image to use for the Continuous Deployment (CD) pipeline; defaults to `public.ecr.aws/defang-io/cd:public-beta`
-* `DEFANG_DEBUG` - set this to `1` or `true` to enable debug logging
-* `DEFANG_DISABLE_ANALYTICS` - If set to `true`, disables sending analytics to Defang; defaults to `false`
-* `DEFANG_FABRIC` - The address of the Defang Fabric to use; defaults to `fabric-prod1.defang.dev`
-* `DEFANG_HIDE_HINTS` - If set to `true`, hides hints in the CLI output; defaults to `false`
-* `DEFANG_HIDE_UPDATE` - If set to `true`, hides the update notification; defaults to `false`
-* `DEFANG_PROVIDER` - The name of the cloud provider to use, `auto` (default), `aws`, or `defang`
-* `NO_COLOR` - If set to any value, disables color output; by default, color output is enabled depending on the terminal
-* `TZ` - The timezone to use for log timestamps: an IANA TZ name like `UTC` or `Europe/Amsterdam`; defaults to `Local`
-* `XDG_STATE_HOME` - The directory to use for storing state; defaults to `~/.local/state`
+
+- `COMPOSE_PROJECT_NAME` - The name of the project to use; overrides the name in the `compose.yaml` file
+- `DEFANG_ACCESS_TOKEN` - The access token to use for authentication; if not specified, uses token from `defang login`
+- `DEFANG_CD_BUCKET` - The S3 bucket to use for the BYOC CD pipeline; defaults to `defang-cd-bucket-…`
+- `DEFANG_CD_IMAGE` - The image to use for the Continuous Deployment (CD) pipeline; defaults to `public.ecr.aws/defang-io/cd:public-beta`
+- `DEFANG_DEBUG` - set this to `1` or `true` to enable debug logging
+- `DEFANG_DISABLE_ANALYTICS` - If set to `true`, disables sending analytics to Defang; defaults to `false`
+- `DEFANG_FABRIC` - The address of the Defang Fabric to use; defaults to `fabric-prod1.defang.dev`
+- `DEFANG_HIDE_HINTS` - If set to `true`, hides hints in the CLI output; defaults to `false`
+- `DEFANG_HIDE_UPDATE` - If set to `true`, hides the update notification; defaults to `false`
+- `DEFANG_PROVIDER` - The name of the cloud provider to use, `auto` (default), `aws`, or `defang`
+- `NO_COLOR` - If set to any value, disables color output; by default, color output is enabled depending on the terminal
+- `TZ` - The timezone to use for log timestamps: an IANA TZ name like `UTC` or `Europe/Amsterdam`; defaults to `Local`
+- `XDG_STATE_HOME` - The directory to use for storing state; defaults to `~/.local/state`

samples/nodejs/svelte-mysql/Dockerfile

@@ -0,0 +1,37 @@
+# Dockerfile for Svelte frontend and Node.js backend
+
+# Stage 1: Build Svelte frontend
+FROM node:16-alpine as frontend
+
+WORKDIR /frontend
+
+# Copy frontend source code
+COPY frontend/package*.json ./
+COPY frontend/ ./
+
+# Install dependencies and build the frontend
+RUN npm install --legacy-peer-deps && npm run build
+
+# Stage 2: Build Node.js backend
+FROM node:16-alpine as backend
+
+WORKDIR /app
+
+# Copy backend source code
+COPY backend/package*.json ./
+COPY backend/ ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the built Svelte files
+COPY --from=frontend /frontend/build ./public
+
+# Copy the backend source code
+COPY backend/ .
+
+# Expose the application on port 3001
+EXPOSE 3001
+
+# Command to run the backend
+CMD ["node", "server.js"]

samples/nodejs/svelte-mysql/README.md

@@ -0,0 +1,38 @@
+# Svelte, Node.js, and MySQL
+
+This sample project demonstrates how to deploy a full-stack application using Svelte for the frontend, Node.js for the backend, and MySQL for the database. The project uses Docker to containerize the services, making it easy to run in both development and production environments.
+
+## NOTE
+
+This sample showcases how you could deploy a full-stack application with Defang and Svelte and NodeJS. However, it deploys mysql db 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/defang-io/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/defang-io/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.yml 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 _docker compose up --build_ or run without using Docker by doing the following:
+
+1. run npm install to install the nodejs dependencies
+2. create an .env file on the svelte directory specifying the appropriate environment variables.
+3. run npm start
+
+### Editing the database/permissions etc.
+
+If you want to edit the database, such that you can deploy them to production, you should [install the mySQL CLI](https://dev.mysql.com/doc/mysql-shell/8.0/en/mysql-shell-install-linux-quick.html) and mySQL workbench to gain access to a GUI so that you can make your changes to the database. After running defang compose up these changes will be reflected.
+
+## Deploying
+
+1. Open the terminal and type `defang login`
+2. Type `defang compose up` in the CLI.
+3. Your app will be running within a few minutes.

samples/nodejs/svelte-mysql/backend/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "",
+  "main": "script.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node script.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.19.2",
+    "mysql2": "^3.9.7"
+  }
+}

samples/nodejs/svelte-mysql/backend/server.js

@@ -0,0 +1,115 @@
+const express = require('express');
+const mysql = require('mysql2');
+const cors = require('cors');
+const path = require('path');
+
+const app = express();
+app.use(cors());
+app.use(express.json());
+
+// Create a pool of connections
+const pool = mysql.createPool({
+    host: process.env.DATABASE_HOST,
+    user: process.env.DATABASE_USER,
+    password: process.env.DATABASE_PASSWORD,
+    database: process.env.DATABASE_NAME,
+    waitForConnections: true,
+    connectionLimit: 10,
+    queueLimit: 0
+});
+
+// Function to ensure 'tasks' table exists
+const ensureTasksTable = () => {
+    const sql = `
+        CREATE TABLE IF NOT EXISTS tasks (
+            id INT AUTO_INCREMENT PRIMARY KEY,
+            title VARCHAR(255) NOT NULL,
+            completed BOOLEAN NOT NULL DEFAULT FALSE
+        );
+    `;
+    pool.query(sql, (error, results) => {
+        if (error) {
+            console.error('Error ensuring tasks table exists:', error);
+            return;
+        }
+        console.log('Tasks table checked/created.');
+    });
+};
+
+// Ensure the tasks table is created before starting the server
+pool.getConnection((err, connection) => {
+    if (err) {
+        console.error('Error connecting to the database:', err);
+        process.exit(1);
+    } else {
+        console.log('Connected to the database.');
+        ensureTasksTable();
+        connection.release();
+
+        // Start the server only after ensuring the table exists
+        const PORT = process.env.PORT || 3001;
+        app.listen(PORT, () => {
+            console.log(`Server running on port ${PORT}`);
+        });
+    }
+});
+
+// API Routes
+app.get('/tasks', (req, res) => {
+    pool.query('SELECT * FROM tasks', (error, results) => {
+        if (error) {
+            console.error(error);
+            return res.status(500).json({ error: "Internal server error" });
+        }
+        res.json(results);
+    });
+});
+
+app.post('/tasks', (req, res) => {
+    const { title } = req.body;
+    pool.query('INSERT INTO tasks SET ?', { title, completed: false }, (error, results) => {
+        if (error) {
+            console.error(error);
+            return res.status(500).json({ error: "Internal server error" });
+        }
+        res.status(201).json({ id: results.insertId, title, completed: false });
+    });
+});
+
+app.put('/tasks/:id', (req, res) => {
+    const { id } = req.params;
+    const { title, completed } = req.body;
+    pool.query(
+        'UPDATE tasks SET title = ?, completed = ? WHERE id = ?',
+        [title, completed, id],
+        (error, results) => {
+            if (error) {
+                console.error(error);
+                return res.status(500).json({ error: "Internal server error" });
+            }
+            if (results.affectedRows === 0) {
+                return res.status(404).json({ error: "Task not found" });
+            }
+            res.json({ id, title, completed });
+        }
+    );
+});
+
+app.delete('/tasks/:id', (req, res) => {
+    const { id } = req.params;
+    pool.query('DELETE FROM tasks WHERE id = ?', [id], (error, results) => {
+        if (error) {
+            console.error(error);
+            return res.status(500).json({ error: "Internal server error" });
+        }
+        res.send('Task deleted.');
+    });
+});
+
+// Serve static files from the "public" directory
+app.use(express.static(path.join(__dirname, 'public')));
+
+// Serve the frontend from the root
+app.get('*', (req, res) => {
+    res.sendFile(path.join(__dirname, 'public', 'index.html'));
+});

samples/nodejs/svelte-mysql/compose.yml

@@ -0,0 +1,35 @@
+version: "3.8"
+name: svelte
+services:
+  db:
+    image: mysql:latest
+    environment:
+      MYSQL_ALLOW_EMPTY_PASSWORD: true
+      MYSQL_DATABASE: todoApp
+      MYSQL_USER: admin
+      MYSQL_PASSWORD: Defang12345
+    volumes:
+      - mysql_data:/var/lib/mysql
+    ports:
+      - mode: host
+        target: 3306
+
+  app:
+    build: .
+    restart: unless-stopped
+    environment:
+      DATABASE_HOST: db
+      DATABASE_USER: admin
+      DATABASE_PASSWORD: Defang12345
+      DATABASE_NAME: todoApp
+    ports:
+      - "3001:3001"
+    depends_on:
+      - db
+
+networks:
+  default:
+    name: backend-network
+
+volumes:
+  mysql_data:

samples/nodejs/svelte-mysql/frontend/.npmrc

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