Use Variables to display build information in Webapp

Hey guys,

I want to display build information like branch name, build id and so on onto my website.

I tried it in different ways.

First I tried to use sed:

sed -i -- 's/ref/$CI_BUILD_REF_NAME $CI_BUILD_REF/g' src/app/authentication/login.component.html

In the second part I tried to use echo:

"echo 'export const version = {CI_BUILD_REF_NAME: $CI_BUILD_REF_NAME, CI_BUILD_ID:$CI_BUILD_ID,CI_ENVIRONMENT_NAME: $CI_ENVIRONMENT_NAME,CI_BUILD_TAG:$CI_BUILD_TAG };' > src/version.ts"

But in both ways it seems the variables don’t get replaced.

Anyone have suggestions for this ?

Where do you apply these sed commands? In the ci? Following the use of your env variables I assume in your CI.

You should be using double quotes. In bash, single quotes don’t evaluate any variables.

So this should work:

sed -i "s/ref/$CI_BUILD_REF_NAME $CI_BUILD_REF/g" src/app/authentication/login.component.html

And if you’re using Webpack or Browserify, you can already use environment variables directly via process.env.CI_BUILD_REF_NAME