2. Containerize our Vue.js Application

To run our Vue.js app on Kubernetes, we need a Dockerfile and some Kubernetes manifests. Instead of creating these files manually, we can let DevSpace automatically create them for us with the following command:

devspace init

DevSpace will ask a couple of questions during the init command. Take a look at the following sections for more information.

DevSpace just creates some files (e.g. Dockerfile) for us, so we can customize everything later on.

Creating the Dockerfile for Vue.js

If you have no Dockerfile in your project, DevSpace will automatically detect that and suggest to create one for you.

If there is already a Dockerfile in your project, DevSpace will offer to use the existing Dockerfile instead of creating a new one.

? This project does not have a Dockerfile. What do you want to do? [Use arrows to move, space to select, type to filter]

> Create a Dockerfile for me

Enter path to your Dockerfile

Enter path to your Kubernetes manifests

Enter path to your Helm chart Use existing image

Choose the first option Create a Dockerfile for me by hitting Enter and DevSpace will create a Dockerfile in your project directory.

Select Your Programming Language

Again, DevSpace will automatically detect your programming language (i.e. javascript ), you just need to confirm by hitting Enter .

? Select the programming language of this project [Use arrows to move, space to select, type to filter]

java

> javascript

none

php

python

ruby

typescript

Choose an Image Registry

DevSpace will build a Docker image from your Dockerfile. This image needs to be pushed to a Docker registry like Docker Hub.

? Which registry do you want to use for storing your Docker images? [Use arrows to move, space to select, type to filter]

Use hub.docker.com

> Use dscr.io (free, private Docker registry)

Use other registry

If you already have a Docker Hub account, just select Docker Hub.

In case you don’t have a Docker Hub account or if you don’t know know which option to choose, you can just use dscr.io — it is fast, private and completely free. Once you selected dscr.io, DevSpace will open the login page. You can sign up with GitHub and it will take less than a minute.

Define The Application Port

Vue.js runs on port 8080 in dev mode. Type 8080 and hit Enter .

? Which port is your application listening on? (Enter to skip) 8080

It is important you type in the correct port. Otherwise, it will be a problem to open the app in the browser later on.

What just happened?

After the init command has terminated, you will find the following new files in your project:

my-vuejs-app/

|

|--devspace.yaml

|--Dockerfile

|--.dockerignore

Besides the configuration for DevSpace in devspace.yaml , there is a new Dockerfile for building a Docker image for our Vue.js app which is needed to deploy the app to Kubernetes.

Dockerfile for Vue.js (for Development)

The Dockerfile will look like this:

FROM node:8.11.4 RUN mkdir /app

WORKDIR /app COPY package.json .

RUN npm install COPY . . CMD ["npm", "start"] # <<<<<<< We need to change this

Note that this Dockerfile starts our Vue.js app in development mode.

For hosting the Vue.js app in production, it is recommended to use multi-stage Docker builds for creating static assets and then serve them with a web server such as nginx. I will publish a post about this very soon.

Subscribe to get an email about new articles if you are interested in reading my next post. But first, let’s continue with this tutorial…

The autogenerated Dockerfile is almost good to go. We just need to change the command used to start our app. If you open your package.json , you will see that there is no start command in the scripts. Instead, we want to run npm run dev . So, let's change that in the Dockerfile like this:

FROM node:8.11.4 RUN mkdir /app

WORKDIR /app COPY package.json .

RUN npm install COPY . . CMD ["npm", "run", "dev"]

This Dockerfile:

defines node as base image

as base image creates the working directory /app

copies the package.json into the image and installs the dependencies

into the image and installs the dependencies copies the rest of our application into the working directory

defines npm run dev as the start command for the container

Adding the package.json separately and installing dependencies before adding the rest of the application allows Docker to use layer-caching and saves a lot of time when building the image because the dependencies will only have to be re-installed when the package.json has changed and not every time we change any other source code file.

Helm Chart For Vue.js

To start containers in Kubernetes, we need to define so-called Kubernetes manifests. Instead of using plain Kubernetes manifests, it is recommended to bundle them into a so-called Helm chart. Helm is the package manager for Kubernetes and a Helm chart is a package that can be installed into a Kubernetes cluster using the open-source CLI tool Helm.

By default, DevSpace deploys your application using the so-called component chart which is a standardized and highly configurable Helm chart. To customize the deployment of your app, you can edit the deployments section of the devspace.yaml config file which looks similar to this one:

...

deployments:

- name: my-vuejs-app

helm:

chart:

name: component-chart

version: v0.0.6

repo: https://charts.devspace.cloud

values:

containers:

- image: dscr.io/${DEVSPACE_USERNAME}/devspace

service:

ports:

- port: 8080

...

For more information on how to customize this component deployment, take a look customizing components in the DevSpace docs.