Starting a new Vue project using docker-compose

1. Create files

touch Dockerfile docker-compose.yml .dockerignore

• Dockerfile

FROM node:20-alpine3.19
RUN npm install -g @vue/cli
RUN mkdir /app
WORKDIR /app
COPY . /app
RUN yarn install
EXPOSE 8080
CMD ['yarn', 'serve']

• docker-compose.yml

services:
  app:
    build: .
    container_name: vue_app_container
    ports:
      - '8080:8080'
    volumes:
      - ./:/app
    command: yarn serve

• .dockerignore

node_modules
.git
.gitignore

2. Access the container

docker-compose run --rm app sh

3. Create the project

vue create .

4. Changing file permission

sudo chown -R $USER:$USER .

5. Up server

docker-compose up app

localhost:8080

---

If your project already exists:

1. Buid image from Dockerfile

docker-compose build

2. Up server

docker-compose up app

---

Only Docker example

• Tutorial

Deploying at Heroku

• Tutorial

Vue references

• Tutorial