Setup GitPod for Vue.js Development

GitPod is a cloud-based development environment which can be used to work with a variety of frameworks, including Vue.js. It is designed to be quick to spin up new instances of a development environment through automated scripts.

One of the advantages of this is that it reduces the chance of encountering issues due to differences in environments, and ensures everyone has the tools they need to start working on a project quickly. However, I recently encountered a few issues when attempting to use GitPod related to how the dev server ports are exposed.

Vue.js uses the webpack DevServer to run a local server for development purposes, allowing you to view your project without the need to deploy it. By default, this server runs over plain http and on port 8080.

GitPod exposes these ports through a custom URL which you can set to either be private (only accessible to you) or public (accessible to everyone). However, out of the box the DevServer used by Vue.js does not work with this proxying mechanism, and the site will initially not be found.

An appropriate development environment can be configured by following the steps below.

Setup a GitPod file

The first step for configuring our environment is to create a .gitpod.yml file to tell GitPod how we would like our environment configured. You can do this by running the gp init command from the terminal.

You will also need to create a .gitpod.Dockerfile file next to the .gitpod.yml file.

Open .gitpod.Dockerfile and give it the following contents.

FROM gitpod/workspace-full
# Install Vue CLI
RUN npm install -g @vue/cli

This will instruct Docker to use the default GitPod full workspace image, and then install the Vue CLI tools. This file will be used to construct the development environment so if you need any additional tools, you can add them here.

We can then customise the .gitpod.yml file to look like the following example.

image:
  file: .gitpod.Dockerfile
# List the ports to expose. Learn more https://www.gitpod.io/docs/config-ports/
ports:
  - port: 8080
    onOpen: open-preview

This tells GitPod to use the provided Dockerfile to create the workspace, and identifies port 8080 as a port we would like to be able to expose and the step we would like to be automatically taken when a service is detected running (such as opening it in a preview tab, or in a web browser).

After this has been configured you will need to push the changes to your repository. Then you will need to stop your workspace and start a new workspace for the changes to be applied.

Create a Vue.js project

You can create a new Vue.js project by using the Vue CLI and the vue create command. For a project named hello-world this would look like the following.

vue create hello-world

Configure the Development Server

The next step is to configure DevServer to allow it to respond to requests using the GitPod hostname.

The hostname can be configured by opening the vue.config.js file at the root of your Vue.js project and adding the allowedHosts option.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    allowedHosts: 'all'
  }
})

The hot reload functionality also needs to be adapted by adding some extra configuration to allow the web sockets connection to work over HTTPS. We can do this by adding the following client options to the configuration file.

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    allowedHosts: 'all',
    client: {
      webSocketURL: {
        protocol: 'wss',
        port: 443
      }
    }
  }
})

If you restart the development server, the hot reload functionality should now be working.

Complete Files

If you have followed the steps above you should have a functioning GitPod workspace for a Vue.js SPA. For completeness, here are the full files mentioned above.

FROM gitpod/workspace-full
# Install Vue CLI
RUN npm install -g @vue/cli

image:
  file: .gitpod.Dockerfile
# List the ports to expose. Learn more https://www.gitpod.io/docs/config-ports/
ports:
  - port: 8080
    onOpen: open-preview

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    allowedHosts: 'all',
    client: {
      webSocketURL: {
        protocol: 'wss',
        port: 443
      }
    }
  }
})

Hope this helps!