Read GITPOD_WORKSPACE_URL in vue project

hi,
I’m trying to run 2 apps - client in vue, and API server in node js - and run both in gitpod.
I need my client-side app to set the base url (and port) according to GITPOD_WORKSPACE_URL, but I can’t seem to read this env variable from my code, it only works from the terminal.

can you please post an example how it should be used with vue.js ?

Thanks!

Hey @shaniqwa, welcome to the Gitpod community! :tada:

How are you trying to access the environment variable? Do you have a minimal, reproducible example?

See relevant Vue docs in Modes and Environment Variables:

console.log(process.env.VUE_APP_NOT_SECRET_CODE)
1 Like

Could you share why do you want to access it? GITPOD_WORKSPACE_URL is a subject to change. If you want to get some URL to a workspace port then use gp url ${port}.

Hi guys, thanks for your reply.

The reason I wanted to access it (with the port) is I have a coding task on github, which includes both server and client-side. I wanted to run both in gitpod in 2 different tasks, and allow communication between them.

I ended up solving this by passing the env variable into vue .env file, like this:
VUE_APP_GITPOD_WORKSPACE_URL=$GITPOD_WORKSPACE_URL

but that was not enough. I needed the port as well, so I have added some ugly logic to do that, looks like this:

let serverURL = '';

if (process.env.VUE_APP_GITPOD_WORKSPACE_URL && process.env.VUE_APP_SERVER_PORT) {
    const appendPort = process.env.VUE_APP_SERVER_PORT + '-';
    const base = process.env.VUE_APP_GITPOD_WORKSPACE_URL;
    serverURL = [base.slice(0, 8), appendPort, base.slice(8)].join('');
    serverURL += '/api'
} else {
    serverURL =  'http://localhost:3000/api/';
}

probably there is a better way to do that, if I can export gp url ${port} into a new env variable, and then pass that into my .env file in vue.

(btw - had to do similar logic in the server-side as well, to enable cors from the client origin).

gitpod is a really great project! I love it and it saves a lot of time when testing candidates tasks :slight_smile: