Introduction

This article covers how one could create new Vue projects and/or run them using Docker.

Prerequisites

In order to follow along, you need to have the following installed in your system:

Try to run the following commands:

$ docker run hello-world
$ make --version

If they ran successfully, then you can continue to the next steps.

Create a new Vue project

$ mkdir ~/vue-project
$ cd vue-project 
$ docker run -it --rm -v \
    $(pwd):/vue-project \
    -w /vue-project \
    node:lts-alpine \
    sh -c "yarn global add @vue/cli && vue create --default ."

A fresh Vue app (created with the Vue CLI) is now in the ~/vue-project directory.

Run a Vue Project using a Dockerfile and make

Again, given an existing Vue project at ~/vue-project, we can create a Dockerfile:

FROM node:lts-alpine

WORKDIR /app

ENV PATH /app/node_modules/.bin:$PATH

COPY package.json ./
RUN npm install --silent

COPY . ./

CMD ["yarn", "serve"]

..and a Makefile:

build:
	docker build -t yourname/vue-project .

start:
	docker run -it --rm -v ${PWD}:/app -v /app/node_modules -p 8080:8080 yourname/vue-project 

The Makefile should be self-describing. An important detail to understand is the new volume that we attach to the container’s /app/node_modules directory. This allows us to install new npm packages without restarting the container. Hot reloading is also enabled out of the box, so you can update your source code and the development server will automatically reflect the changes.

You can now commit these two files in your version control system and run your project in any Docker enabled machine with the following commands:

$ make build
$ make start 

The project should now be served at http://127.0.0.1:8080/

Bonus: adding an ignore file for Docker

In order to speed up the building of our images, we can add a .dockerignore file in the root of our project:

node_modules
build
.dockerignore
Dockerfile

The files and directories above, notably the node_modules directory, would not be sent to the Docker daemon upon building the image.

Example Project

An example Vue project using the above methodologies is available in this repository.

Additional Reading

Got any feedback or suggestions? Feel free to send me an email or a tweet.
Ciao!