I'm using ViteJS with React-ts template and i want to make deploy in Vercel using environment variables, locally i use "import.meta.env.VITE_XXX" and it works with my file .env, but when the application has ben deployed in the Vercel it doesn't works (I'm declared the environment variable in the Vercel configs), follow the example of use at environment variable in my code locally.
const urlApi = import.meta.env.VITE_VERCEL_XXX
When i run in localhost the value is equal my .env file
When i run in Vercel the value is undefined
I read the docs of vite and vercel, but didn't found the solution
I'm expecting another resolution or one direction to resolve the problem
I wonder what value you have set for local.
In my case, the path is set to root, i.e. localhost:3000. This path is set automatically from node env by default.
If I deploy the application to the server and the address is no longer root (i.e. "google.com/"), but is in some other nested folder, I have to set "PUBLIC_URL" in the .env where the entire server address is to the root of the application, for example. "https://www.server.com/app/dev/".
I use a custom .env file to set the PUBLIC_URL
.env.develop
VITE_VERSION=dev
PUBLIC_URL=https://server.com/myproject/develop/stats/app/
It is also necessary to set the base url in vite.config.ts
In the configuration, this is the "base" property
export default defineConfig({
envDir: './buildConfig/environments',
plugins: [react()],
base: process.env.PUBLIC_URL,
build: { outDir: process.env.BUILD_PATH },
});
Also, is it possible that the build is not reading the correct .env file?
If I have created my own file, I define the path to it using envDir, see above. and during the build I define the mode parameter in the script. for example, to build a develop environment with an .env.develop file, it would be vite --mode develop build vite will then take this .env.
Hopefully at least something will lead to success
In your Vercel Project settings, you have to add the exact same values as in your .env file:
key: VITE_YOUR-KEY
value: yourApiKey
Then check the environments you want your variables to be used (Production, Preview and/or Development)
Related
I have on gitlab environment variables secret api tokens, that I want to securely load in my project to be used in the gatsby-.js* files. I do not have or want to use .env files. According to various sources, I should be able to use my env variables just like this : process.env.TOKEN, but it does not work. I tried multiple Gatsby plugins, I tried having the prefix GATSBY_ to my env variables on gitlab, yet it still doesn't work.
What I was able to do for now is to retrieve their values in my gitlab-ci.yml file like this :
TOKEN: "${GATSBY_TOKEN}"
where I can echo them in my build stage, So I don't know if the value is accesible in my yml file locally or it only becomes accesible when the pipeline is launched on gitlab. My question is it possible to pass them down to my gatsby-*.js files ? Or is there another solution entirely to the problem ?
According to various sources, I should be able to use my env variables
just like this : process.env.TOKEN
That is not how environment variables are supposed to work.
If you don't want to use .env files your only chance is setting them in the running commands, gatsby develop as well as gatsby build:
"scripts": {
"start": "SOME_ENV_VAR=someValue gatsby develop",
}
From now on, SOME_ENV_VAR will be exposed to be used in your code.
I deployed a regular React app to Vercel and would like to have a API_BASE_URL environment setting with different values for development, preview and production environments.
Typically, I'd use dotenv npm package with my webpack config setting up the variables for local or production depending on the build by looking into env.local and env.production respectively.
The env.production would look like this:
API_BASE_URL=#{API_BASE_URL}
Then, I'd have my deployment pipeline replace all instances of #{___} with the respective values available in the pipeline.
However, the regular way in Vercel seems to be to make a Next.js app and the environment variables in the project will be automatically available in the process.env variable in the backend code.
Is there anyway for us to have environment variables in a non-Next.js in Vercel?
I'm thinking I have 2 ways forward:
There is actually an easy way 🍀
Create my own build and deployment pipeline to replace the #{___} placeholders and deploy using vercel deploy command.
Had a similar issue on my SPA (React + Webpack) app on deployed on Vercel. This is what worked for me.
https://github.com/mrsteele/dotenv-webpack#properties
webpack.config.js
const Dotenv = require('dotenv-webpack');
module.exports = {
// OTHER CONFIGS
plugins: [
new Dotenv({
systemvars: true
})
]
};
Doing it like this I was able to read env vars from:
Vercel build runtime (ex: VERCEL_ENV)
.env file in my src folder
Env variables defined in Vercel console
Initially, I was overlooking an important fact. Vercel deploys builds and deploys changes in the same step.
2 commits in preview branch which are merge them both to main in 1 single commit: that's a totally new thing (a new build is created for every single commit in every environment).
This goes against the build once, deploy to multiple environments principle but I suppose Vercel's team considered that in their quest to make the development process as simple as possible.
Anyway, I worked out 2 solutions:
In the build command, insert the environment variables e.g. in the package.json:
scripts: {
"build": "webpack --env production --env VERCEL_ENV=$VERCEL_ENV"
}
Create my own build and deployment pipeline and then deploy to vercel using vercel deploy command. It also works but I think I'm going to stick to the option for simplicity, at least in the meantime.
According to Next.js documentation, you need to declare your env variables in next.config.js under env key to read them at build time:
env: {
GOOGLE_ANALYTICS_ID: process.env.GOOGLE_ANALYTICS_ID
},
This is working correctly in my local environment, the variables are hidden from _NEXT_DATA and I can still access them from the client. The problem is when deploying the application for production, it can no longer read from process.env. Has anyone encountered this issue?
Note: I don't want to expose sensitive data. Will adding the NEXT_PUBLIC_ prefix to the env variables expose them to _NEXT_DATA as well?
You should store your env variables in .env (for Next.js versions 9.4 and up) file like it's shown here. In case you are deploying to Vercel refer to this guide
I am a React beginner.
Develop with React, build and deploy to the server.
When deploying, use'yarn run build' to upload the resulting file to the server apache.
During development, the address of the API server was set in the .env file.
After building and deploying, I want to change the API server address in the .env file.
But there is no .env file in the built file...
It seems that the value of the .env file cannot be modified.
In this case, is there a way to change the setting value without build even after deployment?
You need to create two env files .env.development and .env.production under root path and whatever you define in .env.development will work for local and whatever you define inside .env.production will work when you create build that is it is being switched to production mode
I was wondering how I can set environment variable in React to hid my API key?
I am hosting the app on Netlify so I am not sure if that matters. I am able to successfully do it in development but when it gets to production, the api key becomes undefined.
In my .env file when I have:
REACT_APP_API_KEY="my_api_key_etc"
In my app.js I have:
const apiKey = process.env.REACT_APP_API_KEY
when I console.log(apiKey) in development (npm start): it shows my api fine, but when in production mode (npm run build): it shows undefined.
I have already tried to create two more files like .env.development and .env.production and still that didn't work.
Also I made sure my .env files are outside of my src folder.
Do you guys think it has something to do with Netlify?
Thanks in advance!
Ideally you should be setting these variables in your dashboard instead. Head to your Project settings, and add this, and any other variables under environment: