Skip to content

Commit c3429f6

Browse files
committed
feat(self-hosting): docker continuous deployment
1 parent bc458b0 commit c3429f6

File tree

7 files changed

+262
-11
lines changed

7 files changed

+262
-11
lines changed
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
name: Docker Deploy
2+
3+
on:
4+
push:
5+
branches:
6+
- docker
7+
8+
jobs:
9+
deploy:
10+
runs-on: ubuntu-latest
11+
steps:
12+
- name: SSH to server
13+
uses: appleboy/ssh-action@v1
14+
with:
15+
host: ${{ secrets.VPS_HOST }}
16+
username: ${{ secrets.VPS_USER }}
17+
password: ${{ secrets.VPS_PASS }}
18+
script: |
19+
cd livecodes
20+
git pull origin docker
21+
echo "${{ secrets.VPS_ENV }}" > .env
22+
docker compose build
23+
docker compose up -d
24+
docker system prune

Dockerfile

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ WORKDIR /app
77
COPY package*.json ./
88
COPY docs/package*.json docs/
99
COPY storybook/package*.json storybook/
10+
COPY server/package*.json server/
1011

1112
RUN npm ci
1213

docker-compose.yml

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,11 @@ services:
2323
- BROADCAST_TOKENS=${BROADCAST_TOKENS:-}
2424
- SANDBOX_HOST_NAME=${SANDBOX_HOST_NAME:-${HOST_NAME:-livecodes.localhost}}
2525
- SANDBOX_PORT=${SANDBOX_PORT:-8090}
26-
- LOG_URL=${LOG_URL:-}
26+
- LOG_URL=${LOG_URL:-null}
2727
- VALKEY_HOST=valkey
2828
- VALKEY_PORT=6379
29+
volumes:
30+
- ./assets:/srv/build/assets
2931

3032
valkey:
3133
image: valkey/valkey:8.1.2-alpine3.22

docs/docs/advanced/docker.mdx

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
# Docker Setup
2+
3+
LiveCodes is a [client-side app](../why.mdx#client-side). It can be easily self-hosted on any static file server or CDN (See [Self-Hosting guide](../features/self-hosting.mdx)).
4+
5+
LiveCodes core functionalities (e.g. editors, compilers, formatters, code execution, etc) run in the browser. However, some features require [external services](./services.mdx) which depend on server-side implementations.
6+
This docker setup provides an easy out-of-the-box implementations for self-hosting these services.
7+
8+
## Example
9+
10+
This is an example of a self-hosted deployment, that was deployed to a VPS using the included docker setup:
11+
12+
https://vps.livecodes.io/
13+
14+
This is the command used to build and run the app:
15+
16+
```sh
17+
HOST_NAME=vps.livecodes.io docker compose up --build -d
18+
```
19+
20+
## Requirements
21+
22+
- Docker
23+
- Docker Compose
24+
- Git (optional): for pulling updates.
25+
26+
<details>
27+
<summary>
28+
Install Git, Docker and Docker Compose on Ubuntu
29+
</summary>
30+
31+
This script installs git, docker, and docker compose on Ubuntu:
32+
33+
```sh
34+
#!/bin/bash
35+
36+
# Update package lists
37+
sudo apt update
38+
39+
# Install Git
40+
sudo apt install -y git
41+
42+
# Install Docker
43+
sudo apt install -y ca-certificates curl gnupg lsb-release
44+
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
45+
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
46+
sudo apt update
47+
sudo apt install -y docker-ce docker-ce-cli containerd.io
48+
49+
# Add current user to docker group
50+
sudo usermod -aG docker $USER
51+
newgrp docker # Apply group changes immediately
52+
53+
# Install Docker Compose
54+
sudo apt install -y docker-compose
55+
```
56+
57+
To use this script:
58+
59+
**Save**
60+
61+
Save the script to a file, for example: `install_docker_ubuntu.sh`.
62+
63+
**Make Executable**
64+
65+
Make the script executable with:
66+
67+
```sh
68+
chmod +x install_docker_ubuntu.sh
69+
```
70+
71+
**Run**
72+
73+
Execute the script using:
74+
```sh
75+
sudo ./install_docker_ubuntu.sh
76+
```
77+
78+
It's recommended to run it with `sudo` to ensure all necessary permissions are granted.
79+
80+
**Verify**
81+
82+
Verify the installations with:
83+
84+
```sh
85+
git --version
86+
docker --version
87+
docker compose version
88+
```
89+
</details>
90+
91+
## Getting Started
92+
93+
Clone the repo:
94+
95+
```sh
96+
git clone https://github.com/live-codes/livecodes.git
97+
```
98+
99+
Enter the directory:
100+
101+
```sh
102+
cd livecodes
103+
```
104+
105+
Optionally, checkout a specific branch:
106+
107+
```sh
108+
git checkout main
109+
```
110+
111+
Run docker compose:
112+
113+
```sh
114+
docker compose up -d
115+
```
116+
117+
By default, the app is served at https://livecodes.localhost
118+
119+
The hostname and many other options can be set using [environment variables](#environment-variables).
120+
121+
## Features
122+
123+
- Automatic HTTPS
124+
125+
This is provided by [Caddy server](https://caddyserver.com), which automatically obtains and renews TLS certificates.
126+
Local addresses (e.g. `localhost`, `livecodes.localhost`) are served over HTTPS using locally-trusted certificates.
127+
128+
- [Open Graph meta tags](https://ogp.me/)
129+
130+
Provide project-specific meta tags, that show projects title and description on social media cards.
131+
132+
- [oEmbed](https://oembed.com/)
133+
134+
Allows embedded representations on third party sites.
135+
136+
- [Short-URL share service](../features/share.mdx)
137+
138+
Generates a short URL that can be shared. The project config is stored in a [Valkey](https://valkey.io/) store (a Redis fork with a permissive open-source license).
139+
Data is persisted to disk every 60 seconds (See [Volumes](#volumes) section below).
140+
141+
- [Broadcast server](../features/broadcast.mdx)
142+
143+
Broadcasts updates to connected clients.
144+
145+
- CORS proxy
146+
147+
Allows [importing content](../features/import.mdx) from external URLs.
148+
149+
- Separate origin sandbox
150+
151+
Runs code in a separate origin [sandboxed iframe](https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/) to prevent cross-site scripting.
152+
153+
154+
## Environment Variables
155+
156+
The app can be customized by setting different environment variables.
157+
158+
159+
Environment variables can be defined in the `.env` file in the root of the repository (on the same level as `docker-compose.yml`).
160+
161+
```txt title=".env"
162+
HOST_NAME=playground.website.com
163+
```
164+
165+
Please note that some variables are used **during build**. So after setting environment variables, the app needs to be rebuilt. e.g.:
166+
167+
```sh
168+
docker compose up --build -d
169+
```
170+
171+
The following environment variables are supported:
172+
173+
| Variable | Description | Default |
174+
| --- | --- | --- |
175+
| `HOST_NAME` | Hostname of the app | `livecodes.localhost` |
176+
| `PORT` | Port of the app | `443` |
177+
| `SELF_HOSTED_SHARE` | Enable [share service](../features/share.mdx) | `true` |
178+
| `SELF_HOSTED_BROADCAST` | Enable [broadcast server](../features/broadcast.mdx) | `true` |
179+
| `BROADCAST_PORT` | Port of the broadcast server | `3030` |
180+
| `BROADCAST_TOKENS` | Comma-separated list of broadcast [user tokens](../features/broadcast.mdx#technical-details) | |
181+
| `SANDBOX_HOST_NAME` | Hostname of the sandbox | `$HOST_NAME` |
182+
| `SANDBOX_PORT` | Port of the sandbox | `8090` |
183+
| `FIREBASE_CONFIG` | [Firebase config object](https://firebase.google.com/docs/web/learn-more#config-object) (JSON), used for [authentication](../features/github-integration.mdx) | |
184+
| `DOCS_BASE_URL` | [Base URL](../features/self-hosting.mdx#custom-build) of the documentation | `null` |
185+
| `LOG_URL` | URL to send server-side analytics | `null` |
186+
187+
## Volumes
188+
189+
The following directories are mounted as volumes:
190+
191+
- `/data` - Persistent data is stored here (e.g. for Valkey and Caddy). Make sure to **backup** this.
192+
- `/assets` - Static assets saved here are served on the app URL (`/assets/`). This can be used to serve images, stylesheets, [custom modules](../features/module-resolution.mdx#custom-module-resolution), [custom types](../features/intellisense.mdx#custom-types), etc.
193+
194+
## Deployment

docs/docs/features/self-hosting.mdx

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,21 @@
11
# Self-Hosting
22

3-
The LiveCodes app can be self-hosted on any static file server or CDN.
3+
LiveCodes is a [client-side app](../why.mdx#client-side). It can be easily self-hosted on any static file server or CDN.
4+
5+
All core functionalities (e.g. editors, compilers, formatters, code execution, etc) run in the browser. However, some minor features require [external services](../advanced/services.mdx) (e.g. [sharing](./share.mdx) short URLs, [broadcast](./broadcast.mdx), etc).
6+
If you also want to self-host these services, you can use the [docker setup](../advanced/docker-setup.mdx).
47

58
## Guide
69

7-
The built app can be obtained by **one of the following** ways:
10+
The built app can be obtained using **any of the following** ways:
11+
12+
### Download a release
13+
14+
Download the app from the [releases](https://github.com/live-codes/livecodes/releases), extract the folder and add it to your website.
15+
16+
### Build from source
817

9-
- Download the app from the [releases](https://github.com/live-codes/livecodes/releases), extract the folder and add it to your website.
10-
- Fork the [GitHub repo](https://github.com/live-codes/livecodes) and clone it. You may wish to use the included setup to deploy to [GitHub Pages](https://pages.github.com/):
18+
Fork the [GitHub repo](https://github.com/live-codes/livecodes) and clone it. You may wish to use the included setup to deploy to [GitHub Pages](https://pages.github.com/):
1119

1220
```shell
1321
git clone https://github.com/{your-username}/livecodes
@@ -23,7 +31,21 @@ The built app can be obtained by **one of the following** ways:
2331
npm start # start local development with code watch, rebuild and live-reload
2432
```
2533

26-
- Fork the [GitHub repo](https://github.com/live-codes/livecodes) and use one of the hosting services that integrate with GitHub to allow automatic deploys on code push (e.g. [Cloudflare Pages](https://developers.cloudflare.com/pages/get-started), [Vercel](https://vercel.com/docs/concepts/git), [Netlify](https://docs.netlify.com/configure-builds/overview/), [Firebase](https://firebase.google.com/docs/hosting/github-integration)). When prompted, the build command is `npm run build` and the build output directory is `build`.
34+
### Git integration
35+
36+
Fork the [GitHub repo](https://github.com/live-codes/livecodes) and use one of the hosting services that integrate with GitHub to allow automatic deploys on code push (e.g. [Cloudflare Pages](https://developers.cloudflare.com/pages/get-started), [Netlify](https://docs.netlify.com/configure-builds/overview/), [Firebase](https://firebase.google.com/docs/hosting/github-integration), [Vercel](https://vercel.com/docs/concepts/git), etc.). When prompted, the build command is `npm run build` and the build output directory is `build`.
37+
38+
### Docker setup
39+
40+
The included docker setup provides alternative implementations for server-side features available in the [hosted app](https://livecodes.io), e.g. automatic HTTPS, [Open Graph meta tags](https://ogp.me/), [oEmbed](https://oembed.com/), [broadcast server](./broadcast.mdx), [short-URL share](./share.mdx), separate origin sandbox to run code, etc.
41+
42+
```sh
43+
docker-compose up -d
44+
```
45+
46+
By default, the app is served at https://livecodes.localhost.
47+
48+
For customization and detailed guide, see [Docker setup](../advanced/docker-setup.mdx) docs.
2749

2850
## Custom Build
2951

@@ -55,12 +77,20 @@ LiveCodes [sponsors](../sponsor.mdx) (Bronze sponsors and above) get access to m
5577

5678
:::
5779

58-
## Example
80+
## Examples
81+
82+
### GitHub Pages
5983

60-
This is an example of a self-hosted deployment, that was deployed to [GitHub Pages](https://pages.github.com/) using the [built-in setup](#guide):
84+
This is an example of a self-hosted deployment, that was deployed to [GitHub Pages](https://pages.github.com/) using the [built-in setup](#build-from-source):
6185

6286
https://live-codes.github.io/livecodes/
6387

88+
### Docker
89+
90+
This is an example of a self-hosted deployment, that was deployed to a VPS using the included [docker setup](../advanced/docker-setup.mdx):
91+
92+
https://vps.livecodes.io
93+
6494
## SDK Usage
6595

6696
The [SDK](../sdk/index.mdx) can still be used with the self-hosted app by providing the [`appUrl`](../sdk/js-ts.mdx#appurl) [embed option](../sdk/js-ts.mdx#embed-options).

docs/sidebars.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ const sidebars: SidebarsConfig = {
9494
type: 'doc',
9595
id: 'advanced/index',
9696
},
97-
items: ['advanced/custom-settings', 'advanced/services'],
97+
items: ['advanced/custom-settings', 'advanced/services', 'advanced/docker'],
9898
},
9999
{
100100
type: 'category',

functions/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,11 @@ export const logToAPI = (context: Context) => {
9393
const { data, env } = context;
9494
let logUrl = 'https://api2.livecodes.io/log';
9595
const customLogUrl = (env as any).LOG_URL;
96-
if (customLogUrl && typeof customLogUrl === 'string') {
96+
if (customLogUrl) {
9797
try {
9898
logUrl = new URL(customLogUrl).href;
9999
} catch {
100-
//
100+
return Promise.resolve();
101101
}
102102
}
103103
return fetch(logUrl, {

0 commit comments

Comments
 (0)