Add arbitrary domain support + website hosting to onebox setup

web/Dockerfile

@@ -0,0 +1,55 @@
+FROM node:18-alpine AS base
+
+# Step 1. Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
+RUN \
+  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
+  elif [ -f package-lock.json ]; then npm ci; \
+  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
+  else echo "Lockfile not found." && exit 1; \
+  fi
+
+
+# Step 2. Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Disable automatic telemetry collection
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+# Step 3. Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Disable automatic telemetry collection
+ENV NEXT_TELEMETRY_DISABLED 1
+
+# Don't run production as root
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+USER nextjs
+
+# Add back in if we add anything to `public`
+# COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+# Note: Don't expose ports here, Compose will handle that for us if necessary. 
+# If you want to run this without compose, specify the ports to 
+# expose via cli
+
+CMD ["node", "server.js"]

web/next.config.js

@@ -3,6 +3,23 @@ const nextConfig = {
   experimental: {
     appDir: true,
   },
+  output: "standalone",
+  redirects: async () => {
+    // In production, something else (nginx in the one box setup) takes care
+    // of this redirect
+    // NOTE: this may get adjusted later if we want to support hosting of the
+    // API server on a different domain without requring some kind of proxy
+    if (process.env.NODE_ENV === "development") {
+      return [
+        {
+          source: "/api/:path*",
+          destination: "http://localhost:8080/:path*", // Proxy to Backend
+          permanent: true,
+        },
+      ];
+    }
+    return [];
+  },
 };
 
 module.exports = nextConfig;

web/src/components/SearchBar.tsx

@@ -6,11 +6,8 @@ import "tailwindcss/tailwind.css";
 import { SearchResultsDisplay } from "./SearchResultsDisplay";
 import { SearchResponse } from "./types";
 
-const BACKEND_URL =
-  process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:8080"; // "http://servi-lb8a1-jhqpsz92kbm2-1605938866.us-east-2.elb.amazonaws.com/direct-qa";
-
 const searchRequest = async (query: string): Promise<SearchResponse> => {
-  const response = await fetch(BACKEND_URL + "/direct-qa", {
+  const response = await fetch("/api/direct-qa", {
     method: "POST",
     headers: { "Content-Type": "application/json" },
     body: JSON.stringify({

web/src/components/admin/connectors/SlackForm.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Formik, Form, Field, ErrorMessage, FormikHelpers } from "formik";
 import * as Yup from "yup";
-import { BACKEND_URL } from "@/lib/constants";
 import { Popup } from "./Popup";
 
 interface FormData {
@@ -18,7 +17,7 @@ const validationSchema = Yup.object().shape({
 });
 
 const getConfig = async (): Promise<FormData> => {
-  const response = await fetch(BACKEND_URL + "/admin/slack_connector_config");
+  const response = await fetch("/api/admin/slack_connector_config");
   return response.json();
 };
 
@@ -31,17 +30,13 @@ const handleSubmit = async (
 ) => {
   setSubmitting(true);
   try {
-    // Replace this with your actual API call
-    const response = await fetch(
-      BACKEND_URL + "/admin/slack_connector_config",
-      {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(values),
-      }
-    );
+    const response = await fetch("/api/admin/slack_connector_config", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(values),
+    });
 
     if (response.ok) {
       setPopup({ message: "Success!", type: "success" });

web/src/lib/constants.ts

@@ -1,2 +0,0 @@
-export const BACKEND_URL =
-  process.env.NEXT_PUBLIC_BACKEND_URL || "http://localhost:8080"; // "http://servi-lb8a1-jhqpsz92kbm2-1605938866.us-east-2.elb.amazonaws.com/direct-qa";