Write down Docker Compose file for MEVN application

Write down Docker Compose file for MEVN application

A MEVN stack includes MongoDB, Express.js, Vue.js, and Node.js. Here's an easy example of a Docker Compose file for a MEVN app. This example thinks you have a basic MEVN app setup with different folders for the frontend (Vue.js) and backend (Express.js/Node.js).

Here's a basic directory structure for your MEVN application:

/my-mevn-app
|-- backend
|   |-- app
|   |   `-- server.js
|   `-- Dockerfile
|-- frontend
|   |-- app
|   |   `-- main.js
|   `-- Dockerfile
|-- docker-compose.yml
`-- .env
  1. backend/Dockerfile:
# Use an official Node.js runtime as a parent image
FROM node:14-alpine

# Set the working directory in the container
WORKDIR /usr/src/app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install app dependencies
RUN npm install

# Copy the current directory contents into the container
COPY . .

# Expose the port on which the app runs
EXPOSE 3000

# Command to run the application
CMD [ "npm", "start" ]
  1. frontend/Dockerfile:
# Use an official Node.js runtime as a parent image
FROM node:14-alpine

# Set the working directory in the container
WORKDIR /usr/src/app

# Copy package.json and package-lock.json to the working directory
COPY package*.json ./

# Install app dependencies
RUN npm install

# Copy the current directory contents into the container
COPY . .

# Expose the port on which the app runs
EXPOSE 8080

# Command to run the application
CMD [ "npm", "run", "serve" ]
  1. docker-compose.yml:
version: '3'
services:
  backend:
    build:
      context: ./backend
    ports:
      - "3000:3000"
    depends_on:
      - database
    environment:
      - MONGODB_URI=mongodb://database:27017/mydatabase

  frontend:
    build:
      context: ./frontend
    ports:
      - "8080:8080"
    depends_on:
      - backend

  database:
    image: "mongo:latest"
    ports:
      - "27017:27017"
    environment:
      - MONGO_INITDB_DATABASE=mydatabase
  1. .env (for backend):
MONGODB_URI=mongodb://database:27017/mydatabase

In this setup:

  • The backend service uses the official Node.js image, installs dependencies, and runs the Express.js application on port 3000. It depends on the database service (MongoDB).

  • The frontend service uses the official Node.js image, installs dependencies, and runs the Vue.js application on port 8080. It depends on the backend service.

  • The database service uses the official MongoDB image.

  • The .env file contains the MongoDB connection URI for the backend service.

To run your MEVN application using Docker Compose, navigate to the directory containing your docker-compose.yml file and run:

docker-compose up

This will start all the services defined in the Docker Compose file. You can access your Vue.js application at http://localhost:8080 and your Express.js API at http://localhost:3000.

Did you find this article valuable?

Support LingarajTechhub All About Programming by becoming a sponsor. Any amount is appreciated!