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:
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
2 Answers 2
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
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
fetchor XHR and cache the settings. - Use
localStorage.setItem("API_URL", "https://server2/api")in yourindex.htmland in the data provider read the URL withconst url = localStorage.getItem("API_URL").. that way the customer can modify theindex.htmlthemselves to store settings inside the browser.