TMP

Makefile-os

@@ -53,7 +53,6 @@ endif
 DOCKER_COMPOSE_ARGS := \
 	-d \
 	--remove-orphans \
-	--no-build \
 	--quiet-pull \
 
 ifneq ($(DOCKER_WAIT),)

docker-compose.yml

@@ -189,6 +189,30 @@ services:
       - 7011:7011
     command: yarn amo:olympia
 
+  addons-frontend-next:
+    <<: *env
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile.dev
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+    ports:
+      - "3000:3000"
+    environment:
+      - NODE_ENV=development
+      - VITE_PORT=3000
+      - HOST=0.0.0.0
+    command: npm run dev
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:3000/remix/"]
+      interval: 10s
+      timeout: 5s
+      retries: 3
+      start_period: 10s
+    depends_on:
+      - nginx
+
 networks:
   default:
     driver: bridge

docker/nginx/addons.conf

@@ -57,6 +57,27 @@ server {
         try_files $uri @frontendamo;
     }
 
+    location /remix/ {
+        proxy_pass http://addons-frontend-next/;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_buffering off;
+
+        # Add timeout settings
+        proxy_connect_timeout 60s;
+        proxy_send_timeout 60s;
+        proxy_read_timeout 60s;
+
+        # Add error handling
+        error_page 502 503 504 /50x.html;
+    }
+
     location @olympia {
         uwsgi_pass  web;
         include     uwsgi_params;
@@ -117,3 +138,8 @@ upstream addons-frontend {
 upstream static {
     server static:5173;
 }
+
+# Add the new upstream for remix-frontend
+upstream addons-frontend-next {
+    server addons-frontend-next:3000;
+}

frontend/Dockerfile.dev

@@ -0,0 +1,16 @@
+FROM node:20-slim
+
+WORKDIR /app
+
+COPY package*.json ./
+
+RUN npm install
+
+COPY . .
+
+ENV VITE_PORT=3000
+ENV HOST=0.0.0.0
+
+EXPOSE ${VITE_PORT}
+
+CMD ["npm", "run", "dev"]

frontend/package.json

@@ -40,4 +40,4 @@
   "engines": {
     "node": ">=20.0.0"
   }
-}
+}

frontend/vite.config.ts

@@ -1,5 +1,5 @@
 import { vitePlugin as remix } from "@remix-run/dev";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 declare module "@remix-run/node" {
@@ -8,20 +8,30 @@ declare module "@remix-run/node" {
   }
 }
 
-export default defineConfig({
-  server: {
-    port: 3000,
-  },
-  plugins: [
-    remix({
-      future: {
-        v3_fetcherPersist: true,
-        v3_relativeSplatPath: true,
-        v3_throwAbortReason: true,
-        v3_singleFetch: true,
-        v3_lazyRouteDiscovery: true,
-      },
-    }),
-    tsconfigPaths(),
-  ],
+export default defineConfig((config) => {
+  const env = loadEnv(config.mode, process.cwd(), "");
+  const base = "/remix/";  // Must have trailing slash
+
+  return {
+    base,
+    server: {
+      port: parseInt(env.VITE_PORT),
+      host: true,
+      strictPort: true,
+      allowedHosts: ["olympia.test", "localhost"]
+    },
+    plugins: [
+      remix({
+        basename: base.slice(0, -1),  // Remove trailing slash for basename
+        future: {
+          v3_fetcherPersist: true,
+          v3_relativeSplatPath: true,
+          v3_throwAbortReason: true,
+          v3_singleFetch: true,
+          v3_lazyRouteDiscovery: true,
+        },
+      }),
+      tsconfigPaths(),
+    ],
+  };
 });