Skip to main content

Vue Container

Setup​

  1. Create base Vue project using globally installed Vue CLI

    1. You will need to install Node (version 14.8.0 was used for this example) locally and then install @vue/cli globally.

      1. npm install -g @vue/cli

    2. You won’t need to install vue. That will be installed as part of the project when using the CLI.

  2. In project’s root, add the following files

    1. Dockerfile
    2. docker-compose.yml
    3. .dockerignore

  3. Build Docker container using Docker cli commands or docker-compose

References​

Docker CLI Commands​

Build container​

docker build -t docker-container-name:dev .

Run previously built container​

Run this command in PowerShell (possibly as Administrator) when executing in Windows OS.

docker run -it --rm -v ${PWD}:/usr/src/app -v /usr/src/app/node_modules -p 8080:8080 -e CHOKIDAR_USEPOLLING=true docker-container-name:dev

Docker Compose Commands​

Build container​

docker-compose up -d --build

Run previously built container​

docker-compose up

Stop running container​

docker-compose stop

Sample package.json​

When creating a new Vue project using the Vue CLI, the “scripts” section of package.json will include “serve” and not “start”. I’ve changed this so the CMD entry in the Dockerfile will execute without any errors. I’ve also added “docker-build”, “docker-start”, and “docker-stop” scripts that reference the docker-compose file.

package.json
{
  "name": "your-project-name",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "docker-build": "docker-compose up -d --build",
    "docker-start": "docker-compose up",
    "docker-stop": "docker-compose stop"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0"
  }
}

Dockerfile​

# pull official base image
FROM node:14.8.0-alpine

# set working directory
WORKDIR /usr/src/app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# Run the install command inside your image filesystem.
RUN npm install --silent

# Add metadata to the image to describe which port the container is listening on at runtime.
EXPOSE 8080

# start app
CMD ["npm", "start"]

# Copy the rest of your app's source code from your host to your image filesystem.
COPY . .

.dockerignore​

node_modules
build
.dockerignore
Dockerfile
Dockerfile.prod

docker-compose.yml​

version: '3.7'

services:
  your-project-name:
    container_name: docker-container-name
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-container-name:dev
    volumes:
      - '.:/usr/src/app'
      - '/usr/src/app/node_modules'
    ports:
      - 8080:8080
    environment:
      - CHOKIDAR_USEPOLLING=true
    tty: true