score:1
as @harsh manvar suggested (thanks a lot!), the react-dotenv
library can be used, but just adding it to the project is not enough.
firstly, you have to follow all steps described in react-dotenv documentation (adding .env
file to your project, editing package.json
file).
in my case, .env
file looked like this:
react_app_deploy_setup='__dps__'
react_app_port='__prt__'
react_app_backend_url='__bur__'
these are just placeholders for real values that will be added during runtime.
having the .env
file ready, npm
scripts prepended with react-dotenv
command, and the variables whitelisted (as described in the library documentation), you can build your app image.
when the image is ready, add it to the kubernetes
pod config file and replace your variables' placeholders with real values, like this:
[...]
spec:
containers:
- name: plg-frontend
image: localhost:5000/frontend:1.22
ports:
- containerport: 80
command:
- sh
- -c
args:
- sed -i "s/__prt__/$react_app_port/g" /usr/share/nginx/html/env.js;
sed -i "s/__bur__/http:\/\/$backend_service_host/g" /usr/share/nginx/html/env.js;
sed -i "s/__dps__/$react_app_deploy_setup/g" /usr/share/nginx/html/env.js;
nginx -g 'daemon off;'
env:
- name: react_app_deploy_setup
value: "development"
- name: react_app_port
value: "5089"
what happened up there, was replacing placeholder values with actual values:
$backend_service_host
is an environment variable that exists in the pod and can be read from the running container,$react_app_deploy_setup
is a regular string defined by user,$react_app_port
is an integer value (it has to be in quotes, like strings!).
and the replacing happened with sed
command (or rather: sh -c "sed -i ..."
). all of the commands are chained, so don't forget about semicolons at the end of each argument.
all of the replacements were made in /usr/share/nginx/html/env.js
file, which is created by react-dotenv
library in project root. the actual location depends on where you mounted your build image (it's defined in dockerfile
).
lastly, nginx
command is called, since this is the final command invoked in image's dockerfile
. without this explicit call, the command from the dockerfile
would be overwritten with the commands related to the pod container and, in this case, nginx
wouldn't start your app.
after the pod is started, you can check whether the variables are present in the container:
kubectl exec <pod-name> -- printenv | grep react_app
but it doesn't mean they were read by your app during runtime. to see if they were changed to the values from the pod definition, you can either exec
running pod container and preview the env.js
file or add some console logging in the app code.
score:1
you can use the library dot-env
import react from "react";
import env from "react-dotenv";
export function mycomponent() {
return <div>{env.react_app}</div>;
}
while in deployment you can pass secret from secret and configmap
spec:
containers:
- name: example-site
image: example/app:v1
ports:
- containerport: 80
env:
- name: react_app
value: "123456"
the main reason i want to know it, is dynamic update of e.g. backend or redis urls - they might change when the app is restarted, rescheduled, etc.
above scenario fit well with your requirement, instead of using the config.json
.
you can pass multiple values to deployment using configmap and secrets.
Source: stackoverflow.com
Related Query
- How to inject pod environment variables values into React app on runtime?
- How to use environment variables in React app hosted in Azure
- how to share environment variables between react app and express js server hosting it as static site
- Nx React inject environment variables at runtime
- How can I inject a span into a string and have it printed in my react app as HTML
- How to read environment variables into react js app?
- How to use SCSS variables into my React components
- How to integrate azure ad into a react web app that consumes a REST API in azure too
- How to inject port and host using ENV variable in Create React App Proxy settings?
- How to load environment variables in React
- React: How to inject React component into body?
- How to change PublicPath for Create React App in Dev Environment
- How to embed React App into another website
- How to access environment variables in react from docker and webpack
- How to get SCSS variables into react
- How to import a file into a react app that uses create react app as raw text?
- How to access environment variables inside React JS web app?
- REACT APP not access the google cloud run environment variables
- How to Merge React App into existing Website with existing HTML structure
- How to inject into React Component props?
- How to change React js environment property file (.env) at runtime
- How to parse a string with variables into a react component?
- Recoding RShiny app into React App - how to get my data to my React App
- Properly defining environment variables in Cloud Run for my React App
- How to inject data from the server in index.html in an ASP.NET Core 3 React app
- How get window values in Tests with Enzyme, Jest + Create React App
- How to parameterize variables in a React Webpack app for different environments?
- How to pass config variables from server (Express) to React App
- How to push values into state by calling single onChange function - react
- How to safely inject props into React children?
More Query from same tag
- subtotal not updating after qty change
- Filtering List in React
- React native flatlist, not updating correctly when deleting element from state
- How to spread nested properties in Object?
- Cannot read property something of null, mapStateToProps
- Redux: Using Spread Operator on 2D array
- Getting error while closing the react-modal
- AuthError - Error: Amplify has not been configured correctly / AWS cognito, React JS
- React material-table filtering
- JS code in functional presentation component
- Update State based on Object selection from dropdown menu
- reactjs onchange not work if change value with jQuery
- Display Axios reponse - TypeError: this.state.cryptos.map is not a function
- React how to send object to onClick event
- multiple textfields onChange function issue
- api methods, edit method does not work properly
- Subtract largest multiple of 10
- React Styled Components not getting mode props
- Snapshot testing error: Element type is invalid: expected a string [...]
- React - Click button and delete a list element
- CORS issue React Axios
- Reactjs change state value from child
- Next.js React component getInitialProps doesn't bind props
- Organizing React app in component/container
- HTML audio internet stream caching issue
- How to rewrite a class component to a component that uses hooks
- Property "children" is missing when retrieving synced block
- Not able to re-render the page after deleting the value in firebase database.This.setState is not working
- Prevent React unmounted Component
- Fetching and organizing data and rendering the response