Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to deploy react micro-frontends (MFE) in a single docker container

I have many micro-frontend (MFE) apps written in Reactjs.
And finally my webapp consumes all those MFEs.

docker-compose.yml

version: '3.8'
services:
  mfe1:
    build:
      context: ../packages/mfe1
      dockerfile: Dockerfile
    image: mfe1:1.1
    container_name: mfe1_container
    ports:
      - 4001:80

  mfe2:
    build:
      context: ../packages/mfe2
      dockerfile: Dockerfile
    image: mfe2:1.1
    container_name: mfe2_container
    ports:
      - 4002:80

 
  web-app:
    build:
      context: ../packages/webapp
      dockerfile: Dockerfile
    image: webapp:1.1
    container_name: webapp_container
    ports:
      - 4000:80
    depends_on:
      - mfe1
      - mfe2

This will create different containers for each MFE.

is there a way I can run all MFEs in a single container ? is it even possible ?

is it also possible to create single docker image ?

DockerFile (for MFE1) and it is almost same for other MFEs)

# stage-1

FROM node:18.17-bookworm-slim as mf1-build
WORKDIR /app
COPY package*.json ./
ENV NODE_OPTIONS="--max-old-space-size=1536"
RUN npm install --no-package-lock
COPY . ./
RUN npm run docker:build
RUN npm prune --production
EXPOSE 4001


# stage-2

FROM node:18.17-bookworm-slim
WORKDIR /app
COPY --from=mfe1-build /app/dist ./dist
COPY --from=mfe1-build /app/node_modules ./node_modules


## nginx stage

FROM nginx:alpine
COPY nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=mfe1-build /app/dist /usr/share/nginx/html
Tags:

2

Answers


  1. 0

    You might want to use a custom entrypoint script to achieve your goals?

    https://www.warp.dev/terminus/dockerfile-run-sh

    Login or Signup to reply.
  2. 0

    To deploy multiple React micro-frontends (MFEs, as seen in this article from Rahul Sharma ) in a single Docker container, you will need to consolidate them in a way that they can be served from a single HTTP server.

    You can still keep a two-stage build process for each MFE: that optimizes the build by creating smaller, more efficient final images.

    • The first stage of each MFE build will be responsible for installing dependencies and compiling the source code,
    • while the second stage will only include the runtime environment and the compiled code.
    # Stage 1: Build MFE 1
FROM node:18.17-bookworm-slim as mfe1-builder
WORKDIR /app/mfe1
COPY ./mfe1/package*.json ./
RUN npm install
COPY ./mfe1 ./
RUN npm run build

# Stage 2: Build MFE 2
FROM node:18.17-bookworm-slim as mfe2-builder
WORKDIR /app/mfe2
COPY ./mfe2/package*.json ./
RUN npm install
COPY ./mfe2 ./
RUN npm run build

# repeat for other MFEs 

# Final stage: Nginx to serve all MFEs
FROM nginx:alpine

# Copy built static files from each MFE build stage
COPY --from=mfe1-builder /app/mfe1/dist /usr/share/nginx/html/mfe1
COPY --from=mfe2-builder /app/mfe2/dist /usr/share/nginx/html/mfe2
# repeat for other MFEs 

# Copy Nginx configuration
COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

    The nginx.conf will serve each MFE from its own path:

    server {
    listen 80;

    location /mfe1/ {
        alias /usr/share/nginx/html/mfe1/;
        try_files $uri $uri/ /mfe1/index.html;
    }

    location /mfe2/ {
        alias /usr/share/nginx/html/mfe2/;
        try_files $uri $uri/ /mfe2/index.html;
    }

    # repeat for other MFEs 
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search