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
Related
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)
I have 2 react applications that I am trying to run locally.
For example:
I have application number 1 that is login application that run on localhost:3000
I need application number 2 to run on localhost:3001/portal <= this is a very simple application that does not even have a router baked into it.
My current solution is:
In application number one is:
BROWSER=none
HOST=localhost
PORT=3000
no homepage property in package.json file.
In application number 2 I go into package.json file and add homepage property. I set up my .env file as:
BROWSER=none
HOST=localhost
PORT=3001
Currently application does get locally deployed for development on https://localhost:3001/portal. However, when I navigate to it all I see is a blank page. I feel like I am missing something and application does not know where to serve files from.
What the set up should be to run 2 applications with on of them on a sub directory?
After longer research I found a thread where its explained in very detail how to accomplish that.
How should I configure create-react-app to serve app from subdirectory?
You should set up an environment variable in youe .env file like so:
HOST=localhost
PUBLIC_URL=/your-subfolder-name
PORT=3000 <== (this is optional, if you want your application to run on port. In my case I was running multiplle applications there for each application had different port).
After variables are set up and you are using any type of router, you will need to calculate your routes based of that relative paths. To get your default paths you can do it by doing so:
process.env.PUBLIC_URL; <== (This will return your variable value that you set up in .env file).
Because I am using rescripts package I had to change react-scripts package. version The minimal version I had to install in order for react to read PUBLIC_URL variable from .env was 3.4.1. The reason solution above did not work for me because rescripts version was lower than 3.4.1.
"react-scripts": "3.4.1",
I'm trying to use environment variables in my react app that I created with npx create-react-app.
I created .env file(in the root directory) and placed the variable which start with REACT_APP, but still when I try to log it in the console, it shows up undefined.
I did restart development server many times, still the same.
I uploaded test project here
not sure about the reason behind this, but it did not work for me with the .env file in the attachment.
So i deleted the .env file and created new one will same content and it started working 🤔🤔🤔
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:
I have an app ready for production. For it to work, each client needs to set a unique url to access their data. How would i prepare the app for making it easy to add a url as an access point to the clients?
Would a correct way to do this be to add it in the manifest.json file and somehow reference it from there? (Until now in development i've only used a global URL in a js file)
You need to install the package dotenv package and create a .env file in your root directory which should contain your environment variables.
Assuming that the URl you are referring to is http://localhost:3000/some/url on your localhost, then your .env file might look like:
MY_URL=http://localhost:3000/some/url
Then in your react application, you can get the value of MY_URL by doing:
const url = process.env.MY_URL
Note that if you are using the create-react-app package, then you do not need to install the dotenv package since it already comes with the create-react-app package. Also you need to change it:
REACT_APP_MY_URL=http://localhost:3000/some/url
Also make sure to add the .env file to your .gitignore file so that you do not push it to your repo.
Assuming that you are deploying your application to Heroku. Heroku provides a simple interface which allows you to add your environment variables which looks like:
That's it.
Maybe you could store them in environment variables?
that way you can always edit them later without having to change components.