Docker for frontend is also working

Author: Nabin Oli

docker-compose.yml

@@ -15,9 +15,9 @@ services:
   frontend:
     build: ./frontend
     ports:
-      - "3000:80"  # Map host port 3000 to container port 80
+      - "3000:3000"  # Map host port 3000 to container port 3000
     volumes:
       - ./frontend:/app
-      - /app/node_modules
-    depends_on:
-      - backend
+      - /app/node_modules  # Avoid overwriting node_modules in the container
+
+    # command: npm run start  # Use 'npm run build && serve -s build -l 3000' for production

frontend/Dockerfile

@@ -1,5 +1,5 @@
-# Stage 1: Build the application
-FROM node:18-alpine AS build
+# Use Node.js 18 Alpine as the base image
+FROM node:18-alpine
 
 # Set the working directory in the container
 WORKDIR /app
@@ -13,17 +13,14 @@ RUN npm install
 # Copy the rest of the application code
 COPY . .
 
-# Build the React app
+# Build the application
 RUN npm run build
 
-# Stage 2: Serve the build files using nginx
-FROM nginx:alpine
+# Install `serve` globally to serve the build files
+RUN npm install -g serve
 
-# Copy the build files from the previous stage
-COPY --from=build /app/dist /usr/share/nginx/html
+# Expose the port your app runs on (default for `serve` is 3000)
+EXPOSE 3000
 
-# Expose port 80 (default for nginx)
-EXPOSE 80
-
-# Start nginx
-CMD ["nginx", "-g", "daemon off;"]
+# Serve the build files
+CMD ["serve", "-s", "build", "-l", "3000"]

frontend/README.md

@@ -1,4 +1,4 @@
-# Data Catalog App
+<!-- # Data Catalog App
 
 The React frontend is built with [Vite](https://vitejs.dev/).
 
@@ -84,4 +84,7 @@ Runs the React site in production mode, independently from drupal.
 
 To run Cypress tests on a local React-only install of this repo, ensure the app is running at `localhost:3000`. In a separate terminal, use `npx cypress run --config baseUrl="http://localhost:3000"`.
 
-If the frontend is installed within a DKAN site, navigate to the `frontend` folder containing your installation of this repo. Ensure your full site is running, and take note of its URL (PROJECT_NAME.ddev.site), where `PROJECT_NAME` is variable. Run tests using `npx cypress run --config baseUrl="YOUR_DDEV_URL"`, using your project URL for the baseUrl argument
+If the frontend is installed within a DKAN site, navigate to the `frontend` folder containing your installation of this repo. Ensure your full site is running, and take note of its URL (PROJECT_NAME.ddev.site), where `PROJECT_NAME` is variable. Run tests using `npx cypress run --config baseUrl="YOUR_DDEV_URL"`, using your project URL for the baseUrl argument -->
+
+npm install\
+npm run start

frontend/vite.config.ts

@@ -3,23 +3,26 @@ import react from '@vitejs/plugin-react';
 
 export default defineConfig(() => {
   return {
-    base: '/',
+    base: '/', // Ensure this is correct for your deployment environment
     build: {
-      outDir: 'build/static',
+      outDir: 'build', // Change this to 'build' instead of 'build/static'
       manifest: true,
       rollupOptions: {
         output: {
-          entryFileNames: `js/[name].js`,
-          chunkFileNames: `js/chunks/[name].[hash].js`,
-          assetFileNames: ({name}) => {           
+          entryFileNames: `assets/[name].js`, // Use 'assets' folder for better organization
+          chunkFileNames: `assets/chunks/[name].[hash].js`,
+          assetFileNames: ({ name }) => {
             if (/\.css$/.test(name ?? '')) {
-                return `css/[name].[ext]`;   
+              return `assets/css/[name].[ext]`; // CSS files in 'assets/css'
             }
-            // default value
-            return 'media/[name].[ext]';
+            if (/\.(png|jpe?g|gif|svg|webp)$/.test(name ?? '')) {
+              return `assets/media/[name].[ext]`; // Images in 'assets/media'
+            }
+            // Default for other assets
+            return 'assets/[name].[ext]';
           },
         },
-      }
+      },
     },
     plugins: [react()],
     server: {
@@ -28,8 +31,8 @@ export default defineConfig(() => {
         '/api/1': {
           target: 'https://demo.getdkan.org',
           changeOrigin: true,
-        }
-      }
-    }
-  }
-});
+        },
+      },
+    },
+  };
+});