How to get environment variables in the aAPI side from the UI?

React noob here. I'm currently migrating an app from Next.js to React.

In Next, we had certain environment variables (such as root URLs) defined in our Jenkinsfile that would be called from our UI via .

Now that we're migrating to React, I can't use in the UI side, as this is a Node property. I also can't store these environment variables on the API side and call them from the UI side, as React doesn't allow references to be made outside the UI's /src directory.

Is there a way to use our environment variables (defined in Jenkinsfile) from our UI? I'm considering creating a GET endpoint in the API side to return the environment variables to the UI when it loads, but would like to know if there are any alternative solutions.

Probably obvious, but here's the basic layout of our app

-api
  -src
-ui/react
  -src
    -utils
      constants.js <- trying to store the env vars here
jenkinsfile

How to get environment variables in the aAPI side from the UI?

Good Question 0Comment Collection Report

0 Answer

DK4213 注册会员
2023-01-24 19:39

Technically, we can't use environment variables in browser context, that's why we usually use DefinePlugin or EnvironmentPlugin in webpack based projects like CRA and Vue-CLI to statically replace process.env.* with environment variables.

But this way will forces us to multiple times for different stages.

To fix this, ., I recommend trying import-meta-env.

During production, this plugin statically replaces import.meta.env.* with placeholders (we use import.meta because process.env is a Node specific object), then we can run the built-in script and replace the placeholders with real environment variables later.

I also created an example for Docker. For Jenkins, I think it can be done in the same way.

Hope this helps someone who needs it.

Agree 0 0Comment

1234567891 未验证用户
2023-01-24 19:39

If you are using create-react-app you can define your env variables in the .env file, just prefix them with REACT_APP_.

If not, you can use build tools like webpack to add them for you

Agree 0 0Comment

How to get environment variables in the aAPI side from the UI?

How to get environment variables in the aAPI side from the UI?

0 Comment

0 Comment

0 Comment

About the Author

Question Info

Related Question

Azure Postgres autovacuum和分析阈值-如何改变它?

如何自动使计算在一个单元格在同一行使用另一个单元格的数据,是在QtableWidget更改?

Qt如何用obj MouseMoveEvent覆盖CustomWidget MouseMoveEvent

Symfony Doctrine检查级联关系的ID是否为OneToMany Never BE value

Getx导航的问题

使用Azure函数和Azure Storage处理长时间运行的任务

在T应该实现Into trait的地方实现From trait

Python-2.7.18: cryptography-3.3.2模块从源代码安装失败

DirectorySearcher找不到传真属性

How do you create a foreign key relationship in EF Core to a column that isn't the primary key but already has a foreign key relationship?