Runtime environment variables

Does react refine allow for using environment variables after the build script has been ran
K
kapa.ai286d 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: ----------------------
K
kapa.ai286d ago
<@196423433930670080> kapa.ai is still learning and improving, please let us how it did by reacting below
F
flat-fuchsia286d 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.
K
kapa.ai286d 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: ----------------------
K
kapa.ai286d ago
<@196423433930670080> kapa.ai is still learning and improving, please let us how it did by reacting below
More Posts
nested form submissionI have 2 forms that use the useForm hook, ``` const form_A = useForm({...}); const form_B = useForm(Submit a form within another form's onSubmit.I have 2 forms via useForm ``` const form_A = useForm({...}); const form_B = useForm({...}); ``` Wheresource.route is deprecatedMy code is working however it gives me a warning that resource.route is depreciated. The comment sayUniversally Set Timezone within App?Hi, The ISO-8601 dates in my database are in UTC. However, my application is using a different timeReuse SaveButtonI have a custom Form I where I'm using one of my resources Create components. I want to adjust the rCall useCustom on clickHow to call a useCustom when i click on a button ?Refine lib error on buildI have this error when I try to build my project : ``` package.json (scripts) ... "build":Trigger useCustom on clickIs there any way to trigger an useCustom on click on a button ?Custom CRUD operationsCan anyone point me towards resources/docs where I can learn about implementing custom crud operatioCan you load/host Refine with Serverless?I want to save costs in AWS and would like to host Refine in Lambda, would that be possible?Supabase clone with new idWhen I am trying to clone a record and hit save I get the error **duplicate key value violates uniuseTranslate doesn't work at app.tsUsing refine v4 I used useTranslate inside app.ts Refine - resources And it's not workingRefetch not working as expected (Table not updating)Hi! I'm using: `tableQueryResult: { refetch }` from useTable, and `refetch` from useList in twRefreshing via RefreshButton & On an IntervalHi! I have three questions relating to refreshing data: 1. I've used RefreshButton with an empty sLayout prop in Refine components is deprecated. What alternatives?How to use my custom layouts if Layout prop in Refine components is deprecated.What the point to duplicate same path in resources and router?What the point to duplicate same path in resources and router?