Relative path in index.html after build

Question

Hello i have a reactjs app, and I build my project with bellow command

npm build

Here is my package.json file:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"},

after build i have folder with build files and index.html file But all paths in this .html are absolute, i want to build with relative path

for example (index.html): now i have:

<script type="text/javascript" src="/static/js/main.af2bdfd5.js"></script>
<link href="/static/css/main.097da2df.css" rel="stylesheet">
<link rel="shortcut icon" href="/favicon.ico">

i want this:

<script type="text/javascript" src="./static/js/main.af2bdfd5.js"></script>
<link href="./static/css/main.097da2df.css" rel="stylesheet">
<link rel="shortcut icon" href="./favicon.ico">

Answer 1

As mentioned in a comment, React's documentation covers this topic:

https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths

Facebook recommends to install the tool env-cmd, create a file with an environment variable and a script in package.json to run.

That's a good concept but unfortunately, this fix does not work properly for two reasons.

First, env-cmd requires the path to start with ./:

"scripts": {
    ...,
    "build:staging": "env-cmd -f ./.env.staging yarn run build"
}

Second, I'm not sure what the environment variable REACT_APP_API_URL is being used for but at least in create-react-app it's PUBLIC_URL. Creating a file named .env.staging with the following content solved the issue for me:

PUBLIC_URL=/projects/my-project

I think the creators of build tools should make it easier to deploy to a subfolder.

Answer 2

If you're using webpack, you can try setting publicPath to ./

You can read more about it here.

Answer 3

if your app is directly build in react then set homepage as "./" or "" empty string in package.json

and if your site build in child react js then for me it was nextjs so i set "basePath" in next.config.js as "" empty string and my issue was resolved

Answer 4

I'm using Vite as my build engine instead of CRA. It does not appear to look at the homepage option in package.json at all. Instead to fix this issue I added a new build option in my scripts that sets the base URL like this:

"scripts": {
   "production": "tsc && vite build --base=./"
}

Documentation can be found here. Hope this helps someone. I know this does not answer OP's question but someone with the same issue might stumble on this like I did

Answer 5

I encountered a similar issue and resolved it by setting "homepage": "./" in package.json

I found this solution here https://github.com/facebook/create-react-app/issues/165

Answer 6

// package.json
{
  "name": "your-project-name",
  "version": "0.1.0",
  "homepage": "./", # <--- Add this line ----
  ...
}

Run npm run build again.

This will change the path to ./, which is the relative path of your project.

Answer 7

The solutions above did not work for me. My solution was the following:

1. Ensure that a base URL is set in the index.hmtl:

<base url="%PUBLIC_URL%" />

2. Do not set homepage in the package.json.
3. In .env, set PUBLIC_URL equal to the path at which you want to serve the app. This should not include the domain so that the build can be deployed to multiple environments (dev, prod etc.)
4. In any ingress configuration, use the same path as PUBLIC_URL.