Using $CI_PIPELINE_ID value in my Vue.js app?

How to Use GitLab
1

Good day, I got my .gitlab-ci-yml variable as follows:

variables:
  VUE_APP_VERSION: "$CI_PIPELINE_ID"

How can I use that variable VUE_APP_VERSION to display it in my Vue.js app? I’ve tried using the variable directly as well as import.meta.env.VUE_APP_VERSION and it shows as undefined. Any tips would be greatly appreciated, thanks!

2

If you’re using Vite, only variable names that begin with VITE_ will be substituted during the build, to protect against possibly leaking of sensitive data in the environment.

But if you declare,

variables:
  VITE_APP_VERSION: $CI_PIPELINE_ID

you should be able to use import.meta.env.VITE_APP_VERSION in your build; to have Vite replace it with the pipeline ID.

Alternatively, you could create a file .env.local in the environment directory, and store the value of $CI_PIPELINE_ID there using echo:

compile:
  stage: build
  script:
    - echo -e "VITE_APP_VERSION=${CI_PIPELINE_ID}\n" > .env.local
    - <npm run build command>

Also, I find that you can’t use import.meta.env. directly in mustache tags in the HTML source. If I wanted to display the build ID in the example “hello world”, for instance, instead of this:

import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <h1>App build ID {{ import.meta.env.VITE_APP_VERSION }}</h1>
  <HelloWorld msg="Vite + Vue" />
</template>

I had to use this:

import HelloWorld from './components/HelloWorld.vue'
const build_id = import.meta.env.VITE_APP_VERSION
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <h1>App build ID {{ build_id }}</h1>
  <HelloWorld msg="Vite + Vue" />
</template>

The first version gave me a build error:

error during build:
SyntaxError: Error parsing JavaScript expression: import.meta may appear only with ‘sourceType: “module”’ (1:1)

1 Like
3

Thank you!

1 Like