Make web-client docker compose first.

.gitignore

@@ -0,0 +1 @@
+.idea/

docker-compose.yml

@@ -3,7 +3,7 @@ services:
   db:
     container_name: db
     platform: linux/x86_64
-    image: mysql
+    image: mysql:8.0-debian
     hostname: backend-service-db
     build:
       context: .
@@ -48,8 +48,40 @@ services:
       interval: 5s
       timeout: 5s
       retries: 10
+  web-client:
+    build:
+      context: web-client
+      dockerfile: ./Dockerfile
+    hostname: web-client
+    environment:
+      API_HOST: api-service
+    restart: always
+    volumes:
+      # To avoid mounting the node_modules folder we need to mount everything around it
+      - ./web-client/components:/app/components
+      - ./web-client/constants:/app/constants
+      - ./web-client/pages:/app/pages
+      - ./web-client/public:/app/public
+      - ./web-client/styles:/app/styles
+      - ./web-client/.eslintrc.json:/app/.eslintrc.json
+      - ./web-client/.gitignore:/app/.gitignore
+      - ./web-client/next.config.js:/app/next.config.js
+      - ./web-client/next-env.d.ts:/app/next-env.d.ts
+      - ./web-client/package.json:/app/package.json
+      - ./web-client/package-lock.json:/app/package-lock.json
+      - ./web-client/tsconfig.json:/app/tsconfig.json
+    depends_on:
+      - server
+      - api
+    ports:
+      - "3000:3000" # http
+    healthcheck:
+      test: curl --fail http://api-service:8333/healthcheck || exit 1;
+      interval: 5s
+      timeout: 5s
+      retries: 10
   adminer:
-    image: adminer
+    image: adminer:standalone
     restart: always
     ports:
       - 8080:8080

web-client/.dockerignore

@@ -0,0 +1,4 @@
+Dockerfile
+.next
+.vscode
+node_modules

web-client/Dockerfile

@@ -0,0 +1,10 @@
+FROM node:19.4
+
+WORKDIR /app
+# copies all files from local into WORKDIR
+COPY . .
+RUN npm install --include=dev
+
+EXPOSE 3000
+
+ENTRYPOINT ["./node_modules/.bin/next", "dev"]

web-client/pages/api/create-order.tsx

@@ -5,7 +5,7 @@ import { NextApiRequest, NextApiResponse } from "next";
 
 const createOrder = () => async (req: NextApiRequest, res: NextApiResponse) => {
     try {
-        const response: AxiosResponse = await axios.post("http://localhost:8333/orders", req.body);
+        const response: AxiosResponse = await axios.post(`http://${process.env.API_HOST || 'localhost'}:8333/orders`, req.body);
         res.status(response.status || 200).json(response.data);
     } catch (error: any) {
         console.log(error);

web-client/pages/api/get-menu-items.tsx

@@ -6,7 +6,7 @@ import { NextApiRequest, NextApiResponse } from "next";
 
 const getMenuItems = () => async (req: NextApiRequest, res: NextApiResponse) => {
     try {
-        const response: AxiosResponse = await axios.get("http://localhost:8333/menu-items");
+        const response: AxiosResponse = await axios.get(`http://${process.env.API_HOST || 'localhost'}:8333/menu-items`);
         res.status(response.status || 200).json(response.data);
     } catch (error: any) {
         console.log(error);