How do you use env variables?

[igorlanko]

This is an awesome boilerplate, thanks!

Trying to figure out how to use env variables. For example I want to modify manifest.config.ts based on APP_ENV.

I tried:
env.VITE_APP_ENV, process.VITE_APP_ENV, import.meta.env.VITE_APP_ENV (as recommended here): the first two have no effect, the latter just fails to build.

I'd appreciate any hints!

---

UPD: Turns out there's env.mode that's exported by defineManifest(). For this specific context it works perfectly, but I wonder what about other custom variables from just .env?

---

UPD 2: Okay, so apparently since manifest.config.ts is not processed by Vite, only what's exported in defineManifest(env) is usable. Everywhere else you can use import.meta.env.VITE_.

[NekitCorp]

Hi, I think this should help you:

https://vitejs.dev/config/#using-environment-variables-in-config

src/manifest.config.ts:

import { defineManifest } from "@crxjs/vite-plugin";
import { loadEnv } from "vite";
import packageJson from "../package.json";

...

export default defineManifest(async ({ mode }) => {
    const env = loadEnv(mode, process.cwd(), "");

    return {
        manifest_version: 3,
        name: env.EXTENSION_NAME,
        ...
});

.env:

EXTENSION_NAME=myextensionname

I hope this helps you! For me it works in both cases, both for the development phase and for the build phase.