R
Railwayβ€’12mo ago
Jedi_Mediator

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:
you are missing the VITE_ prefix, please read this docs page https://vitejs.dev/guide/env-and-mode (but ignore the .env stuff)...
Jump to solution
22 Replies
Percy
Percyβ€’12mo ago
Project ID: 4d538bd3-aeab-4706-b060-8f714a366c38
Jedi_Mediator
Jedi_Mediatorβ€’12mo ago
4d538bd3-aeab-4706-b060-8f714a366c38
Brody
Brodyβ€’12mo ago
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 dev
Jedi_Mediator
Jedi_Mediatorβ€’12mo ago
So the .env file can't be used at all with this template?
Brody
Brodyβ€’12mo ago
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
Jedi_Mediator
Jedi_Mediatorβ€’12mo ago
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.
Brody
Brodyβ€’12mo ago
an .env file is a plaintext file, storing secrets in a plaintext file is a terrible idea in my opinion
Jedi_Mediator
Jedi_Mediatorβ€’12mo ago
ah, I assumed it was something more complicated πŸ˜› fair enough, it's just the way I was taught.
Brody
Brodyβ€’12mo ago
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 disk
Jedi_Mediator
Jedi_Mediatorβ€’12mo ago
Ok, 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.
Brody
Brodyβ€’12mo ago
do you have that variable set in your service variables on the railway service? https://docs.railway.app/develop/variables#service-variables
Jedi_Mediator
Jedi_Mediatorβ€’12mo ago
Yes, although I haven't redeployed since adding it. Do I need to redeploy?
Brody
Brodyβ€’12mo ago
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
Jedi_Mediator
Jedi_Mediatorβ€’12mo ago
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 undefined
Brody
Brodyβ€’12mo ago
that would be how you access it, but how have you set it?
Jedi_Mediator
Jedi_Mediatorβ€’12mo ago
I went to the production environment in my project, clicked on the project, then variables -> new variable sorry, clicked on the service*
Brody
Brodyβ€’12mo ago
pictures are worth 1000 words πŸ˜‰
Jedi_Mediator
Jedi_Mediatorβ€’12mo ago
No description
Solution
Brody
Brodyβ€’12mo ago
you are missing the VITE_ prefix, please read this docs page https://vitejs.dev/guide/env-and-mode (but ignore the .env stuff)
Brody
Brodyβ€’12mo ago
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
Jedi_Mediator
Jedi_Mediatorβ€’12mo ago
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!
Brody
Brodyβ€’12mo ago
happy to help πŸ™‚
Want results from more Discord servers?
Add your server