Unable to Access Environment Variables in Vue.js App on Cloudron

[webthingz]

Hello,

I'm currently developing a Vue.js application and deploying it on Cloudron. I'm trying to access an environment variable (VUE_APP_DIRECTUS_TOKEN) in my Vue.js component, but it always returns undefined.

Here's the relevant part of my code:

methods: {
  async register() {
    try {
      await axios.post(
        'https://directus.example.com',
        {
          email: this.email,
          password: this.password,
          status: 'active'
        },
        {
          headers: {
            Authorization: `Bearer ${import.meta.env.VUE_APP_DIRECTUS_TOKEN}`
          }
        }
      )
      alert('Registration successful')
    } catch (error) {
      alert('Registration failed: ' + error.message)
    }
  }
}

I've tried setting the environment variable in a .env file in the root of my project, and also in an env.sh file in the /app/data/ directory as suggested by Cloudron's documentation. I've also tried using the export keyword. However, none of these methods seem to work.

Here's how I've set the environment variable:

export VUE_APP_DIRECTUS_TOKEN=my_token_here

Sure, here's a draft for your forum question:

---

Title: Unable to Access Environment Variables in Vue.js App on Cloudron

Body:

Hello,

I'm currently developing a Vue.js application and deploying it on Cloudron. I'm trying to access an environment variable (VUE_APP_DIRECTUS_TOKEN) in my Vue.js component, but it always returns undefined.

Here's the relevant part of my code:

methods: {
  async register() {
    try {
      await axios.post(
        'https://wij.metaalkathedraal.nl/users',
        {
          email: this.email,
          password: this.password,
          status: 'active'
        },
        {
          headers: {
            Authorization: `Bearer ${import.meta.env.VUE_APP_DIRECTUS_TOKEN}`
          }
        }
      )
      alert('Registration successful')
    } catch (error) {
      alert('Registration failed: ' + error.message)
    }
  }
}

I've tried setting the environment variable in a .env file in the root of my project, and also in an env.sh file in the /app/data/ directory as suggested by Cloudron's documentation. I've also tried using the export keyword. However, none of these methods seem to work.

Here's how I've set the environment variable:

export VUE_APP_DIRECTUS_TOKEN=your_token_here

I've made sure to restart the app after making changes to the environment variables.

I'm able to hardcode the token directly into the code and it works, so the issue seems to be with loading the environment variable.

Does anyone have any suggestions on how to correctly set and access environment variables in a Vue.js app on Cloudron?

Thank you in advance for your help.

[nebulon]

I guess this is more like a generic question not so much related to Directus. So environment variables are not exposed automatically from a .env file, you would need to source /app/data/.env in your start.sh script which should be the entry point CMD [ "/app/code/start.sh" ] in your Dockerfile.

You can find more info at https://docs.cloudron.io/packaging/cheat-sheet/ with links to existing packages for inspiration.

[webthingz]

@nebulon Hi Nebulon, sorry for my late response. Busy week!

When I look at the start.sh file I see the following lines:

if [[ ! -f /app/data/env.sh ]]; then
    sudo -u cloudron cat > /app/data/env.sh <<EOF
export KEY="$(uuid -v4)"
export SECRET="$(pwgen -1 32)"
EOF
fi

cp /app/data/env.sh /run/directus/env.sh
[[ -f /app/data/env ]] && cat /app/data/env >> /run/directus/env.sh

source /run/directus/env.sh

So it looks like it's allready there?

[nebulon]

It is only created within the directus app instance. Different apps run isolated from one another on Cloudron. So if I understand you correctly, you are trying to build your own custom app next to directus? If so you need to set the source your own /app/data/env.sh with the export of the env var.