Inline environment variables

[pepicrft]

Hi there again!

I'm trying to adjust the Vite process to inject environment variables into the served Javascript like the babel-plugin-transform-inline-environment-variables plugin does. However I couldn't find an API nor can think of a set up to achieve that with Vite.

Is there a way to achieve that?

[ElMassimo]

Hi Pedro!

Vite uses dotenv to load environment variables.

Only VITE_ prefixed environment variables will be available in your client code, in import.meta.env.

See this section in the Vite docs for more information.

---

If using VITE_ prefixed variables is not an option, you could also use define to define constants in your vite.config.ts, which is a bit harder to use but more flexible.

  define: {
    'process.env.BUGSNAG_FRONTEND_KEY': JSON.stringify(process.env.BUGSNAG_FRONTEND_KEY),
  },

[pepicrft]

Thanks a lot @ElMassimo. I tried your suggestion and it works great 🚀

[ElMassimo]

For @pepibumur and anyone reading this in the future–I've made a plugin to simplify this process, and allow providing defaults.

---

You can use vite-plugin-environment to expose environment variables to your client code:

import { defineConfig } from 'vite'
import EnvironmentVariables from 'vite-plugin-environment'

export default defineConfig({
  plugins: [
    EnvironmentVariables(['BUGSNAG_API_KEY']),
  ],
})