setup docker env

client/Dockerfile

@@ -0,0 +1,23 @@
+# Use the official Node.js image as a base
+FROM node:20
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Copy package.json and package-lock.json
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application code
+COPY . .
+
+# Build the Next.js application
+RUN npm run build
+
+# Expose the port the app runs on
+EXPOSE 3000
+
+# Start the Next.js application
+CMD ["npm", "run", "start"]

client/src/app/components/EpochRow.tsx

@@ -1,9 +1,9 @@
 "use client";
 import React, { useContext } from "react";
 import { cn } from "@/lib/utils";
-import { ApiDataContext } from "../page";
 import { TooltipProvider } from "@radix-ui/react-tooltip";
 import LookAheadToolTip from "./Lookahead";
+import { ApiDataContext } from "@/components/apiDataContext";
 
 const EpochRow = () => {
   const data = useContext(ApiDataContext);

client/src/app/components/LogsDisplay.tsx

@@ -15,7 +15,6 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
-import { ApiDataContext } from "../page";
 
 export const LogsDisplay = ({ title, preconfTxns }) => {
   return (

client/src/app/components/PreconfBanner.tsx

@@ -3,7 +3,7 @@ import SquareCard from "@/components/ui/squarecard";
 import { IBuilder, IPreconf, ISlot } from "@/interfaces/preconf";
 import { truncateAddress } from "../utils/truncate";
 import { useContext } from "react";
-import { ApiDataContext } from "../page";
+import { ApiDataContext } from "@/components/apiDataContext";
 
 const displayBrand = (item: IBuilder | IPreconf) => {
   return (

client/src/app/page.tsx

@@ -11,8 +11,7 @@ import LogsDisplay from "./components/LogsDisplay";
 import { Builders, Preconfs } from "@/interfaces/preconf";
 import { DataPayload } from "@/interfaces/api";
 import useWebSocket from "@/hooks/useWebsocket";
-
-export const ApiDataContext = createContext<DataPayload>(null);
+import { ApiDataContext } from "@/components/apiDataContext";
 
 export default function Home() {
   const [currentSlot, setCurrentSlot] = useState(0);

client/src/components/apiDataContext.ts

@@ -0,0 +1,4 @@
+import { DataPayload } from "@/interfaces/api";
+import { createContext } from "react";
+
+export const ApiDataContext = createContext<DataPayload>(null);

server/docker-compose.yml

@@ -1,6 +1,17 @@
 version: "3.8"
 
 services:
+  client:
+    build:
+      context: ../client
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    depends_on:
+      - server
+    networks:
+      - app-network
+
   server:
     build:
       context: .