Complete setup for docker. Add readme, and fix some bugs

frontend/.env.production

@@ -0,0 +1,11 @@
+BACKEND_API_PROTOCOL=http
+BACKEND_API_DOMAIN=backend
+BACKEND_API_PORT=8000
+
+NEXT_PUBLIC_BASE_PROTOCOL=http
+NEXT_PUBLIC_BASE_DOMAIN=localhost
+NEXT_PUBLIC_BASE_PORT=3000
+
+NEXT_PUBLIC_WS_URL=ws://localhost:8002/
+
+NEXT_PUBLIC_API_PATTERN=/api/

frontend/Dockerfile

@@ -0,0 +1,42 @@
+# Stage 0: Get base system
+FROM node:20-alpine AS base
+
+
+# Stage 1: Instal dependencies 
+FROM base AS dependencies
+WORKDIR /application
+COPY package*.json ./
+RUN npm ci
+
+
+# Stage 2: Build
+FROM base AS builder
+WORKDIR /application
+COPY --from=dependencies /application/node_modules ./node_modules
+COPY . .
+ENV NEXT_TELEMETRY_DISABLED 1
+RUN npm run build
+
+
+# Stage 3: Start
+FROM base AS runner
+WORKDIR /application
+ENV NODE_ENV production
+ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /application/public ./public
+
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+COPY --from=builder --chown=nextjs:nodejs /application/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /application/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+ENV PORT 3000
+
+CMD HOSTNAME="0.0.0.0" node server.js

frontend/next.config.ts

@@ -9,16 +9,17 @@ const nextConfig = {
       },
     ];
   },
-  images: {
-    remotePatterns: [
-      {
-        protocol: process.env.NEXT_PUBLIC_BASE_PROTOCOL,
-        hostname: process.env.NEXT_PUBLIC_BASE_DOMAIN,
-        port: process.env.NEXT_PUBLIC_BASE_PORT,
-      },
-    ],
-  },
+  // images: {
+  //   remotePatterns: [
+  //     {
+  //       protocol: process.env.NEXT_PUBLIC_BASE_PROTOCOL,
+  //       hostname: process.env.NEXT_PUBLIC_BASE_DOMAIN,
+  //       port: process.env.NEXT_PUBLIC_BASE_PORT,
+  //     },
+  //   ],
+  // },
   devIndicators: false,
+  output: "standalone",
 };
 
 export default nextConfig;

frontend/src/features/messagesList/message.tsx

@@ -20,7 +20,7 @@ export const Message = ({
           ? "borderBottomRightRadius"
           : "borderBottomLeftRadius"]: 0,
       }}
-      className={`max-w-20 p-2`}
+      className={`p-2`}
     >
       {message.text}
     </div>

frontend/src/features/messagesList/messagesList.tsx

@@ -8,11 +8,13 @@ import { Message } from "./message";
 
 export const MessagesList = () => {
   const { data: users, mutate: mutateUsers } = useSWR<IUser[]>("users");
-  const { data: messages, mutate: mutateMessages } = useSWR(
-    "messages",
-    MessageService.getTopOfHistory,
-    { revalidateOnFocus: false }
-  );
+  const {
+    data: messages,
+    mutate: mutateMessages,
+    isLoading: messagesLoading,
+  } = useSWR("messages", MessageService.getTopOfHistory, {
+    revalidateOnFocus: false,
+  });
   const { data: me } = useSWR<IUser>("me");
   const [websocket, updateWebSocket] = useState<WebSocket>();
   const bottomRef = useRef<HTMLDivElement>(null);
@@ -20,8 +22,18 @@ export const MessagesList = () => {
   const getUserColor = (userUUID: IUser["uuid"]) =>
     users?.find((user) => user.uuid === userUUID)?.color;
 
+  const updateMessageHandler = (websocket?: WebSocket) => {
+    if (websocket)
+      websocket.onmessage = (event) => {
+        mutateMessages([...(messages ?? []), JSON.parse(event.data)], {
+          revalidate: false,
+        });
+      };
+  };
+
   useEffect(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth" });
+    updateMessageHandler(websocket);
     const newUsers: IUser[] = [];
     messages?.forEach((message) => {
       if (
@@ -35,20 +47,18 @@ export const MessagesList = () => {
   }, [messages]);
 
   useEffect(() => {
-    if (!websocket && messages && process.env.NEXT_PUBLIC_WS_URL) {
+    if (!websocket && !messagesLoading && process.env.NEXT_PUBLIC_WS_URL) {
       const websocket = new WebSocket(process.env.NEXT_PUBLIC_WS_URL);
-      websocket.onmessage = (event) => {
-        mutateMessages([...(messages ?? []), JSON.parse(event.data)], {
-          revalidate: false,
-        });
-      };
-      websocket.onclose = function () {
-        setTimeout(() => updateWebSocket(undefined), 1000);
+      updateMessageHandler(websocket);
+      websocket.onclose = () => {
+        setTimeout(() => {
+          updateWebSocket(undefined);
+        }, 1000);
       };
       updateWebSocket(websocket);
     }
     return () => websocket?.close();
-  }, [websocket, messages]);
+  }, [websocket, messagesLoading]);
 
   return (
     <div className="max-w-full h-full overflow-auto flex flex-col gap-2">