Merge pull request #208 from DefangLabs/linda-html-css-js

HTML & CSS & JavaScript sample
DefangLabs · Sep 28, 2024 · e67caa9 · e67caa9
2 parents bbc7045 + 50655d7
commit e67caa9
Show file tree

Hide file tree

Showing 11 changed files with 150 additions and 0 deletions.
diff --git a/samples/html-css-js/.github/workflows/deploy.yaml b/samples/html-css-js/.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]
diff --git a/samples/html-css-js/README.md b/samples/html-css-js/README.md
@@ -0,0 +1,35 @@
+# HTML & CSS & JavaScript
+
+[1-click deploy](https://portal.defang.dev/redirect?url=https%3A%2F%2Fgithub.com%2Fnew%3Ftemplate_name%3Dsample-html-css-js-template%26template_owner%3DDefangSamples)
+
+This sample shows how to get a static HTML + CSS + JavaScript website up and running with Defang.
+
+## Prerequisites
+
+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 with your AWS account
+3. (Optional for local development) [Docker CLI](https://docs.docker.com/engine/install/)
+
+## Development
+
+To run the application locally, you can use the following command:
+
+```bash
+docker compose up
+```
+
+## 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.
+
+---
+
+Title: HTML & CSS & JavaScript
+
+Short Description: A simple HTML + CSS + JavaScript website running on Defang. 
+
+Tags: HTML, CSS, JavaScript, Frontend
+
+Languages: HTML, CSS, JavaScript
diff --git a/samples/html-css-js/app/.dockerignore b/samples/html-css-js/app/.dockerignore
diff --git a/samples/html-css-js/app/.gitignore b/samples/html-css-js/app/.gitignore
diff --git a/samples/html-css-js/app/Dockerfile b/samples/html-css-js/app/Dockerfile
@@ -0,0 +1,18 @@
+# Use nginx as the base image
+FROM nginx:alpine
+
+# Set working directory to /app
+WORKDIR /app
+
+# Copy project files to nginx directory
+COPY . /usr/share/nginx/html
+
+# Set correct permissions for the project files
+RUN chmod -R 755 /usr/share/nginx/html && chown -R nginx:nginx /usr/share/nginx/html
+
+# Copy the config file to nginx directory
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Expose the port your app runs on
+EXPOSE 80
+
diff --git a/samples/html-css-js/app/index.html b/samples/html-css-js/app/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HTML Sample</title>
+    <link rel="stylesheet" href="/style.css" type="text/css">
+    <script src="script.js"></script>
+</head>
+<body>
+    <h1>Welcome to Defang!</h1>
+    <p>Start developing with our <a href="https://docs.defang.io/docs/samples">samples</a>.</p>
+    <a href="/page2.html"><button>Go to Page 2</button></a>
+</body>
+</html>
diff --git a/samples/html-css-js/app/nginx.conf b/samples/html-css-js/app/nginx.conf
@@ -0,0 +1,15 @@
+http {
+    include mime.types;
+    sendfile on;
+    server {
+        listen 80;
+        server_name localhost;
+
+        location / {
+            root /usr/share/nginx/html;
+            index index.html;
+        }
+    }
+}
+
+events {}
diff --git a/samples/html-css-js/app/page2.html b/samples/html-css-js/app/page2.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Page 2 of HTML Sample</title>
+    <link rel="stylesheet" href="/style.css" type="text/css">
+    <script src="script.js"></script>
+</head>
+<body>
+    <h1>Cloud, Simplified!</h1>
+    <p>Having fun? For more, go to our official website at <a href="https://defang.io/">defang.io</a>!</p>
+    <a href="/"><button>Visit home page</button></a>
+</body>
+</html>
diff --git a/samples/html-css-js/app/script.js b/samples/html-css-js/app/script.js
@@ -0,0 +1 @@
+// Add your Javascript code here
diff --git a/samples/html-css-js/app/style.css b/samples/html-css-js/app/style.css
@@ -0,0 +1,13 @@
+body {
+    background-color: #ffffff;
+}
+
+h1 {
+    color: #0F71BE;
+}
+
+p {
+    color: #28A2E9;
+}
+
+/* Add more CSS styling */
diff --git a/samples/html-css-js/compose.yaml b/samples/html-css-js/compose.yaml
@@ -0,0 +1,18 @@
+services:
+  app:
+    # uncomment to add your own domain
+    # domainname: example.com
+    restart: unless-stopped
+    build:
+      context: ./app
+      dockerfile: Dockerfile
+    ports: 
+      - target: 80
+        published: 8080
+        mode: ingress
+    deploy:
+      resources:
+        reservations:
+          memory: 256M
+    healthcheck:
+      test: ["CMD", "wget", "-q", "--spider", "http://localhost:80/"]