1

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>
Anik
  • 2,692
  • 2
  • 22
  • 25
  • Have you changed the `homepage` entry in the `package.json` file? Set the `basename` prop of the router? Where are these static assets in relation to the `"/payment"` directory on the server? Can you share any of the code you've tried? https://stackoverflow.com/help/minimal-reproducible-example – Drew Reese May 16 '22 at 06:51
  • although changing `homepage` is not an option for me as I have other apps that are not going under `/payment`, I did add an entry in my package.json for `homepage` to `/payment` with no luck. – Anik May 16 '22 at 06:54
  • This doesn't appear to be a `react-router` issue. Is there a build script you are using to generate the `index.html` file? A template file that has the script tags injected? – Drew Reese May 16 '22 at 06:59
  • No build script, Just the `nx build` , and I have removed react-router tag, as it's not a react-router issue – Anik May 16 '22 at 07:00
  • Did you figure this out? If you are leveraging executors then you would add `"baseHref": "/payment/",` to your build options. This worked for me. However, I'm having trouble setting a matching value as the basename for react router. – Jeff Howard Sep 01 '22 at 16:51

3 Answers3

1

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

Anik
  • 2,692
  • 2
  • 22
  • 25
  • appears it either `base` or `baseHref` now, at least with the vite builder for react - https://nx.dev/packages/vite/executors/build#base – chrismarx Aug 07 '23 at 16:53
0

i set the "baseHref" property in the production config in the project.json and then it appeared in the generated index.html enter image description here

mike
  • 391
  • 3
  • 5
-2

The easiest way to achieve this is to change the base tag by editing apps/payment/src/index.html:

<base href="/payment/">

The browser will then prepend the path to those assets.

JM NZ
  • 189
  • 1
  • 7
  • Unfortunately that didnt work – Anik Jun 06 '22 at 05:32
  • @Anik this is working for my Nx workspace React apps served under subdirectories (with the addition of some config for CloudFront & S3 as they're deployed to AWS). If you could create a reproducible example of your setup I might be able to help. – JM NZ Jun 08 '22 at 01:47