Docker build process hangs indefinitely while using Vite for micro-frontend

Frontend
1

I’m currently developing a micro-frontend application with Vite, and I’m facing an issue during the build phase. When I execute the build in a multi-stage Docker container through GitHub Actions, the build process just stops and doesn’t finish. Interestingly, the same build command works without issues on my local machine, but it fails in the CI environment.

Docker Configuration:

FROM node:20-alpine AS build
WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
RUN npm run build  # Execution freezes here

GitHub Actions Configuration:

name: Build and Deploy

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout the code
        uses: actions/checkout@v4
      
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
      
      - name: Build Docker image
        run: |
          docker build -t myapp:latest .
          docker push myapp:latest
        timeout-minutes: 15

Vite Configuration:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'host',
      filename: 'remoteEntry.js',
      exposes: {
        './store': './src/redux/store.ts',
        './icons': './src/constants/icons.ts',
        './Card': './src/components/card',
      },
      remotes: {
        admin: 'http://localhost:5001/assets/remoteEntry.js'
      },
      shared: {
        react: { version: '^19.0.0' },
        'react-dom': { version: '^19.0.0' }
      }
    })
  ],
  build: {
    target: 'esnext',
    cssCodeSplit: false,
    minify: true
  }
});

I’ve tried adjusting timeouts and disabling build optimizations, but the issue persists with no clear error feedback. Has anyone else encountered a similar problem with Vite builds in Docker?

2

that’s super annoying! have you thought about using verbose logging for your builds to catch what’s causing the hang? also, does the same issue happen if you try building the image interactively inside the container instead of through GitHub Actions?

3

set NODE_ENV=production b4 building and add --verbose to see what’s going on. in your vite config, wrap the remotes section in a condition so it skips during docker builds - that localhost reference is likely hangin ur CI.

4

The Problem:

Your Vite build process, incorporating a micro-frontend architecture and the @originjs/vite-plugin-federation plugin, hangs during the build phase within a Docker container running on GitHub Actions. The build works locally but fails in the CI environment. This suggests a problem related to environment differences and how the federation plugin handles remote module resolution.

:thinking: Understanding the “Why” (The Root Cause):

The issue stems from the @originjs/vite-plugin-federation plugin attempting to access remote modules defined using localhost URLs (http://localhost:5001/assets/remoteEntry.js). This works fine locally, where localhost points to your local machine. However, in the Docker container and GitHub Actions environment, the localhost resolution fails because the container doesn’t have access to your local network. The federation plugin, waiting for these remote dependencies, causes the build to hang indefinitely.

:gear: Step-by-Step Guide:

  1. Conditional Remote Configuration: Modify your vite.config.js file to conditionally load the remotes configuration based on the environment. This prevents the plugin from attempting to access remote modules during the Docker build. Use environment variables to control this behavior. For example:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import federation from '@originjs/vite-plugin-federation';

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: 'host',
      filename: 'remoteEntry.js',
      exposes: {
        './store': './src/redux/store.ts',
        './icons': './src/constants/icons.ts',
        './Card': './src/components/card',
      },
      remotes: process.env.NODE_ENV === 'development' ? {
        admin: 'http://localhost:5001/assets/remoteEntry.js'
      } : {}, // Empty remotes object for production/CI builds
      shared: {
        react: { version: '^19.0.0' },
        'react-dom': { version: '^19.0.0' }
      }
    })
  ],
  build: {
    target: 'esnext',
    cssCodeSplit: false,
    minify: true
  }
});

  1. Set NODE_ENV: Ensure that you’re setting NODE_ENV=production within your GitHub Actions workflow before running the build command. This is crucial for the conditional logic in step 1 to function correctly.

  2. Increase Memory Limits (Optional but Recommended): Federation builds can be memory-intensive. Increase the memory limit for your Node.js process within the Docker container. You can do this by adding --max-old-space-size=4096 (or a larger value if needed) to your npm run build command within the Dockerfile. This allocates 4GB of memory to the Node.js process.

FROM node:20-alpine AS build
WORKDIR /app

COPY package*.json ./
RUN npm ci

COPY . .
RUN NODE_ENV=production npm run build --max-old-space-size=4096 # Execution freezes here
  1. Verbose Build Output: Add the --verbose flag to your npm run build command to get detailed logs about the build process. This can help identify any specific errors or issues during the build.

:mag: Common Pitfalls & What to Check Next:

  • Incorrect Environment Variable Setting: Double-check that NODE_ENV is correctly set to production in your GitHub Actions environment.
  • Network Configuration within Docker: Ensure your Docker container has the necessary network configurations to communicate with other services if needed.
  • Missing Dependencies: Verify all your project dependencies are correctly installed and updated in the Docker container.
  • Plugin Version: Check for updates to @originjs/vite-plugin-federation to see if a bug fix might have addressed similar issues.

:speech_balloon: Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!