Change base url of a react app in NX workspace

I have a nx workspace where I have several react apps. One of them is payment and I want to serve it under mybaseurl.com/payment . The static assets (css, js) are failing to load because they are still pointed at root in the index.html. I cannot seem to change the PUBLIC_URL to "/payment" so that all the static files are served from mybaseurl.com/payment instead of mybaseurl.com. I have tried putting PUBLIC_URL="mybaseurl.com/payment" in the .env file as well as, PUBLIC_URL="mybaseurl.com/payment" nx build payment --prod but nothing seems to have any result.

How can I change PUBLIC_URL here during build time?

For ref, use of PUBLIC_URL: https://create-react-app.dev/docs/adding-custom-environment-variables/

Example code:

Currently the build is generating the following

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Payment</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  
    <link rel="stylesheet" href="styles.eb84118aca9dde73dfd8.css">. 
    <link rel="stylesheet" href="main.0e4338761429b4eb16ac.css">


</head>
  <body>
    <div id="root"></div>
    <script src="runtime.28c323bf8ee123f67bad.esm.js" type="module"> </script>
    <script src="polyfills.dd856a07eb47f9259494.esm.js" type="module"></script>
  <script src="main.705bf19aea16ed7111ba.esm.js" type="module"></script>

</body>
</html>

But I want the build to generate the follwing in the index.html,

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Payment</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  
    <link rel="stylesheet" href="/payment/styles.eb84118aca9dde73dfd8.css">. 
    <link rel="stylesheet" href="/payment/main.0e4338761429b4eb16ac.css">


</head>
  <body>
    <div id="root"></div>
    <script src="/payment/runtime.28c323bf8ee123f67bad.esm.js" type="module"> </script>
    <script src="/payment/polyfills.dd856a07eb47f9259494.esm.js" type="module"></script>
  <script src="/payment/main.705bf19aea16ed7111ba.esm.js" type="module"></script>

</body>
</html>

Solution

If you want to serve the app under base url mybaseurl.com/payment , then during build you have to pass a flag,base-href, so the command to build your app would be,

nx build payment --base-href mybaseurl.com/payment

As a result of the flag, the generated index.html output will contain,

<base href="mybaseurl.com/payment">

and it will make browser lookup all of your scripts and assets on mybaseurl.com/payment instead of mybaseurl.com