React admin data provider on server (back end) side

Question

We're considering React Admin for our project. We've evaluated it, gone well. However, we have a unique requirement which we cannot find an answer to.

According to the Data Provider architect:

enter image description here

The Data Provider resides in the browser. When we create the data provider, we have to provide the URL of the API.

We have a unique requirement where our backend server is deployed in a private network on the customer's premise. The IP address of the server is assigned by the customer. Since we do not know the IP address of the server, how do we set it in the data provider?

Is there a way to have the data provide reside on the backend server?

|-----------------------| |----------------------------------|
| react-admin ----------|-|---------> data provider ---> API |
|-----------------------| |----------------------------------|
 browser backend server

If we set API URL to localhost, it should work.

Thank you for your help

Answer 1

If you have something variable in your environment, you can use .env files to provide server ip or other required info and build your dataprovider based on the variable. Since your client has to make some calls to some backend, this should be handled by data provider.

Here is a small proof that you can use env variables in the react-admin app: https://marmelab.com/react-admin/Tutorial.html#using-an-api-as-the-data-source

In this tutorial they suggest using an env variable like this:

// in src/dataProvider.ts
import jsonServerProvider from 'ra-data-json-server';
export const dataProvider = jsonServerProvider(
 import.meta.env.VITE_JSON_SERVER_URL
);

Which means you can store some IP addresses, ports and other dynamic vars like this.

You can use this list to find a suitable dataprovider package for your case: https://marmelab.com/react-admin/DataProviderList.html

• Dzuy Nguyen: I've written my own dataprovider with localhost and it works well. But if deployed on a customer's premise, the dataprovider has to be the IP address of the server, which we have no control of. If it's a fixed IP address, we can have a setting page that writes to the .env file. That won't work if it's a dynamic address.

Answer 2

The best way we've found is to use a reverse proxy on the backend so that https://server/ serves the static HTML + JS bundles (from RA app build) and then https://server/api is reverse proxied to your API server. Then you can just use a relative path of /api/ in your data provider.

With a reverse proxy like Caddy you get automatic HTTPS certficates from LetsEncrypt etc other benefits as well.

Other ways to do it:

• Add a JSON file with settings like API URL into the webserver (that serves the HTML + JS bundles) directory, then load it with fetch or XHR and cache the settings.
• Use localStorage.setItem("API_URL", "https://server2/api") in your index.html and in the data provider read the URL with const url = localStorage.getItem("API_URL") .. that way the customer can modify the index.html themselves to store settings inside the browser.