Vite + React: Environment Variables for Local Development
I'm using the Vite + React template provided by Railway. I've cloned the created repo to my computer and used
npm run dev to start the local development server. However, when I try to access import.meta.env.VITE_DROPBOX_ACCESS_TOKEN, it's undefined.
I've been able to use this method to access environment variables in other Vite + React projects just fine. Those projects were not using this template. I've verified that my .env file is in the root directory and that I'm using the correct spelling. I've even tried dotenv, but I don't think that's intended for use with Vite, since it's not even able to run without hitting a process is not defined error.
I'm out of ideas at this point. Thanks for taking the time to consider this issue.Solution:Jump to solution
you are missing the
VITE_ prefix, please read this docs page https://vitejs.dev/guide/env-and-mode
(but ignore the .env stuff)...22 Replies
Project ID:
4d538bd3-aeab-4706-b060-8f714a366c384d538bd3-aeab-4706-b060-8f714a366c38
you will want to use the railway cli in order to access the service variables locally/
please read this docs page https://docs.railway.app/develop/cli
after installing, authenticate yourself.
in your local project run
railway link to link to your desired railway service.
run your react app locally with the service variables aviable with railway run npm run devSo the .env file can't be used at all with this template?
you have zero need for the .env file when using the railway cli in the way I described above, I would personally not use an .env file at all when developing an app that will run on railway
Can you explain why? I don't get to work other developers very often, so I'm not always up to speed on best practices.
an .env file is a plaintext file, storing secrets in a plaintext file is a terrible idea in my opinion
ah, I assumed it was something more complicated π fair enough, it's just the way I was taught.
using the railway cli with
railway run replaces all need for an .env file, you store all the secrets securely as service variables, then use railway run locally and all services variables (environment variables) will automatically be available to the app ran through that command, nothing saved to diskOk, I have the app running with
railway run, but when I try import.meta.env.VITE_DROPBOX_ACCESS_TOKEN, the value is still undefined. I've also tried process.env.DROPBOX_ACCESS_TOKEN but got the process is not defined error.do you have that variable set in your service variables on the railway service?
https://docs.railway.app/develop/variables#service-variables
Yes, although I haven't redeployed since adding it. Do I need to redeploy?
for it to be available to the railway service you would need to redeploy.
for it to be available to the railway run command, you would need to re-run that command
Ok, I redeployed with the variable set. I also ran the command again. Is
import.meta.env.VITE_DROPBOX_ACCESS_TOKEN correct?
the variable is still coming back undefinedthat would be how you access it, but how have you set it?
I went to the production environment in my project, clicked on the project, then variables -> new variable
sorry, clicked on the service*
pictures are worth 1000 words π
Solution
you are missing the
VITE_ prefix, please read this docs page https://vitejs.dev/guide/env-and-mode
(but ignore the .env stuff)if I had a nickel for every .env file I saw in a public repository, id have a fair amount of nickels, and a fair amount of people's database credentials lol
I am at least careful with .gitignore! But I also have to admit that storing that kind of stuff on my computer always felt a bit sketchy
That worked! Thanks so much for your help!
happy to help π