Issue details
.env value not initialized in the react property
siteKey value is always blank
Property in react
const [siteKey] = useState(process.env.REACT_CAPTCHA_SITE_KEY);
Key in .env
REACT_CAPTCHA_SITE_KEY='some key'
Html
<ReCAPTCHA sitekey={siteKey}/>
Main issue is with your environment declaration, as per create-react-app:
You must create custom environment variables beginning with
REACT_APP_. Any other variables except NODE_ENV will be ignored to
avoid accidentally exposing a private key on the machine that could
have the same name. Changing any environment variables will require
you to restart the development server if it is running.
As you don't have any setter method needed for useState, you can define your variable just with const, like:
const siteKey = process.env.REACT_APP_CAPTCHA_SITE_KEY
I saw Some Issue in your code, First thing is,UseState hook initialization is wrong.
It Should be,
const [siteKey, setsiteKey] = useState(process.env.REACT_APP_CAPTCHA_SITE_KEY);
And also You don't need to use this environment variable as useState, because it is not changing so, when you need to access environment variable, use as below,
ex:const siteKey=process.env.REACT_APP_CAPTCHA_SITE_KEY;
Other Important Issues are,
Your environment variable should prefix with the REACT_APP_ in the .env file.
ex:process.env.REACT_APP_SOME_VARIABLE
And possible Issue can be, your .env file is not in your root which is that, within the same directory as the package. json file.
Key in .env should be like as shown below
REACT_APP_CAPTCHA_SITE_KEY=some_key_value
Also whenever you edit your .env file you need to restart your React app to take effect of your modified file.
Related
I have seen all posts on StackOverflow related to my problem statement. But none of them worked for me.
The following is my folder structure:
I have a variable named REACT_APP_API_URL=some value in the config.env file. In the App.js file I am trying to print out the variable console.log(process.env.REACT_APP_API_URL). But it continues to show undefined.
In one of my pre-request script I need to have my url with all environment variables reaplced. Suddenly the env vars are injected only after the pre-request script. I want to iterate over the env variables and manually replace them. Is it possible?
I can get pm.environment.values, but suddenly this object is not an array. I cant get any values from it with pm.environment.values[0] or use a for(const element of pm.environment.values) on it.
If I could get all environment keys, i could acomlish my aim with pm.environment.get, but I did not found a way to do it.
You can use the .toObject() function. It returns all variables with their values, in the active environment, in a single object:
pm.environment.toObject()
https://learning.postman.com/docs/writing-scripts/script-references/postman-sandbox-api-reference/#using-environment-variables-in-scripts
This will also work for other variable scopes such as Collection, Iteration and Global.
According to the official documentation of Next.js, to expose an environment variable is necessary to use NEXT_PUBLIC_ prefix, but the admin uses process.env.REACT_APP_API_ENTRYPOINT.
In my case to access the REACT_APP_API_ENTRYPOINT env var, I needed to substitute to process.env.NEXT_PUBLIC_REACT_APP_API_ENTRYPOINT. Only with this pwa can access the value.
Is that right or am I making a mistake in changing this value?
You are right partially, Next exposes env variables that has a prefix NEXT_PUBLIC_ automatically, if your app expects to get REACT_APP_API_ENTRYPOINT, there is no point of renaming the variable, since your app won't consume it.
If I understood your scenario correctly, you need to expose REACT_APP_API_ENTRYPOINT, since next doesn't do it automatically, you need to specify if manually in your next.config.js file.
//next.config.js
module.exports = {
...
env: {
REACT_APP_API_ENTRYPOINT: process.env.REACT_APP_API_ENTRYPOINT, // assumes that your variable is defined
}
...
}
I have created a react environment variable in .env file and is able to update it through command prompt or power shell now my aim is to update it through azure pipeline so add a powershell script.But I am not able to figure out how to read or write data in .env file through a azure pipeline powershell script. I wish to change base url for differnet envirnoments dev stage prod (base_url_dev = https://projectName.dev.azurewebsites.net/). Please let me know If there is any other way
You would commit your file like this:
base_url = '#{base_url}#' (never commit enivornment specific values into Source Code)
And then set a base_url variable in each AzDo Stage to the actual value. (You can also use stage scoped variable groups)
in each stage, use a replacetokens step and target your .env file to replace the #{base_url}# to the actual value you declared for each stage.
update source code of react through azure pipeline
We could remove the base url from the .env file, then use a Inline powershell task to set the base url via Logging Command：
Write-Host "##vso[task.setvariable variable=REACT_BASE_URL;]$(REACT_BASE_URL)"
Then define the variable REACT_BASE_URL with different value for different stages in the Variables tab:
Alternatively, just like michiel said, we could use the task Replace Tokens to update the value in the .env file.
Change the base_urls values to #{REACT_BASE_URL}#`：
REACT_BASE_URL = #{REACT_BASE_URL}#
Then, also defined the variable REACT_BASE_URL with different value for different stages in the Variables tab.
And add the task Replace Tokens in the pipeline:
I am attempting use the PropertiesComponent and reading a property file that is in my classpath. I have built a standalone executable jar and I am using the camel Main class - no spring boot.
However, I would like to override one of those properties using environment variables, but it is not working. I am able to override it using the -D, but the documentation indicated that it is possible to override it using an environment variable.
Here is the sample code snippets
Main main = new Main();
main.addRouteBuilder(new HelloRoute());
main.bind("doWork", new DoWork());
PropertiesComponent pc = new PropertiesComponent();
pc.setLocation("classpath:app.properties");
main.bind("properties", pc);
main.run();
Here is the property file
account.route.id=account_route_get
account.route.get=account_route_get_description
startup_route=false
And here is my route where I am attempting to use it. I am attempting to override the startup_route and it does not work correctly.
rest("/account")
.get("/{name}")
.consumes("application/json")
.outType(Account.class)
.route()
.id("{{account.route.id}}")
.description("{{account.route.get}}")
.autoStartup("{{startup_route}}")
.to("log:{{account.route.get}}?level=INFO")
.to("bean:doWork?method=info(${header.name})")
.endRest()
I found this CAMEL-13502 but it is in a different Camel version, and I am wondering if this is also relevant for Camel 2.24.2
Thanks
I'm guessing you don't want to explicitly call out that you want the variable from the OS environment variables.
If you did want to do that, you could state
.autoStartup("${env:STARTUP_ROUTE}")
but if you are wanting a more dynamic solution, another option could be to create a
choice()
that first checks if the environment variable of that name exists, and if not, to default to the one in the properties file.
.when("${env:STARTUP_ROUTE} != null")
.autoStartup("${env:STARTUP_ROUTE}")
.otherwise()
.autoStartup("{{startup_route}}")
Finally, the Camel documentation of Property Component also states:
You can control these modes using the systemPropertiesMode and environmentVariableMode options on the properties component.
When I ran a sample in my project, I did have the ability to configure the systemPropertiesMode, but I didn't have an option for environmentVariableMode so unsure if that is a feature of a higher level Camel version than I'm using.