In part I we dockerized Node and MongoDB application. Now it is time to add the Frontend to the application and use docker compose to build the application.

Here's the application structure that we will add frontend to:

						project/
						│
						├── api/
						│   ├── Dockerfile
						│   ├── package.json
						│   ├── package-lock.json
						│   ├── index.js (or your main Node.js application file)
						│   └── other source files...
						├── frontend/
						│   ├── Dockerfile
						│   ├── package.json
						│   ├── package-lock.json
						│   └── other source files...
						│
						├── docker-compose.yml
						└── [README.md](http://readme.md/)
	

• api: This is where our Node.js and MongoDB application lives

• frontend: This is where our Vue.js application will reside

• docker-compose.yml: This is the Docker Compose file we will use to build and run our application

In the next step, we will start setting up our frontend. We will use Vue.js for the frontend development. You can start by creating a new folder named 'frontend' within the application structure. Inside this folder, we will create our Vue.js application.

Setting up the Vue.js application

To begin setting up the Vue.js application, navigate to the 'frontend' folder in your application structure. Here, we will initialize our Vue.js application.

Run the following command

npm create vue@latest

This command will install and execute
create-vue, the official Vue project scaffolding tool. You will be presented with prompts for several optional features such as TypeScript and testing support. After finishing installing vue application, we should now install the dev dependencies.

cd frontend
npm install
npm run dev

Add Docker to Frontend

Lets add Dockerfile-frontend to the frontend folder. We are setting /app as our work directory for frontend application inside docker. We are copying package.json and package-lock.json inside our docker container and installing dependencies.

FROM node:18-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

CMD ["npm", "run", "dev"]

Next we add the following commands to docker-compose.yml file. The important thing to note about this structure is that you are correctly mapping your frontend folder ./frontend locally to where you are setting up the frontend application inside docker which is ./app. This is to Make sure that changes made to files in the ./frontend directory are being properly reflected inside the container in order to have hot reload.
Note the we are mapping
/app/node_modules inside our container to nothing which will empty node_modules so that we would use the node_module that is local to our local setup.

 frontend:
    container_name: frontend
    build:
      context: ./frontend
      dockerfile: Dockerfile-frontend
    ports:
      - '8080:8080'
    volumes:
      - ./frontend:/app
      - /app/node_modules

Step 4: Run Docker Compose

After creating the Docker Compose file, you can now run the application. Navigate to the dire

ctory that contains your docker-compose.yml file. Use the following command to start the services:

docker-compose build
docker-compose up

This command will create and start all the services defined in your Docker Compose file. Your Node.js application is now running inside a Docker container and is linked to a MongoDB service.

Now if you navigate to http://localhost:3000/ in your browser you should see "Hello from api server” and if you navigate to http://localhost:8080/ you should see your Vite app.