build(frontend): update docker image to use production env

docker-compose.prod.yml

@@ -38,7 +38,7 @@ services:
     depends_on:
       - backend
     ports:
-      - "5173:5173"
+      - "5173:80"
     restart: unless-stopped
 
   rtmp:

docker-compose.yml

@@ -37,7 +37,7 @@ services:
     depends_on:
       - backend
     ports:
-      - "5173:5173"
+      - "5173:80"
     restart: unless-stopped
 
   rtmp:

frontend/Dockerfile

@@ -1,9 +1,19 @@
-FROM node:20-alpine
+# --- Build stage ---
-
+FROM node:20-alpine AS build
 WORKDIR /app
 COPY package*.json ./
 RUN --mount=type=cache,target=/root/.npm npm ci
-
 COPY . .
-EXPOSE 5173
+RUN npm run build
-CMD ["npm", "run", "dev"]
+
+# --- Production stage ---
+FROM nginx:1.27-alpine AS prod
+COPY --from=build /app/dist /usr/share/nginx/html
+COPY frontend_nginx.conf /etc/nginx/conf.d/default.conf
+
+# Inject envs at runtime
+COPY env.sh /docker-entrypoint.d/40-env.sh
+RUN chmod +x /docker-entrypoint.d/40-env.sh
+
+EXPOSE 80
+CMD ["nginx", "-g", "daemon off;"]

frontend/env.sh

@@ -0,0 +1,10 @@
+#!/bin/sh
+set -eu
+
+cat <<EOF > /usr/share/nginx/html/env-config.js
+window._env_ = {
+  VITE_API_URL: "${VITE_API_URL:-}",
+  VITE_FRONTEND_URL: "${VITE_FRONTEND_URL:-}",
+  VITE_GOOGLE_CLIENT_ID: "${VITE_GOOGLE_CLIENT_ID:-}"
+};
+EOF

frontend/frontend_nginx.conf

@@ -0,0 +1,15 @@
+server {
+    listen 80;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+
+    error_page 500 502 503 504 /50x.html;
+    location = /50x.html {
+        root /usr/share/nginx/html;
+    }
+}

frontend/index.html

@@ -9,6 +9,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Newsreader:wght@100;200;300;400;500;600;700&family=IBM+Plex+Sans:wght@100;200;300;400;500;600;700&family=IBM+Plex+Mono:wght@100;200;300;400;500;600;700&display=swap" rel="stylesheet">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="/env-config.js"></script>
     <title>The VoD System</title>
   </head>
   <body>

frontend/src/App.tsx

@@ -15,6 +15,8 @@ import EditVod from "./pages/EditVod.tsx";
 import Profile from "./pages/Profile.tsx";
 import StreamControl from "./pages/StreamControl.tsx";
 import { GoogleOAuthProvider } from '@react-oauth/google';
+import {config} from "./config.ts";
+ import NotFound from "./pages/NotFound.tsx";
 
 
 function App() {
@@ -23,7 +25,7 @@ function App() {
     }, []);
 
     return (
-        <GoogleOAuthProvider clientId={import.meta.env.VITE_GOOGLE_CLIENT_ID}>
+        <GoogleOAuthProvider clientId={config.googleClientId}>
             <Router>
                 <Routes>
                     <Route element={<MainLayout />}>
@@ -38,6 +40,7 @@ function App() {
                         <Route path="/vods/:id/edit" element={<EditVod />} />
                         <Route path="/profile" element={<Profile />} />
                         <Route path="/stream" element={<StreamControl />} />
+                        <Route path="*" element={<NotFound />} />
                     </Route>
                 </Routes>
             </Router>

frontend/src/components/video/VideoCard.tsx

@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
 import { useEffect, useRef, useState } from "react";
 import { isThumbnailAvailable } from "../../utils/api/client.ts";
 import { MoreVertical, Pencil, Trash2 } from "lucide-react";
+import {config} from "../../config.ts";
 
 type VideoCardProps = {
     id: number,
@@ -19,7 +20,7 @@ type VideoCardProps = {
 }
 
 const fallbackThumbnail = "../../../public/default_thumbnail.png";
-const API_URL = import.meta.env.VITE_API_URL;
+const API_URL = config.apiUrl;
 
 const VideoCard = ({ id, title, duration, createdAt, onEdit, onDelete, className, mediaApiPath = '/api/v1/clips', playerPath = '/video', itemLabel = 'clip' }: VideoCardProps) => {
     const [timeAgo, setTimeAgo] = useState(dateToTimeAgo(stringToDate(createdAt)));

frontend/src/config.ts

@@ -0,0 +1,5 @@
+export const config = {
+    apiUrl: window._env_?.VITE_API_URL ?? import.meta.env.VITE_API_URL ?? '',
+    frontendUrl: window._env_?.VITE_FRONTEND_URL ?? import.meta.env.VITE_FRONTEND_URL ?? '',
+    googleClientId: window._env_?.VITE_GOOGLE_CLIENT_ID ?? import.meta.env.VITE_GOOGLE_CLIENT_ID ?? '',
+};

frontend/src/pages/ClipEdit.tsx

@@ -10,8 +10,9 @@ import { getJob } from "../utils/api/jobs"
 import type { VideoMetadata } from "../utils/types.ts";
 import Box from "../components/Box.tsx";
 import MetadataBox from "../components/video/MetadataBox.tsx";
+import {config} from "../config.ts";
 
-const API_URL = import.meta.env.VITE_API_URL;
+const API_URL = config.apiUrl;
 
 const ClipEdit = () => {
     const location = useLocation();

frontend/src/pages/NotFound.tsx

@@ -0,0 +1,24 @@
+import { Lock } from 'lucide-react';
+import {useNavigate} from "react-router-dom";
+
+const NotFound = () => {
+    const navigate = useNavigate();
+
+    const goHomePage = () => {
+        navigate("/")
+    }
+
+    return (
+        <div className="w-full min-h-screen flex flex-col items-center justify-center gap-3 text-center px-6">
+            <Lock className="w-8 h-8 text-faint-mono/60 mb-1" strokeWidth={1.5} />
+            <h2 className="font-heading text-2xl md:text-3xl text-faint-mono">
+                This page does not exist.
+            </h2>
+            <p className="text-sm text-faint-mono/70 max-w-xs">
+                <a onClick={goHomePage}>Click here</a> to get back to the home page.
+            </p>
+        </div>
+    );
+}
+
+export default NotFound;

frontend/src/utils/api/client.ts

@@ -1,4 +1,6 @@
-const API_URL = import.meta.env.VITE_API_URL;
+import {config} from "../../config.ts";
+
+const API_URL = config.apiUrl;
 
 class AuthError extends Error {
     constructor() { super("Not authenticated"); this.name = "AuthError"; }

frontend/src/vite-env.d.ts

@@ -1 +1,9 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />
+
+interface Window {
+    _env_?: {
+        VITE_API_URL?: string;
+        VITE_FRONTEND_URL?: string;
+        VITE_GOOGLE_CLIENT_ID?: string;
+    };
+}