ci: deploying on hetzner

apps/api/Dockerfile

@@ -1,4 +1,4 @@
-FROM --platform=$BUILDPLATFORM node:lts-slim AS base
+FROM --platform=$BUILDPLATFORM node:22-slim AS base
 WORKDIR /app
 
 COPY package.json .

apps/web/.env.production

@@ -0,0 +1 @@
+VITE_API_URL=KANEO_API_URL

apps/web/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:20-alpine AS builder
+FROM node:22-alpine AS builder
 
 RUN npm install -g bun
 
@@ -26,6 +26,9 @@ COPY --from=builder /app/apps/web/dist /usr/share/nginx/html
 
 COPY apps/web/nginx.conf /etc/nginx/conf.d/default.conf
 
+COPY apps/web/env.sh /docker-entrypoint.d/env.sh
+RUN chmod +x /docker-entrypoint.d/env.sh
+
 EXPOSE 80
 
 CMD ["nginx", "-g", "daemon off;"]

apps/web/env.sh

@@ -0,0 +1,9 @@
+#!/bin/sh
+for i in $(env | grep KANEO_)
+do
+    key=$(echo $i | cut -d '=' -f 1)
+    value=$(echo $i | cut -d '=' -f 2-)
+    echo $key=$value
+
+    find /usr/share/nginx/html -type f \( -name '*.js' -o -name '*.css' \) -exec sed -i "s|${key}|${value}|g" '{}' +
+done

apps/web/index.html

@@ -5,6 +5,15 @@
   <meta charset="UTF-8" />
   <link rel="icon" type="image/svg+xml" href="/logo.svg" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <script>
+    if (window.location.hostname === 'demo.kaneo.app') {
+      const script = document.createElement('script');
+      script.defer = true;
+      script.setAttribute('data-domain', 'demo.kaneo.app');
+      script.src = 'https://plausible.kaneo.app/js/script.js';
+      document.head.appendChild(script);
+    }
+  </script>
   <title>Kaneo</title>
 </head>
 

apps/web/src/routes/__root.tsx

@@ -1,20 +1,40 @@
+import TanStackRouterDevtools from "@/tanstack/router";
 import type { LoggedInUser } from "@/types/user";
 import type { QueryClient } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
-import { TanStackRouterDevtools } from "@tanstack/router-devtools";
+import {
+  Outlet,
+  createRootRouteWithContext,
+  redirect,
+} from "@tanstack/react-router";
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient;
   user: LoggedInUser | null | undefined;
 }>()({
   component: RootComponent,
+  async beforeLoad({ context: { user }, location }) {
+    const isRouteUnprotected = location.pathname.includes("auth");
+    const isOnDashboard = location.pathname.includes("dashboard");
+
+    if (user === null && !isRouteUnprotected) {
+      throw redirect({
+        to: "/auth/sign-in",
+      });
+    }
+
+    if (user && !isOnDashboard) {
+      throw redirect({
+        to: "/dashboard",
+      });
+    }
+  },
 });
 
 function RootComponent() {
   return (
     <>
-      <div className="flex w-full h-screen flex-col md:flex-row bg-zinc-50 dark:bg-zinc-950 scrollbar-thin scrollbar-thumb-zinc-700 scrollbar-track-zinc-900">
+      <div className="flex w-full h-screen flex-row bg-zinc-50 dark:bg-zinc-950 scrollbar-thin scrollbar-thumb-zinc-700 scrollbar-track-zinc-900">
         <Outlet />
       </div>
       <ReactQueryDevtools buttonPosition="top-right" />

apps/web/src/tanstack/router.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+const TanStackRouterDevtools =
+  process.env.NODE_ENV === "production"
+    ? () => null
+    : React.lazy(() =>
+        import("@tanstack/router-devtools").then((res) => ({
+          default: res.TanStackRouterDevtools,
+        })),
+      );
+
+export default TanStackRouterDevtools;

compose.yml

@@ -1,20 +1,49 @@
-version: '3.8'
-
 services:
-  api:
-    image: ghcr.io/kaneo-app/api:latest
-    environment:
-      - JWT_ACCESS=jwt_secret_goes_here
+  traefik:
+    image: "traefik:v3.3"
+    container_name: "traefik"
+    command:
+      - "--providers.docker=true"
+      - "--entryPoints.web.address=:80"
+      - "--entryPoints.websecure.address=:443"
     ports:
-      - "1337:1337"
+      - "80:80"
+      - "443:443"
+
+    networks:
+      - traefik-net
     volumes:
-      - .:/app
+      - "/var/run/docker.sock:/var/run/docker.sock:ro"
+
+  backend:
+    image: ghcr.io/kaneo-app/api:latest
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.backend.rule=Host(`demo-api.kaneo.app`)"
+      - "traefik.http.routers.backend.entrypoints=web"
+    environment:
+      JWT_ACCESS: "change_me"
+    networks:
+      - traefik-net
     restart: unless-stopped
 
-  web:
-    image: ghcr.io/kaneo-app/web:latest
-    ports:
-      - "80:80"
+  frontend:
+    build:
+      context: .
+      dockerfile: ./apps/web/Dockerfile
+    container_name: "kaneo-web"
+    environment:
+      KANEO_API_URL: "change_me"
+    labels:
+      - "traefik.enable=true"
+      - "traefik.http.routers.frontend.rule=Host(`demo.kaneo.app`)"
+      - "traefik.http.routers.frontend.entrypoints=web"
     depends_on:
-      - api
-    restart: unless-stopped
+      - backend
+    restart: unless-stopped
+    networks:
+      - traefik-net
+
+networks:
+  traefik-net:
+    driver: bridge