blob: b7e849905eafd217fdfe53b39003d603a1640373 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
# Bicycle Wheel Circumference
A small learning app (React + TypeScript + Vite) to measure bicycle wheel circumference by rolling the wheel or by entering diameter. This project is a port of the tire size calculator that once lived on the Cateye website but was removed. It was reimplemented here for usefulness and learning.
## Tech
React · TypeScript · Vite · TailwindCSS · DaisyUI · Docker · Nginx
---
## Development (Docker)
```bash
docker compose build
docker compose up -d
```
Served on port 5173 — open http://localhost:5173
See [docker_readme.md](docker_readme.md) for the full development Docker guide.
---
## Production Static Build (Docker)
The production setup uses a **multi-stage Docker build**:
1. **Build stage** — Installs dependencies and runs `npm run build` to produce static assets in `dist/`.
2. **Production stage** — Copies the built assets into an Nginx Alpine image that serves them on port 80.
### Build and run locally
```bash
docker compose -f docker-compose.prod.yml up -d --build
```
Then open http://localhost:80.
> **Note:** The `ports` mapping in `docker-compose.prod.yml` is commented out by default (intended for Dokploy/Traefik). Uncomment the `ports` line for local testing:
>
> ```yaml
> ports:
> - "80:80"
> ```
### Files involved
| File | Purpose |
| ------------------------- | -------------------------------------------------------- |
| `Dockerfile.prod` | Multi-stage build: Node (build) → Nginx (serve) |
| `docker-compose.prod.yml` | Production compose file (single `web` service) |
| `nginx.conf` | Nginx config with SPA fallback routing and gzip |
---
## Deploying to Dokploy
Dokploy is a self-hosted PaaS that uses Traefik as a reverse proxy. The production compose file is ready for Dokploy out of the box.
### Prerequisites
- A VPS with [Dokploy installed](https://docs.dokploy.com/get-started/installation)
- A domain name with a DNS **A record** pointing to your server's IP
- Your GitHub repository connected to Dokploy (see below)
### Step 1 — Connect GitHub to Dokploy
1. Log in to the Dokploy dashboard (`http://<your-server-ip>:3000`).
2. Go to **Settings → Git Providers**.
3. Click **"+ Add Git Provider"** and follow the prompts to create a **GitHub App**.
4. After creation, click **"Install"** next to the provider and grant access to this repository (or all repositories).
### Step 2 — Create a Project
1. Go to **Dashboard → Projects**.
2. Click **"+ Create Project"**, give it a name (e.g. "Tire Calculator"), and click **"Create"**.
### Step 3 — Create a Compose Service
1. Inside the project, click **"+ Create Service"** → **"Compose"**.
2. Fill in:
- **Name**: e.g. "tirecalc"
- **Compose Type**: `docker-compose` (default)
3. Click **"Create"**.
### Step 4 — Configure the Source
1. On the compose page, set the source to **"GitHub"**.
2. Select your **GitHub Provider**, **Repository**, and **Branch** (e.g. `main`).
3. Set **Compose Path** to:
```
./docker-compose.prod.yml
```
4. Click **"Save"**.
### Step 5 — Add a Domain
1. Go to the **"Domains"** tab.
2. Click **"+ Add Domain"** and fill in:
- **Host**: your domain (e.g. `tirecalc.example.com`)
- **Service Name**: `web` (must match the service name in `docker-compose.prod.yml`)
- **Port**: `80`
- **HTTPS**: toggle **on**
- **Certificate Type**: `letsencrypt`
3. Click **"Save"**.
> Make sure your DNS A record is already pointing to the server. Let's Encrypt needs this to issue a certificate.
### Step 6 — Deploy
1. Click the **"Deploy"** button.
2. Monitor progress in the **"Deployments"** tab.
3. Once the status shows **"Done" ✅**, the app is live at your domain.
### Step 7 — Enable Auto-Deploy (optional)
Auto-deploy is enabled by default when using the GitHub App integration. Every push to the configured branch will trigger a new deployment automatically.
If you prefer manual webhook control:
1. Find the **webhook URL** in the compose settings:
```
https://<your-dokploy-host>/api/deploy/compose/<refreshToken>
```
2. In your GitHub repo, go to **Settings → Webhooks → Add webhook**.
3. Set:
- **Payload URL**: the webhook URL above
- **Content type**: `application/json`
- **Events**: "Just the push event"
4. Click **"Add webhook"**.
### Troubleshooting
| Problem | Likely cause | Fix |
| --- | --- | --- |
| 502 Bad Gateway | Container not running or wrong port | Check deployment logs; verify domain port is `80` and service name is `web` |
| Site not loading | DNS not configured | Add an A record pointing your domain to the server IP |
| SSL error | DNS not propagated yet | Wait a few minutes for propagation; check Traefik logs |
| Build fails | Missing dependencies or TypeScript errors | Check deployment logs for build output; run `npm run build` locally to reproduce |
| Stale content after deploy | Browser cache | Hard-refresh (`Ctrl-Shift-R`); Vite hashes asset filenames so this is rare |
|
