Most applications will access data from an API. To access that API you will need to have an API key and the URL to access the API. You should not b...
For further actions, you may consider blocking this person and/or reporting abuse
Great article. One thing that wasn't called out was that your env variables must start with 'VUE_APP_' for vue cli to pick them up automatically.
I wish I would have read your comment earlier. I wasted a lot of time trying to figure out why my env variables weren't working, and this was it.
Doesn't it still hold true that if your app is a client side that your API key will still be exposed, or am I missing something?
Yes. It's security through obfuscation really, worth doing but not the ultimate solution. Ideally you own your endpoint and can hide any public keys serverside (in .env files) and route your traffic through that.
That's true yes . But env variables can also be used for other , non-secret , things . I often use it for a development/production workflow when in development i use other endpoints than in production.
Whoa so this is environment variables!
So when people initialize express port as
process.env.PORT || 5000, we will have to create .env file which has variable PORT in it, right?Is this environment variables only a thing in JS ecosystem or also applies to other?
Not really. You want to store items that you don't want people to have access to. The port your server is running on is not necessarily a secret. If you are say using firebase for authentication then you would not want your firebase API keys available to everyone. In that case you would put that information in your .env file.
If I have config that isn't secret but does change from environment to environment I personally would store it in an env file that isn't in the gitignore. Do you recommend a different approach?
if i have a variable VUE_APP_MY_SECRET in .env file, then when i deploy vue-cli app, can user read process.env.VUE_APP_MY_SECRET from chrome browser console by running process.env.VUE_APP_MY_SECRET from console? how to protect this value from user ?
You shouldn't include any secrets in your frontend/clientside code. From the official docs:
"WARNING
Do not store any secrets (such as private API keys) in your app! Environment variables are embedded into the build, meaning anyone can view them by inspecting your app's files."
During the build process all environment variables will simply be swapped with plain text. So in frontend only use env variables for non-secrets.
Something everyone should know is, you should restart the serve service each time you made a change on your .env file
Jennifer .. Thanks for this post. I've got a question Can I use this approach even when my project was not created with Vue-CLI? Thanks in advanced.
Thanks for that good tutorial!