Vue with Docker; initialize, develop and build

Let’s initialize a Vue project from a docker container; build the Vue project with a multi-stage Dockerfile; and finish with how to develop in debug mode with docker-compose!

All that is required is that you have docker and docker-compose installed locally.

Initialize the project

Run the following command while replacing myproject with your project name:

It creates the directory and runs a node container with the Vue/cli mounted to this directory. When installing choose yarn.

Dockerfile

The Dockerfile is identical to the given example in the documentation. Only the build-stage is split up into an install-stage and a build-stage, since we don’t need to build when we are developing!

You can build this container with:

and… run the container:

We should now be able to access the application on localhost:8000.

Develop with Docker-compose.yml

While developing, you don’t want to rebuild the container all the time in order to see the results in your browser. To keep the reload functionality of the development mode we share the code base with the container with docker-compose. In fact, the docker-compose.yml file is fairly simple:

We only build the develop-stage since we need the source code, node, yarn, the installed vue-cli, and so on. Build the image and run the application in development mode with docker-compose:

You should now be able to access the application on localhost:8080. When making changes to the code, the application will still reload in the browser!

In case you want to add another node package, just run the following command:

So that’s it, have fun with Docker and Vue!

data / hydraulic engineer: https://dobken.nl

data / hydraulic engineer: https://dobken.nl