Request endpoint on react app prod. build

Hi,
So far, for development we have used the “proxy” argument in the package.json to state the endpoint to make the JSON API calls from our react app to the ledger. We then found out that this only works in dev. mode, so my question follows: Is there a best practice here when switching into the prod. build?

Thanks in advance!

Hi @Matheus!

In the prod you should consider setting up a reverse proxy (nginx, apache) in front of the JSON API.

The reverse proxy should be configured with SSL/HTTPs support, plain HTTP should be disallowed.

To expand on what @Leonid_Shlyapnikov said, with the reverse proxy your UI will be served from the same endpoint as the JSON API which also avoids any CORS issues.

Thanks @cocreature and @Leonid_Shlyapnikov, but I was actually interested in knowing where to save the url in the app code.

Matheus:

where to save the url in the app code

you meant the JSON API URL, that reverse proxy should forward all requests to, right? This should be in the nginx or apache configuration.

I will ask if we have a good example of how to set up apache or nginx reverse proxy in front of the JSON API.

In a production deployment, you’ll want to use a battle-hardened HTTP server (probably nginx or Apache).

Nginx’s documentation on reverse proxy setup:

NGINX Docs | NGINX Reverse Proxy

Configure NGINX as a reverse proxy for HTTP and other protocols, with support for modifying request headers and fine-tuned buffering of responses.

Apache’s documentation on reverse proxy setup:
https://httpd.apache.org/docs/2.4/howto/reverse_proxy.html

Most web servers have a way of proxying traffic through them, and it’s also common for your webserver to be the place where you configure TLS/SSL so that your services are not exposed in plain text.

Thanks @cocreature and @Leonid_Shlyapnikov, but I was actually interested in knowing where to save the url in the app code.

By default, create-daml-app will use the same host, port and path as the UI. So if you setup a reverse proxy to host your UI on the same URL, host and port as the JSON API you don’t have to configure anything. If you want to change the URL (note that cross-origin restrictions apply but you can change the path), you can configure the httpBaseUrl at https://github.com/digital-asset/daml/blob/9ed9970493c574bf22fe1e3ed8a7f500708ec16a/templates/create-daml-app/ui/src/components/App.tsx#L22. E.g., we set it for DABL at https://github.com/digital-asset/daml/blob/4b26a62ad95d55526cfc9276d9f946b4675eeb44/templates/create-daml-app/ui/src/config.ts.template.