docker compose to run Web UI as container

Dockerfile

@@ -1,14 +1,24 @@
-FROM node:alpine
+# Use Node.js base image
+FROM node:16
+
+# Set the working directory
 WORKDIR /app
 
-# COPY the package.json file, update any deps and install them
-COPY package.json .
-RUN npm install
+# Copy package.json and package-lock.json to cache dependencies
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install --legacy-peer-deps
 
-# copy the whole source folder(the dir is relative to the Dockerfile
+# Ensure Gatsby CLI is available in PATH
+ENV PATH /app/node_modules/.bin:$PATH
+
+# Copy the rest of the application files
 COPY . .
-CMD [ "npm", "run", "start" ]
 
-FROM nginx
-EXPOSE 80
-COPY --from=builder /app/public /usr/share/nginx/html
+# Expose Gatsby's default development port
+EXPOSE 8000
+
+# Default command to start Gatsby development server
+# CMD ["gatsby", "develop", "-H", "0.0.0.0", "-p", "8000"]
+CMD ["npm", "run", "start"]

docker-compose.yaml

@@ -1,18 +1,30 @@
-services: 
-  pola_web-init:
-    image: node:20.10.0-stretch
-    working_dir: /app
-    volumes: 
-     - .:/app
-    command: npm install
-  pola_web:
-    image: node:20.10.0-stretch
-    working_dir: /app
-    volumes: 
-     - .:/app
-    command: npm run develop -- -H=0.0.0.0
-    ports: 
-      - 8000:8000
-    depends_on: 
-      pola_web-init: 
-        condition: service_completed_successfully
+services:
+  # pola_web-init:
+  #   image: node:16
+  #   working_dir: /app
+  #   volumes:
+  #     - .:/app
+  #   command: npm install
+  # pola_web:
+  #   image: node:16
+  #   working_dir: /app
+  #   volumes:
+  #     - .:/app
+  #   command: npm run develop -- -H=0.0.0.0
+  #   ports:
+  #     - 8123:8000
+  #   depends_on:
+  #     pola_web-init:
+  #       condition: service_completed_successfully
+  gatsby:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - '8000:8000' # Expose Gatsby development server
+    volumes:
+      - .:/app # Sync project files for hot-reloading
+      - /app/node_modules # Cache dependencies to avoid reinstallation
+    environment:
+      NODE_ENV: development
+    command: gatsby develop -H 0.0.0.0 -p 8000

gatsby-node.js

@@ -2,6 +2,10 @@ const path = require('path');
 // const { createFilePath } = require(`gatsby-source-filesystem`);
 const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
 
+require('dotenv').config({
+  path: `.env.${process.env.NODE_ENV}`,
+});
+
 exports.onCreateNode = ({ node, getNode, actions }) => {
   const { createNodeField } = actions;
   // if (node.internal.type === `MarkdownRemark`) {