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">

Maudemaudie

Try to use html-webpack-plugin, it is uniquely need you to deploy in the future. – Trailer

Answer 1

// 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.

Guesswork

also official documentation covers this topic – Londrina

The documentation has been updated to suggest using "." and not "./". See this Github issue – Toreutic

When I use "." or "./" I can see that all the paths now have a dot at the beginning, but it seems that browsers ignore that dot and still try to pull from the root. I don't get why react build doesn't just remove the opening forward slash? – Tongs

Adding the dot breaks the assets paths for me – Tailstock

Super helpful. So difficult to find. I'm using Photino.io building React JS to create UI for .NET cross-platform apps & the package.json was not using this so it couldn't find resources in proper directory. This fixed it perfectly. – Trask

I would give you a hug right now - saved my evening. Thanks! – Inefficacy

Answer 2

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

Kirovabad

It seems that this fix is specific to projects created by create-react-app? – Kindig

Weird, this should be the default results? from the number of votes, it seems the current default is unexpected or not natural choice. – Leora

Answer 3

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

Mozellamozelle

You're a legend! – Focus

Anyone using Vite should upvote this answer. None of the other methods works or even makes sense :) – Flavory

Thank you! Shouldn't have been this hard to find! – Chlor

Answer 4

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

You can read more about it here.

Kindig

Answer 5

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.

Archdiocese

Answer 6

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

Maleeny

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.

Hewlett