在部署 React JS 应用程序期间如何使用不同的配置文件？

Question

I have 3 environments and I am using Sharepoint as backend. Each environment has got fields which are called differently. The problem is that I can't change the internal names of these fields.

I am using REST API to call SharePoint endpoints as follows:

/sites/someSite/_api/web/lists/getbytitle('list1')/items?$select=field1,field2[etc]

In my react app , I would like to achieve the following:

1. store this relative url /sites/someSite somewhere at the root of the application and access it everywhere in the application
2. each environment has some fields which differ in name, for example:

• dev: field1
• acc: field1 is called col1
• prod: field1 is called fieldCol1 etc

these fields are used in my rest api queries.

How can I configure my application so that during deployment, a configration file can be
 used or some other means to assign the correct fields to each REST API call?

I can use sort of if else branch, but that does not seem realistic.

Dev:

/sites/someSite/_api/web/lists/getbytitle('list1')/items?$select=field1,field2,field3,field4, etc

Acc:

/sites/someSite/_api/web/lists/getbytitle('list1')/items?$select=col1,field2,col3,field4, etc

Prod:

/sites/someSite/_api/web/lists/getbytitle('list1')/items?$select=fieldCol1,fieldCol2,field3,field4, etc

Answer 1

For this you can maintsin 3 seperate configuration/env files for your application (dev.env, ...). First instlall using npm dotenv and env-cmd dependencies. Add following script to the package json file.

    scripts": {
        "start:dev": "env-cmd -f dev.env npm start" 
        "start:prod": "env-cmd -f prod.env npm start"
...
}

If you want to start react app using dev environment. You can use

npm run start:prod

Then mentioned url like below.

"/sites/someSite/_api/web/lists/getbytitle('list1')/items?$select="+ SELECT

You can use require('dotenv').config() to read the environments.

dev.env file like below.

SELECT = col1,col2...