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

Try to use html-webpack-plugin, it is uniquely need you to deploy in the future. — Artem Mirchenko
– Artem Mirchenko, Commented Sep 15, 2017 at 9:30

Tristan · Accepted Answer · 2020-03-10 18:50:55Z

280

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

edited Mar 10, 2020 at 18:50

Tristan

3,5783 gold badges33 silver badges40 bronze badges

answered Mar 25, 2018 at 6:48

Gampesh

4,4042 gold badges14 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Alex Glukhovtsev Over a year ago

also official documentation covers this topic

federicober Over a year ago

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

Jason Farnsworth Over a year ago

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?

raddevus Over a year ago

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.

Rikki Over a year ago

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

|

Ganesan · Accepted Answer · 2018-03-16 17:13:15Z

41

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

answered Mar 16, 2018 at 17:13

Ganesan

4114 silver badges5 bronze badges

2 Comments

Mr. 14 Over a year ago

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

user.dz Over a year ago

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

Micky · Accepted Answer · 2022-08-19 15:11:54Z

25

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

answered Aug 19, 2022 at 15:11

Micky

5824 silver badges7 bronze badges

4 Comments

orindholt Over a year ago

You're a legend!

John Yepthomi Over a year ago

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

Mike Over a year ago

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

Eric Steinborn Jul 23 at 15:42

This worked perfectly. The other options require create-react-app as a base. Since I'm using Vite, I needed to set the base URL and it worked!

Mr. 14 · Accepted Answer · 2018-08-30 10:09:54Z

8

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

You can read more about it here.

answered Aug 30, 2018 at 10:09

Mr. 14

9,5466 gold badges42 silver badges56 bronze badges

Comments

wortwart · Accepted Answer · 2022-06-01 10:29:42Z

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.

shriekdj · Accepted Answer · 2022-07-28 06:58:25Z

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

answered Jul 28, 2022 at 6:58

shriekdj

1312 silver badges6 bronze badges

Comments

Boon · Accepted Answer · 2023-10-02 10:52:10Z

2

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

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

<base url="%PUBLIC_URL%" />

Do not set homepage in the package.json.
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.)
In any ingress configuration, use the same path as PUBLIC_URL.

answered Oct 2, 2023 at 10:52

Boon

1,1732 gold badges20 silver badges47 bronze badges

Comments

ssantos · Accepted Answer · 2024-11-11 11:24:53Z

0

What worked for me in nx next react was setting assetPrefix in next.config.js

module.exports = {
  ...

  assetPrefix: './'

  ...
};

edited Nov 11, 2024 at 11:24

answered Nov 11, 2024 at 10:32

ssantos

16.6k7 gold badges57 silver badges82 bronze badges

Collectives™ on Stack Overflow

Relative path in index.html after build

8 Answers 8

7 Comments

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

7 Comments

2 Comments

4 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related