Skip to content

Commit e67caa9

Browse files
raphaeltmraphaeltm
authored
Merge pull request #208 from DefangLabs/linda-html-css-js
HTML & CSS & JavaScript sample
2 parents bbc7045 + 50655d7 commit e67caa9

File tree

11 files changed

+150
-0
lines changed

11 files changed

+150
-0
lines changed

‎samples/html-css-js/.github/workflows/deploy.yaml‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
name: Deploy
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
8+
jobs:
9+
deploy:
10+
runs-on: ubuntu-latest
11+
permissions:
12+
contents: read
13+
id-token: write
14+
15+
steps:
16+
- name: Checkout Repo
17+
uses: actions/checkout@v4
18+
19+
- name: Deploy
20+
uses: DefangLabs/[email protected]

‎samples/html-css-js/README.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# HTML & CSS & JavaScript
2+
3+
[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)
4+
5+
This sample shows how to get a static HTML + CSS + JavaScript website up and running with Defang.
6+
7+
## Prerequisites
8+
9+
1. Download [Defang CLI](https://github.com/DefangLabs/defang)
10+
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
11+
3. (Optional for local development) [Docker CLI](https://docs.docker.com/engine/install/)
12+
13+
## Development
14+
15+
To run the application locally, you can use the following command:
16+
17+
```bash
18+
docker compose up
19+
```
20+
21+
## Deploying
22+
23+
1. Open the terminal and type `defang login`
24+
2. Type `defang compose up` in the CLI.
25+
3. Your app will be running within a few minutes.
26+
27+
---
28+
29+
Title: HTML & CSS & JavaScript
30+
31+
Short Description: A simple HTML + CSS + JavaScript website running on Defang.
32+
33+
Tags: HTML, CSS, JavaScript, Frontend
34+
35+
Languages: HTML, CSS, JavaScript

‎samples/html-css-js/app/.dockerignore‎

Whitespace-only changes.

‎samples/html-css-js/app/.gitignore‎

Whitespace-only changes.

‎samples/html-css-js/app/Dockerfile‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Use nginx as the base image
2+
FROM nginx:alpine
3+
4+
# Set working directory to /app
5+
WORKDIR /app
6+
7+
# Copy project files to nginx directory
8+
COPY . /usr/share/nginx/html
9+
10+
# Set correct permissions for the project files
11+
RUN chmod -R 755 /usr/share/nginx/html && chown -R nginx:nginx /usr/share/nginx/html
12+
13+
# Copy the config file to nginx directory
14+
COPY nginx.conf /etc/nginx/nginx.conf
15+
16+
# Expose the port your app runs on
17+
EXPOSE 80
18+

‎samples/html-css-js/app/index.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>HTML Sample</title>
7+
<link rel="stylesheet" href="/style.css" type="text/css">
8+
<script src="script.js"></script>
9+
</head>
10+
<body>
11+
<h1>Welcome to Defang!</h1>
12+
<p>Start developing with our <a href="https://docs.defang.io/docs/samples">samples</a>.</p>
13+
<a href="/page2.html"><button>Go to Page 2</button></a>
14+
</body>
15+
</html>

‎samples/html-css-js/app/nginx.conf‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
http {
2+
include mime.types;
3+
sendfile on;
4+
server {
5+
listen 80;
6+
server_name localhost;
7+
8+
location / {
9+
root /usr/share/nginx/html;
10+
index index.html;
11+
}
12+
}
13+
}
14+
15+
events {}

‎samples/html-css-js/app/page2.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Page 2 of HTML Sample</title>
7+
<link rel="stylesheet" href="/style.css" type="text/css">
8+
<script src="script.js"></script>
9+
</head>
10+
<body>
11+
<h1>Cloud, Simplified!</h1>
12+
<p>Having fun? For more, go to our official website at <a href="https://defang.io/">defang.io</a>!</p>
13+
<a href="/"><button>Visit home page</button></a>
14+
</body>
15+
</html>

‎samples/html-css-js/app/script.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// Add your Javascript code here

‎samples/html-css-js/app/style.css‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
body {
2+
background-color: #ffffff;
3+
}
4+
5+
h1 {
6+
color: #0F71BE;
7+
}
8+
9+
p {
10+
color: #28A2E9;
11+
}
12+
13+
/* Add more CSS styling */

0 commit comments

Comments
 (0)