Build site

frontend/next.config.js

@@ -1,7 +1,11 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    "output": "export",
-    "distDir": '../verba/server/frontend/'
+    "output": "export"
 };
 
+// Set assetPrefix only in production/export mode
+if (process.env.NODE_ENV === 'production') {
+    nextConfig.assetPrefix = '/static';
+}
+
 module.exports = nextConfig;

frontend/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build && next export",
+    "build": "next build && next export && cp -r out/* ../verba/server/frontend/ && rm -r out",
     "start": "next start -H 0.0.0.0 -p 8080",
     "lint": "next lint"
   },

frontend/pages/_app.tsx

@@ -10,7 +10,10 @@ import "../app/globals.css";
 
 function MyApp({ Component, pageProps }: AppProps) {
   useEffect(() => {
-    document.body.style.backgroundImage = "url('/background.png')";
+    const bgUrl = process.env.NODE_ENV === 'production'
+      ? 'public/background.png'
+      : '/background.png';
+    document.body.style.backgroundImage = `url('${bgUrl}')`;
     document.body.style.backgroundPosition = "center";
     document.body.style.backgroundSize = "cover";
     document.body.style.backgroundRepeat = "no-repeat";

frontend/pages/document_explorer.tsx

@@ -21,7 +21,7 @@ export default function DocumentOnly() {
     useEffect(() => {
         const fetchAllDocuments = async () => {
             try {
-                const response = await fetch(apiHost + "/get_all_documents_verba");
+                const response = await fetch(apiHost + "/api/get_all_documents");
                 const data = await response.json();
                 console.log(data);
                 // Assuming the data is an array of documents
@@ -38,7 +38,7 @@ export default function DocumentOnly() {
         const fetchDocument = async () => {
             if (focusedDocument && focusedDocument._additional.id) {
                 try {
-                    const response = await fetch(apiHost + "/get_document_verba", {
+                    const response = await fetch(apiHost + "/api/get_document", {
                         method: "POST",
                         headers: {
                             "Content-Type": "application/json",

frontend/pages/index.tsx

@@ -2,11 +2,7 @@ import { useState, useEffect, useRef } from "react";
 import { ChatComponent, Message } from "../components/ChatComponent";
 import { DocumentComponent } from "../components/DocumentComponent";
 
-export const apiHost = process.env.NEXT_PUBLIC_VERBA_BACKEND || 'http://localhost:8000';
-
-if (!process.env.VERBA_BACKEND) {
-  console.log("Environment not set")
-}
+export const apiHost = 'http://localhost:8000';
 
 type DocumentChunk = {
   text: string;
@@ -46,7 +42,7 @@ export default function Home() {
   const checkApiHealth = async () => {
     try {
       // Change ENDPOINT based on your setup (Default to localhost:8000)
-      const response = await fetch(apiHost + '/health_verba');
+      const response = await fetch(apiHost + '/api/health');
 
       if (response.status === 200) {
         setApiStatus('Online');
@@ -81,7 +77,7 @@ export default function Home() {
       setIsFetching(true);
 
       try {
-        const response = await fetch(apiHost + "/query_verba", {
+        const response = await fetch(apiHost + "/api/query", {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
@@ -120,7 +116,7 @@ export default function Home() {
       checkApiHealth()
       if (focusedDocument && focusedDocument.doc_uuid) {
         try {
-          const response = await fetch(apiHost + "/get_document_verba", {
+          const response = await fetch(apiHost + "/api/get_document", {
             method: "POST",
             headers: {
               "Content-Type": "application/json",
@@ -162,7 +158,7 @@ export default function Home() {
 
   const fetchSuggestions = async (query: string) => {
     try {
-      const response = await fetch(apiHost + "/suggestions_verba", {
+      const response = await fetch(apiHost + "/api/suggestions", {
         method: "POST",
         headers: {
           "Content-Type": "application/json",

frontend/tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -20,9 +24,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "../verba/server/frontend//types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

verba/server/api.py

@@ -5,6 +5,8 @@
 from fastapi import FastAPI, status
 from fastapi.responses import JSONResponse
 from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
 from pydantic import BaseModel
 
 from dotenv import load_dotenv
@@ -24,7 +26,11 @@
 # FastAPI App
 app = FastAPI()
 
-origins = ["http://localhost:3000", "https://verba-o481.onrender.com"]
+origins = [
+    "http://localhost:3000",
+    "https://verba-o481.onrender.com",
+    "http://localhost:8000",
+]
 
 # Add middleware for handling Cross Origin Resource Sharing (CORS)
 app.add_middleware(
@@ -35,6 +41,20 @@
     allow_headers=["*"],
 )
 
+BASE_DIR = os.path.dirname(os.path.abspath(__file__))
+
+# Serve the assets (JS, CSS, images, etc.)
+app.mount(
+    "/static/_next",
+    StaticFiles(directory=os.path.join(BASE_DIR, "frontend/out/_next")),
+    name="next-assets",
+)
+
+# Serve the main page and other static files
+app.mount(
+    "/static", StaticFiles(directory=os.path.join(BASE_DIR, "frontend/out")), name="app"
+)
+
 
 class QueryPayload(BaseModel):
     query: str
@@ -44,8 +64,13 @@ class GetDocumentPayload(BaseModel):
     document_id: str
 
 
+@app.get("/")
+async def serve_frontend():
+    return FileResponse(os.path.join(BASE_DIR, "frontend/out/index.html"))
+
+
 # Define health check endpoint
-@app.get("/health_verba")
+@app.get("/api/health")
 async def root():
     try:
         if verba_engine.get_client().is_ready():
@@ -71,7 +96,7 @@ async def root():
         )
 
 
-@app.post("/query_verba")
+@app.post("/api/query")
 async def query(payload: QueryPayload):
     try:
         system_msg, results = verba_engine.query(payload.query)
@@ -93,7 +118,7 @@ async def query(payload: QueryPayload):
         )
 
 
-@app.post("/suggestions_verba")
+@app.post("/api/suggestions")
 async def suggestions(payload: QueryPayload):
     try:
         suggestions = verba_engine.get_suggestions(payload.query)
@@ -111,7 +136,7 @@ async def suggestions(payload: QueryPayload):
         )
 
 
-@app.post("/get_document_verba")
+@app.post("/api/get_document")
 async def get_document(payload: GetDocumentPayload):
     msg.info(f"Document ID received: {payload.document_id}")
 
@@ -132,7 +157,7 @@ async def get_document(payload: GetDocumentPayload):
         )
 
 
-@app.get("/get_all_documents_verba")
+@app.get("/api/get_all_documents")
 async def get_all_documents():
     msg.info(f"Get all documents request received")
 

verba/server/frontend/out/404.html

@@ -0,0 +1 @@
+<!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width"/><title>404: This page could not be found</title><meta name="next-head-count" content="3"/><link rel="preload" href="/static/_next/static/media/4049f3f580e14086-s.p.woff2" as="font" type="font/woff2" crossorigin="anonymous" data-next-font="size-adjust"/><link rel="preload" href="/static/_next/static/css/0498f7c446a726e9.css" as="style"/><link rel="stylesheet" href="/static/_next/static/css/0498f7c446a726e9.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/static/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/static/_next/static/chunks/webpack-d9150ed736d780c1.js" defer=""></script><script src="/static/_next/static/chunks/framework-cae5c8fdcf4818e7.js" defer=""></script><script src="/static/_next/static/chunks/main-8d39882388fd6605.js" defer=""></script><script src="/static/_next/static/chunks/pages/_app-451e6572c925e50c.js" defer=""></script><script src="/static/_next/static/chunks/pages/_error-b190518070b21757.js" defer=""></script><script src="/static/_next/static/lZ3ibDk5nxtwwYf2HUUcV/_buildManifest.js" defer=""></script><script src="/static/_next/static/lZ3ibDk5nxtwwYf2HUUcV/_ssgManifest.js" defer=""></script></head><body><div id="__next"><div class="__className_320369"><nav class="fixed z-10 bottom-5 left-0 right-0 mx-auto flex animate-pop-in rounded-2xl overflow-hidden w-max transform transition-all duration-500 backdrop-filter backdrop-blur-sm p-4"><a class="mx-12 text-zinc-700 font-thin text-opacity-50 hover:scale-110 transform transition-all duration-500 hover:text-yellow-400 hover:text-opacity-100 " href="/">Search</a><a class="mx-12 text-zinc-700 font-thin text-opacity-50 hover:scale-110 transform transition-all duration-500 hover:text-yellow-400 hover:text-opacity-100 " href="/document_explorer">Documents</a></nav><div style="font-family:system-ui,&quot;Segoe UI&quot;,Roboto,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;;height:100vh;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center"><div style="line-height:48px"><style>body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}</style><h1 class="next-error-h1" style="display:inline-block;margin:0 20px 0 0;padding-right:23px;font-size:24px;font-weight:500;vertical-align:top">404</h1><div style="display:inline-block"><h2 style="font-size:14px;font-weight:400;line-height:28px">This page could not be found<!-- -->.</h2></div></div></div></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":404}},"page":"/_error","query":{},"buildId":"lZ3ibDk5nxtwwYf2HUUcV","assetPrefix":"/static","nextExport":true,"isFallback":false,"gip":true,"scriptLoader":[]}</script></body></html>