Change base url of a react app in NX workspace

Question

Change base url of a react app in NX workspace

4.4k Views Asked by Anik At 20 October 2024 at 03:41

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>

Original Q&A

There are 4 best solutions below

JM NZ On 05 June 2022 at 23:59

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.

Christophe On 19 March 2024 at 20:51

For those using the "nx-electron" plugin, you can achieve what @Anik suggested by adding the following under targets.build.options in your project's project.json file (i.e. apps/<project-name>/project.json)

        "base": "./"

This has the same behaviour as adding --base ./ to your build command.

I would also suggest to add "emptyOutDir": true, to make remove the existing previous dist folder. Otherwise, you'll see this:

(!) outDir /path/to/project/dist/apps/desktop-app is not inside project root and will not be emptied.
Use --emptyOutDir to override.

FYI: I created this project using the react-monorepo preset.

$ npx create-nx-workspace@17 react-electron-monorepo --preset=react-monorepo

✔ Application name · react-app
✔ Which bundler would you like to use? · vite
✔ Test runner to use for end to end (E2E) tests · playwright
✔ Default stylesheet format · css
✔ Do you want Nx Cloud to make your CI fast? · skip

Then install the nx-electron plugin:

$ npm install -D nx-electron
$ nx g nx-electron:app electron-app --frontendProject=react-app
$ npx nx add @nx/jest
$ npm i -D webpack-node-externals

Finally, add the following to the root of your main package.json:

  "build": {
    "executableName": "react-app",
    "artifactName": "react-app-${version}.${ext}"
  },

Enjoy!

mike On 29 September 2022 at 18:19

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

**Anik** · Accepted Answer

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

Change base url of a react app in NX workspace

There are 4 best solutions below

Related Questions in REACTJS

Related Questions in NX.DEV

Trending Questions

Popular # Hahtags

Popular Questions