You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/router/framework/react/how-to/use-environment-variables.md
+10-8Lines changed: 10 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -514,21 +514,22 @@ module.exports = {
514
514
515
515
**Solutions**:
516
516
517
-
1.**Add correct prefix**: Use `VITE_` for Vite, `PUBLIC_` for Rspack.
517
+
1.**Add correct prefix**: Use `VITE_` for Vite, `PUBLIC_` for Rspack.
518
518
Vite's default prefix may be changed in the config:
519
519
```ts
520
520
// vite.config.ts
521
521
exportconst config = {
522
522
// ...rest of your config
523
-
envPrefix: 'MYPREFIX_'// this means `MYPREFIX_MY_VARIABLE` is the new correct way
523
+
envPrefix: 'MYPREFIX_',// this means `MYPREFIX_MY_VARIABLE` is the new correct way
524
524
}
525
525
```
526
-
3.**Restart development server** after adding new variables
527
-
4.**Check file location**: `.env` file must be in project root
528
-
5.**Verify bundler configuration**: Ensure variables are properly injected
529
-
6.**Verify variable**:
530
-
-**In dev**: is in correct `.env` file or environment
531
-
-**For prod**: is in correct `.env` file or current environment ***at bundle time***. That's right, `VITE_`/`PUBLIC_`-prefixed variables are replaced in a macro-like fashion at bundle time, and will *never* be read at runtime on your server. This is a common mistake, so make sure this is not your case.
526
+
2.**Restart development server** after adding new variables
527
+
3.**Check file location**: `.env` file must be in project root
528
+
4.**Verify bundler configuration**: Ensure variables are properly injected
529
+
5.**Verify variable**:
530
+
531
+
-**In dev**: is in correct `.env` file or environment
532
+
-**For prod**: is in correct `.env` file or current environment **_at bundle time_**. That's right, `VITE_`/`PUBLIC_`-prefixed variables are replaced in a macro-like fashion at bundle time, and will _never_ be read at runtime on your server. This is a common mistake, so make sure this is not your case.
532
533
533
534
**Example**:
534
535
@@ -559,6 +560,7 @@ PUBLIC_API_KEY=abc123 npm run build
559
560
**Solutions**:
560
561
561
562
Pass variables from the server down to the client:
563
+
562
564
1. Add your variable to the correct `env.` file
563
565
2. Create an endpoint on your server to read the value from the client
-**Forprod**: isincorrect`.env`fileorcurrentenvironment***atbundletime***. That's right, `VITE_`-prefixed variables are replaced in a macro-like fashion at bundle time, and will *never* be read at runtime on your server. This is a common mistake, so make sure this is not your case.
388
+
389
+
-**Indev**: isincorrect`.env`fileorenvironment
390
+
-**Forprod**: isincorrect`.env`fileorcurrentenvironment**_atbundletime_**. That's right, `VITE_`-prefixed variables are replaced in a macro-like fashion at bundle time, and will _never_ be read at runtime on your server. This is a common mistake, so make sure this is not your case.
390
391
391
392
**Example**:
392
393
@@ -411,6 +412,7 @@ VITE_API_KEY=abc123 npm run build
0 commit comments