Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feat] accept PUBLIC as prefix for environment variables #2355

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/wet-snails-push.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@sveltejs/kit': patch
---

[feat] accept PUBLIC as prefix for environment variables
8 changes: 4 additions & 4 deletions documentation/faq/60-env-vars.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@
question: How do I use environment variables?
---

Vite uses [dotenv](https://github.com/motdotla/dotenv) to load environment variables from a file named `.env` or similar. Only environment variables prefixed with `VITE_` are exposed. You would need to instantiate dotenv yourself if you want all environment variables exposed in `process.env['YOUR_ENV_VAR']`. We hope to see all environment variables exposed on the server-side [in the future](https://github.com/vitejs/vite/issues/3176).
Vite uses [dotenv](https://github.com/motdotla/dotenv) to load environment variables from a file named `.env` or similar. By default, Vite only exposes environment variables prefixed with `VITE_`. However, SvelteKit overrides Vite's default `envPrefix` setting to also allow `PUBLIC_` as a prefix. You would need to instantiate dotenv yourself if you want all environment variables exposed in `process.env['YOUR_ENV_VAR']`. We hope to see all environment variables exposed on the server-side [in the future](https://github.com/vitejs/vite/issues/3176).
benmccann marked this conversation as resolved.
Show resolved Hide resolved

[Environment variables cannot be used directly in Svelte templates](https://github.com/sveltejs/kit/issues/720) due [an issue in the way Vite's define plugin works](https://github.com/vitejs/vite/issues/3176).

For example, you can create a `.env` file in your project root folder with a `VITE_*` variable:
For example, you can create a `.env` file in your project root folder with a `PUBLIC_*` variable:

```sh
VITE_MESSAGE="World"
PUBLIC_MESSAGE="World"
```

Then you can access this variable in a `.js` or `.ts` module:

```js
export const MESSAGE = import.meta.env.VITE_MESSAGE;
export const MESSAGE = import.meta.env.PUBLIC_MESSAGE;
```

Then you can pull in the variable in your components from the module:
Expand Down
1 change: 1 addition & 0 deletions packages/kit/src/core/build/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -427,6 +427,7 @@ async function build_server(
const vite_config = config.kit.vite();

const default_config = {
envPrefix: ['VITE_', 'PUBLIC_'],
server: {
fs: {
strict: true
Expand Down
1 change: 1 addition & 0 deletions packages/kit/src/core/dev/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ class Watcher extends EventEmitter {
const vite_config = (this.config.kit.vite && this.config.kit.vite()) || {};

const default_config = {
envPrefix: ['VITE_', 'PUBLIC_'],
server: {
fs: {
strict: true
Expand Down