Runtime environment variables

Does react refine allow for using environment variables after the build script has been ran

5 Replies

kapa.ai•13mo ago

Hi @.chasel. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, refine, being a React-based framework, allows the use of environment variables. However, the specifics of how environment variables are used depend on the underlying React framework. For instance, in Next.js, environment variables can be defined for different application running environments. To use environment variables in the browser, you can add a NEXT_PUBLIC_ prefix to a variable defined in env.local. Next.js will automatically make it accessible for use in the browser and anywhere else in your application. For example:

# env.local  
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID='your_google_analytics_id_here'

# env.local  
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID='your_google_analytics_id_here'

You can then use it in your code like so:

...   
return (  
 <>  
 <Script strategy="lazyOnload" src={`<https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}`}> />  
 <Script strategy="lazyOnload">  
 {`  
 window.dataLayer = window.dataLayer || [];  
 function gtag(){dataLayer.push(arguments);}  
 gtag('js', new Date());  
 gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}', {  
 page_path: window.location.pathname,  
 });  
 `}  
 </Script>  
 ...  
 </>  
)

...   
return (  
 <>  
 <Script strategy="lazyOnload" src={`<https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}`}> />  
 <Script strategy="lazyOnload">  
 {`  
 window.dataLayer = window.dataLayer || [];  
 function gtag(){dataLayer.push(arguments);}  
 gtag('js', new Date());  
 gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID}', {  
 page_path: window.location.pathname,  
 });  
 `}  
 </Script>  
 ...  
 </>  
)

In env.local we defined a NEXT_PUBLIC_GOOGLE_ANALYTICS_ID variable which holds the value for our Google analytics ID. The prefix NEXT_PUBLIC_ lets us use the variable process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID in client side code (/pages/_app.js). Note that _app.js runs on both the client and server. For more information, you can refer to the Next.js environment variables blog post (https://refine.dev/blog/next-js-environment-variables) on the refine website. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@196423433930670080> kapa.ai is still learning and improving, please let us how it did by reacting below

flat-fuchsia•13mo ago

@kapa.ai I am using pure react with browser router. The problem I am having, is that currently I can only set the environment variables value before "building" the project. However, I would like to set its value at runtime.

kapa.ai•13mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- In a typical React application, environment variables are embedded during the build, and changing them requires rebuilding the application. This is because Create React App (and many other similar tools) replace process.env references with their values at build time. This means that if you want to change the environment variables, you would need to rebuild your application. However, if you want to configure environment variables at runtime without rebuilding your application, you might need to look into different strategies. One common approach is to have a configuration file that is loaded when your application starts. This file can be a JavaScript file that sets global variables or a JSON file that is fetched at runtime. Please note that these strategies are not specific to React Router or the refine framework, and they would apply to any React application. Unfortunately, the provided extracts do not contain specific information on how to implement runtime environment variables in a React application using refine or React Router. For more detailed guidance, you may want to refer to the official React and refine documentation or community resources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•13mo ago

<@196423433930670080> kapa.ai is still learning and improving, please let us how it did by reacting below