I have trying to use App environment variables with my VueJS app, and the values (from key/value pairs) are not ‘registering’ in my app.

I have added echo $API_URL to the build command, checked the logs and it is printed. I must be adding the placeholder in my code incorrectly…

Here is a snapshot of my code depicting how I’m trying to implement the variables: https://imgur.com/a/aqilFdn

Thanks!

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
1 answer

I’m no Vue expert, but I think you want to be using process.env in your client-side code to inject environment variables.

https://cli.vuejs.org/guide/mode-and-env.html#using-env-variables-in-client-side-code

  • I am using process.env, and in the .env I would like to fill in the environment variables set in my App Platform component. I hope that makes sense.

    My understanding is that the App Platform environment variables are just a way of string interpolation?

    Thanks!

    • 👋🏼 @genuinebrother, that is correct. You will still need to define the environment variables that you would like to use (such as API_URL), but you can use the bindable environment variables in the values.

      In your app/component settings, add an env var with the key API_URL and the value ${APP_URL}. When this variable is passed to your app, it will receive the interpolated value, for example API_URL=https://yourapp.ondigitalocean.app.

      If you need the URL for a specific component that is running under a custom route, you can use ${api.PUBLIC_URL} where api is the service component’s name.

      As a note, any env vars that are set externally will override any values set in .env.

      • What if I want a custom value? Like MYSTRIPEKEY

        I have custom values I want to use.

        • You can also use any values that you need. You don’t have to use the bindable env vars—they will be evaluated only if they’re there.

          As an example, you can have environment variables like these:

          • APP_URL: ${APP_URL}
          • PORT: 8080
          • MY_STRIPE_KEY: abcd1234
          • VERY_SPECIFIC_PAGE: ${APP_URL}/some/page?id=2

          For secrets like the Stripe key, it’s recommended to mark them as “secret.” This will encrypt their values in our database and in your app spec. They will only be decrypted when they are passed to your app, so your code will see the original unencrypted values.

          • https://imgur.com/a/aqilFdn

            This is how I’m using my custom values, and it is not working. The placeholder is never replaced with the ‘VALUE’ in the key/value pair. Does that make sense?

            Thanks.

          • Thanks @genuinebrother and sorry for the delay. I’m trying to reproduce this and am reviewing the VueJS docs on env vars.

            One note that jumped out to me is the one around the env var naming. Depending on where you are using the environment variables, VueJS will restrict which variables are available to avoid accidentally leaking secrets. To use the env vars in vue.config.js or in client-side code, you’ll need to prefix the names with VUE_APP_.

            The .env file is not meant to be committed to the git repo. You would use to set values for these env vars in your development environment, and in production (on App Platform) you will want to set the env vars in your app settings. Also, if you set an env var either in your app settings or in your development environment outside of .env, it will take priority over one with the same name in .env if one exists.

            So, as an example, your local development .env file might look like this:

            STRIPE_API_KEY=abc123
            VUE_APP_API_URL=http://localhost:3000
            

            Since it contains a secret it shouldn’t not be committed to git. You should then be able to use process.env.VUE_APP_API_URL anywhere in your VueJS code, and process.env.STRIPE_API_KEY only on the code that runs on the NodeJS server.

            From what I can tell, VueJS doesn’t have a built-in HTTP server and is always meant to be used to generated a static HTML export of your app. In that case you’ll want to set up your own NodeJS server separately from VueJS, which I’m assuming you’ve already done as you’re using the Stripe API. In that case you’ll want to set VUE_APP_API_URL to the route that it’s running at.

            In your App Platform settings you would set the env vars like so:

            • Name: NODE_ENV Value: production
            • Name: STRIPE_API_KEY Value: abc123 Encrypted
            • Name: VUE_APP_API_URL Value: ${VUE_APP_APP_URL}

            screenshot

            Does that help?

Submit an Answer