Development Environment for Web App with Containers (Docker, Vue.js, Go) — Part 2

Photo by Emile Perron on Unsplash

This Part 2 of creating development environment for web app using containers. You can find Part 1 here.

In first part we have created backend Go web server with hot-reloads support using docker compose. Part 2 introduces Vue.js frontend also supporting hot-reloads using docker compose.

Prerequisite

• Docker
• Command line (bash, zsh etc.)
• NPM
• Part 1 of the series finished — you can find Part 1 here

Scope

Part 2 will focus on Vue.js frontend:

1. Build Vue.js docker image from Dockerfile and run container
2. Use docker compose to run container and build image

Vue.js frontend

Initial Vue.js project running locally

We will use Vue CLI to scaffold project. Firstly, let’s install Vue CLI and remove frontend directory — it will be created by Vue CLI. To install Vue CLI run npm install -g @vue/cli.
Then create new project runningvue create frontend in project’s root. Choose Vue 3 on prompt.

After installation navigate to new frontend directory and run npm run serve. It will run local development server which you can access from web browser on localhost:8080.

Vue.js app hello world

Moreover hot-reloads should work out-of-the-box. You can give it a try by updating ./frontend/src/App.vuehello world message in line 3. The effect should be visible immediately in web browser.

If you are using Safari web browser you need to make additional configuration to enable hot-reload. Create file vue.config.js in frontend directory and copy following configuration. (Credits to Twinpix’s comment available here)

Pack it into container

Dockerfile

Let’s create Dockerfile for our frontend.

Frontend Dockerfile

We are using node:16 as base image. Application directory is /app. According to Vue.js documentation and Docker layers best practices, firstly copy package.json and package-lock.json to install dependecies. Only after installing dependencies we copy the content of our frontend app. It allows to take advantage of docker layers and on the next image build, dependecies will be installed only if any new dependency is added/removed.
At the end we expose port 8080 and use command npm run serve to run development server.

Since we will expose frontend on port 8080, we need to change backend port by replacing port in backend/main.go and docker-compose.yml. I’ve changed it from 8080 to 3000.

docker-compose.yml

Run it with docker compose

Run command docker compose up which will build docker images and run containers.

After last changes Go backend is available on localhost:3000

Backend on localhost:3000

The frontend is now available on localhost:8080.

Frontend from docker on localhost:8080

Try changing welcome message in ./frontend/src/App.vue. The effect should be visible immediately thanks to hot-reload.

Changed welcome message

Part 2 finished! We have Go backend in docker container from Part 1, now we have added Vue.js frontend to docker container and we are able to deploy local development environment with one command.