chore: comment legacy api nginx route

ALB sends /api/* to an unreachable backend target group (502 on apex).
Use VITE_API_PREFIX=/apnew with nginx proxy to backend-1 until the listener rule is removed.

Co-authored-by: Cursor <cursoragent@cursor.com>

.gitea/workflows/deploy.yml

@@ -34,7 +34,8 @@ jobs:
       - name: Build
         run: npm run build
         env:
-          VITE_API_URL: https://api.ark-library.com
+          VITE_API_URL: ""
+          VITE_API_PREFIX: "/apnew"
           VITE_DISABLE_ADMIN: "true"
 
       - name: Setup SSH key

README.md

@@ -72,8 +72,8 @@ src/
   adminRouteTree.tsx       # admin routes
   components/              # reusable public components
   layouts/                 # public/admin layout shells
-  pages/                   # public pages; one folder per page, e.g. Home/index.tsx
-  pages/admin/             # admin pages; one folder per page, e.g. Resources/index.tsx
+  pages/                   # public pages
+  pages/admin/             # admin pages
   utils/                   # formatting/display helpers
 ```
 

deploy/nginx-frontend-locations.inc

@@ -0,0 +1,105 @@
+# Shared SPA locations. Browser calls same-origin /apnew/api/ (VITE_API_PREFIX=/apnew).
+# /apnew/api/ avoids ALB listener rule that sends /api/* to an unreachable backend target group.
+# Nginx proxies internally to ark-library-backend-1 (Tailscale); Host header for backend TLS.
+# Legacy /api/ locations are commented below for reference only.
+gzip on;
+gzip_vary on;
+gzip_proxied any;
+gzip_comp_level 5;
+gzip_types text/plain text/css application/javascript application/json application/xml image/svg+xml;
+gzip_min_length 256;
+
+location ^~ /apnew/api/admin {
+  return 404;
+}
+# Legacy same-origin /api admin block. Disabled while production uses /apnew/api.
+# location ^~ /api/admin {
+#   return 404;
+# }
+location ^~ /admin {
+  return 404;
+}
+
+location ^~ /apnew/api/ {
+  proxy_pass https://100.93.205.19/api/;
+  proxy_http_version 1.1;
+  proxy_ssl_server_name on;
+  proxy_set_header Host api.ark-library.com;
+  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;
+  client_max_body_size 512m;
+  client_body_timeout 600s;
+  proxy_read_timeout 600s;
+  proxy_send_timeout 600s;
+}
+
+# Legacy same-origin /api proxy. Disabled while production uses /apnew/api.
+# location ^~ /api/ {
+#   proxy_pass https://100.93.205.19/api/;
+#   proxy_http_version 1.1;
+#   proxy_ssl_server_name on;
+#   proxy_set_header Host api.ark-library.com;
+#   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;
+#   client_max_body_size 512m;
+#   client_body_timeout 600s;
+#   proxy_read_timeout 600s;
+#   proxy_send_timeout 600s;
+# }
+
+location ^~ /uploads/ {
+  proxy_pass https://100.93.205.19/uploads/;
+  proxy_http_version 1.1;
+  proxy_ssl_server_name on;
+  proxy_set_header Host api.ark-library.com;
+  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;
+}
+
+location = /health {
+  default_type text/plain;
+  return 200 "ok\n";
+}
+
+location = /healthz {
+  default_type text/plain;
+  return 200 "ok\n";
+}
+
+location = /index.html {
+  try_files $uri =404;
+  add_header Cache-Control "no-cache, no-store, must-revalidate" always;
+}
+
+# Exact `/` so the HTML shell is never edge-cached without validators (avoids stale index.html → 404 on hashed /index-*.js or /assets/*).
+location = / {
+  try_files /index.html =404;
+  add_header Cache-Control "no-cache, no-store, must-revalidate" always;
+}
+
+location = /assets/logo-primary.webp {
+  try_files $uri =404;
+  add_header Cache-Control "public, max-age=3600, stale-while-revalidate=86400" always;
+}
+location ^~ /assets/ark-library/ {
+  try_files $uri =404;
+  add_header Cache-Control "public, max-age=86400, stale-while-revalidate=604800" always;
+}
+
+location ^~ /assets/ {
+  try_files $uri =404;
+  add_header Cache-Control "public, max-age=31536000, immutable" always;
+}
+
+# Hashed entry chunk at /index-[hash].js (Vite entryFileNames). Do not 308 to /assets — file lives here.
+location ~* ^/index-[A-Za-z0-9_-]+\.(js|mjs)$ {
+  try_files $uri =404;
+  add_header Cache-Control "public, max-age=31536000, immutable" always;
+}
+
+location / {
+  try_files $uri $uri/ /index.html;
+}

deploy/nginx-frontend-native.conf

@@ -0,0 +1,18 @@
+# Native system nginx (not Docker). SPA root: /var/www/ark-library
+# Snippet: /etc/nginx/snippets/ark-library-frontend.inc
+# ALB terminates TLS; apex uses X-Forwarded-Proto so we do not 301-loop behind the LB.
+
+server {
+  listen 80 default_server;
+  listen [::]:80 default_server;
+  server_name ark-library.com www.ark-library.com;
+
+  if ($http_x_forwarded_proto != "https") {
+    return 301 https://$host$request_uri;
+  }
+
+  root /var/www/ark-library;
+  index index.html;
+
+  include /etc/nginx/snippets/ark-library-frontend.inc;
+}

docs/workflow.md

@@ -27,8 +27,8 @@ git pull --ff-only origin main
 
 Use the existing structure:
 
-- Public pages: `src/pages/<PageName>/index.tsx`
-- Admin pages: `src/pages/admin/<PageName>/index.tsx`
+- Public pages: `src/pages/`
+- Admin pages: `src/pages/admin/`
 - Shared components: `src/components/`
 - API helpers/types: `src/api.ts`
 - Translations/copy: `src/i18n.tsx`

src/App.tsx

@@ -4,17 +4,17 @@ import { I18nProvider } from "./i18n";
 import { PublicLayout } from "./layouts/PublicLayout";
 import { Home } from "./pages/Home";
 import { Browse } from "./pages/Browse";
-import { CategoryPage } from "./pages/Category";
-import { SearchPage } from "./pages/Search";
-import { FavoritesPage } from "./pages/Favorites";
+import { CategoryPage } from "./pages/CategoryPage";
+import { SearchPage } from "./pages/SearchPage";
+import { FavoritesPage } from "./pages/FavoritesPage";
 import { ResourceDetail } from "./pages/ResourceDetail";
-import { AboutPage } from "./pages/About";
+import { AboutPage } from "./pages/AboutPage";
 import { adminUiPrefix } from "./adminPaths";
 import { AdminRouteTree } from "./adminRouteTree";
 import { AdminRouterModeProvider } from "./adminRouterMode";
 
 const WalletPage = lazy(() =>
-  import("./pages/Wallet").then((module) => ({
+  import("./pages/WalletPage").then((module) => ({
     default: module.WalletPage,
   })),
 );

src/AppAdminOnly.tsx

@@ -3,11 +3,11 @@ import { I18nProvider } from "./i18n";
 import { adminUiPrefix } from "./adminPaths";
 import { AdminRouterModeProvider } from "./adminRouterMode";
 import { AdminLayout } from "./layouts/AdminLayout";
-import { AdminLogin } from "./pages/admin/Login";
-import { AdminDashboard } from "./pages/admin/Dashboard";
-import { AdminResources } from "./pages/admin/Resources";
-import { AdminResourceForm } from "./pages/admin/ResourceForm";
-import { AdminSearchLogs } from "./pages/admin/SearchLogs";
+import { AdminLogin } from "./pages/admin/AdminLogin";
+import { AdminDashboard } from "./pages/admin/AdminDashboard";
+import { AdminResources } from "./pages/admin/AdminResources";
+import { AdminResourceForm } from "./pages/admin/AdminResourceForm";
+import { AdminSearchLogs } from "./pages/admin/AdminSearchLogs";
 
 function NotFound() {
   return (

src/adminRouteTree.tsx

@@ -1,11 +1,11 @@
 import { Route } from "react-router-dom";
 import { adminUiPrefix } from "./adminPaths";
 import { AdminLayout } from "./layouts/AdminLayout";
-import { AdminLogin } from "./pages/admin/Login";
-import { AdminDashboard } from "./pages/admin/Dashboard";
-import { AdminResources } from "./pages/admin/Resources";
-import { AdminResourceForm } from "./pages/admin/ResourceForm";
-import { AdminSearchLogs } from "./pages/admin/SearchLogs";
+import { AdminLogin } from "./pages/admin/AdminLogin";
+import { AdminDashboard } from "./pages/admin/AdminDashboard";
+import { AdminResources } from "./pages/admin/AdminResources";
+import { AdminResourceForm } from "./pages/admin/AdminResourceForm";
+import { AdminSearchLogs } from "./pages/admin/AdminSearchLogs";
 
 /** Shared between full `App` (when admin enabled) and `AppAdminOnly`. */
 export function AdminRouteTree() {

src/api.ts

@@ -1,4 +1,5 @@
-export const apiBase = import.meta.env.VITE_API_URL || "";
+export const apiPrefix = import.meta.env.VITE_API_PREFIX || "";
+export const apiBase = (import.meta.env.VITE_API_URL || "") + apiPrefix;
 
 /** Go JSON encodes nil slices as null — normalize before .map() */
 export function itemsOrEmpty<T>(items: T[] | null | undefined): T[] {

src/pages/AboutPage.tsx

@@ -1,4 +1,4 @@
-import { useI18n } from "../../i18n";
+import { useI18n } from "../i18n";
 
 export function AboutPage() {
   const { t } = useI18n();

src/pages/Browse.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import { getJSON, itemsOrEmpty, type Resource } from "../../api";
-import { ResourceCard } from "../../components/ResourceCard";
-import { ResourceListFooter } from "../../components/ResourceListFooter";
-import { useI18n } from "../../i18n";
-import { typeFilterLabel } from "../../resourceTypeLabels";
+import { getJSON, itemsOrEmpty, type Resource } from "../api";
+import { ResourceCard } from "../components/ResourceCard";
+import { ResourceListFooter } from "../components/ResourceListFooter";
+import { useI18n } from "../i18n";
+import { typeFilterLabel } from "../resourceTypeLabels";
 
 const types = [
   "all",

src/pages/CategoryPage.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useMemo, useState } from "react";
 import { useParams, useSearchParams } from "react-router-dom";
-import { getJSON, itemsOrEmpty, type Category, type Resource } from "../../api";
-import { ResourceCard } from "../../components/ResourceCard";
-import { ResourceListFooter } from "../../components/ResourceListFooter";
-import { useI18n } from "../../i18n";
-import { typeFilterLabel } from "../../resourceTypeLabels";
+import { getJSON, itemsOrEmpty, type Category, type Resource } from "../api";
+import { ResourceCard } from "../components/ResourceCard";
+import { ResourceListFooter } from "../components/ResourceListFooter";
+import { useI18n } from "../i18n";
+import { typeFilterLabel } from "../resourceTypeLabels";
 
 const TYPE_FILTERS = [
   "all",

src/pages/FavoritesPage.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from "react";
-import { getJSON, type Resource } from "../../api";
-import { ResourceCard } from "../../components/ResourceCard";
-import { readFavorites } from "../../favorites";
-import { useI18n } from "../../i18n";
+import { getJSON, type Resource } from "../api";
+import { ResourceCard } from "../components/ResourceCard";
+import { readFavorites } from "../favorites";
+import { useI18n } from "../i18n";
 
 export function FavoritesPage() {
   const { t, lang } = useI18n();

src/pages/Home.tsx

@@ -1,17 +1,17 @@
 import { ChevronRight } from "lucide-react";
 import { Link } from "react-router-dom";
 import { useEffect, useRef, useState } from "react";
-import { getJSON, itemsOrEmpty, type Category, type Resource } from "../../api";
-import { CategoryIcon } from "../../components/CategoryIcon";
-import { FigmaBanner } from "../../components/FigmaBanner";
+import { getJSON, itemsOrEmpty, type Category, type Resource } from "../api";
+import { CategoryIcon } from "../components/CategoryIcon";
+import { FigmaBanner } from "../components/FigmaBanner";
 import {
   ComingSoonLatestUpdateRow,
   LatestUpdateRow,
-} from "../../components/LatestUpdateRow";
-import { RecommendedCard } from "../../components/RecommendedCard";
-import { SectionHeader } from "../../components/SectionHeader";
-import { useI18n } from "../../i18n";
-import { categoryCardLines } from "../../utils/categoryDisplay";
+} from "../components/LatestUpdateRow";
+import { RecommendedCard } from "../components/RecommendedCard";
+import { SectionHeader } from "../components/SectionHeader";
+import { useI18n } from "../i18n";
+import { categoryCardLines } from "../utils/categoryDisplay";
 
 export function Home() {
   const { t, lang } = useI18n();

src/pages/ResourceDetail.tsx

@@ -8,15 +8,15 @@ import {
   postJSON,
   postFavoriteDelta,
   type Resource,
-} from "../../api";
+} from "../api";
 import {
   resourceLanguageLabel,
   resourceTypeLabel,
-} from "../../resourceTypeLabels";
-import { ResourceCard } from "../../components/ResourceCard";
-import { isFavorite, toggleFavorite } from "../../favorites";
-import { useI18n } from "../../i18n";
-import { isLikelyVideoPath } from "../../video";
+} from "../resourceTypeLabels";
+import { ResourceCard } from "../components/ResourceCard";
+import { isFavorite, toggleFavorite } from "../favorites";
+import { useI18n } from "../i18n";
+import { isLikelyVideoPath } from "../video";
 
 export function ResourceDetail() {
   const { id } = useParams();

src/pages/SearchPage.tsx

@@ -1,10 +1,10 @@
 import { useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "react-router-dom";
-import { getJSON, itemsOrEmpty, postJSON, type Resource } from "../../api";
-import { ResourceCard } from "../../components/ResourceCard";
-import { ResourceListFooter } from "../../components/ResourceListFooter";
-import { useI18n } from "../../i18n";
-import { typeFilterLabel } from "../../resourceTypeLabels";
+import { getJSON, itemsOrEmpty, postJSON, type Resource } from "../api";
+import { ResourceCard } from "../components/ResourceCard";
+import { ResourceListFooter } from "../components/ResourceListFooter";
+import { useI18n } from "../i18n";
+import { typeFilterLabel } from "../resourceTypeLabels";
 
 const types = [
   "all",

src/pages/WalletPage.tsx

@@ -1,9 +1,9 @@
 import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
 import { WagmiProvider } from "wagmi";
 import "@rainbow-me/rainbowkit/styles.css";
-import { WalletLoginControls } from "../../components/WalletLoginControls";
-import { useI18n } from "../../i18n";
-import { wagmiConfig } from "../../wagmiConfig";
+import { WalletLoginControls } from "../components/WalletLoginControls";
+import { useI18n } from "../i18n";
+import { wagmiConfig } from "../wagmiConfig";
 
 export function WalletPage() {
   const { t } = useI18n();

src/pages/admin/AdminDashboard.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { getJSONAuth } from "../../../api";
-import { getToken } from "../../../admin/token";
-import { useAdminT } from "../../../admin/useAdminT";
+import { getJSONAuth } from "../../api";
+import { getToken } from "../../admin/token";
+import { useAdminT } from "../../admin/useAdminT";
 
 type Dash = {
   totalResources: number;

src/pages/admin/AdminLogin.tsx

@@ -1,10 +1,10 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { postJSON } from "../../../api";
-import { setToken } from "../../../admin/token";
-import { useAdminT } from "../../../admin/useAdminT";
-import { useAdminRouterMode } from "../../../adminRouterMode";
-import { adminUiPrefix } from "../../../adminPaths";
+import { postJSON } from "../../api";
+import { setToken } from "../../admin/token";
+import { useAdminT } from "../../admin/useAdminT";
+import { useAdminRouterMode } from "../../adminRouterMode";
+import { adminUiPrefix } from "../../adminPaths";
 
 export function AdminLogin() {
   const t = useAdminT();

src/pages/admin/AdminResourceForm.tsx

@@ -7,12 +7,12 @@ import {
   putJSON,
   uploadFile,
   type Category,
-} from "../../../api";
-import { getToken } from "../../../admin/token";
-import { useAdminT } from "../../../admin/useAdminT";
-import { resourceTypeDisplay } from "../../../resourceTypeLabels";
-import { adminUiPrefix } from "../../../adminPaths";
-import { useAdminRouterMode } from "../../../adminRouterMode";
+} from "../../api";
+import { getToken } from "../../admin/token";
+import { useAdminT } from "../../admin/useAdminT";
+import { resourceTypeDisplay } from "../../resourceTypeLabels";
+import { adminUiPrefix } from "../../adminPaths";
+import { useAdminRouterMode } from "../../adminRouterMode";
 
 const types = [
   "image",

src/pages/admin/AdminResources.tsx

@@ -6,12 +6,12 @@ import {
   itemsOrEmpty,
   type AdminResource,
   type Category,
-} from "../../../api";
-import { getToken } from "../../../admin/token";
-import { resourceTypeDisplay } from "../../../resourceTypeLabels";
-import { useAdminT } from "../../../admin/useAdminT";
-import { adminUiPrefix } from "../../../adminPaths";
-import { useAdminRouterMode } from "../../../adminRouterMode";
+} from "../../api";
+import { getToken } from "../../admin/token";
+import { resourceTypeDisplay } from "../../resourceTypeLabels";
+import { useAdminT } from "../../admin/useAdminT";
+import { adminUiPrefix } from "../../adminPaths";
+import { useAdminRouterMode } from "../../adminRouterMode";
 
 function statusLabel(t: (k: string) => string, s: string) {
   if (s === "published") return t("published");

src/pages/admin/AdminSearchLogs.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
-import { getJSONAuth } from "../../../api";
-import { getToken } from "../../../admin/token";
-import { useAdminT } from "../../../admin/useAdminT";
+import { getJSONAuth } from "../../api";
+import { getToken } from "../../admin/token";
+import { useAdminT } from "../../admin/useAdminT";
 
 type Row = { id: number; query: string; createdAt: string };
 

src/vite-env.d.ts

@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
   readonly VITE_API_URL: string;
+  readonly VITE_API_PREFIX?: string;
   readonly VITE_WALLETCONNECT_PROJECT_ID: string;
   readonly VITE_ADMIN_UI_PREFIX?: string;
   /** When `"true"`, bundle admin UI only (no public pages); use with `VITE_ADMIN_UI_PREFIX` or default secret prefix. */

vite.config.ts

@@ -20,6 +20,11 @@ export default defineConfig(({ mode }) => {
     server: {
       port: 5173,
       proxy: {
+        "/apnew/api": {
+          target: apiProxyTarget,
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/apnew/, ""),
+        },
         "/api": { target: apiProxyTarget, changeOrigin: true },
         "/uploads": { target: apiProxyTarget, changeOrigin: true },
       },