Does Remix use vite’s import.meta.env or process.env?
The answer is, both. However it’s better to rely on vite’s import.meta.env because of 2 things:
1. Only VITE_ prefixed environment variables are imported
2. It’s also available in the non-SSR context, while process.env is a NODE thing only and not propagated to the browser.
So what does that mean?
You can have a
.env.development
and a
.env.production
file in the project root and add things like
|
1 2 |
VITE_HTTP_ENDPOINT=http://localhost:8080/api/v1 VITE_OIDC_AUTHORITY=https://my.id.domain.tld |
and you can access those variables with e.g.
|
1 2 |
const httpEndpoint = import.meta.env.VITE_HTTP_ENDPOINT const oidcAuthority = import.meta.env.VITE_OIDC_AUTHORITY |
but this also gives you access to other variables, which are present by default
|
1 2 3 4 5 6 7 |
{ BASE_URL: '/', DEV: true, MODE: 'development', PROD: false, SSR: true, } |