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, Sep 15 '17 at 09:30

score 256 · Answer 1 · edited Mar 10 '20 at 18:50

256

// 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 '20 at 18:50

Tristan

3,530
3
30
39

answered Mar 25 '18 at 06:48

Gampesh

4,024
2
12
9

6

also official documentation covers [this topic](https://facebook.github.io/create-react-app/docs/deployment#building-for-relative-paths) – Alex Glukhovtsev Apr 22 '19 at 08:49
7

The documentation has been updated to suggest using `"."` and not `"./"`. See [this Github issue](https://github.com/facebook/create-react-app/issues/1487#issuecomment-277727669) – federicober Nov 19 '21 at 13:05
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? – Jason Farnsworth Dec 31 '21 at 23:39
Adding the dot breaks the assets paths for me – Yairopro Jan 19 '22 at 15:03
1

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. – raddevus Jun 06 '22 at 20:55

score 37 · Answer 2 · answered Mar 16 '18 at 17:13

37

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 '18 at 17:13

Ganesan

371
3
5

3

It seems that this fix is specific to projects created by create-react-app? – Mr. 14 Aug 30 '18 at 08:32
Weird, this should be the default results? from the number of votes, it seems the current default is unexpected or not natural choice. – user.dz Jan 05 '22 at 13:47

score 9 · Answer 3 · answered Aug 19 '22 at 15:11

9

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 '22 at 15:11

Micky

422
2
6

1

You're a legend! – orindholt Nov 30 '22 at 12:37
1

Anyone using Vite should upvote this answer. None of the other methods works or even makes sense :) – John Yepthomi Dec 29 '22 at 08:10

score 7 · Answer 4 · answered Aug 30 '18 at 10:09

7

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

You can read more about it here.

answered Aug 30 '18 at 10:09

Mr. 14

9,228
6
37
54

score 2 · Answer 5 · answered Jun 01 '22 at 10:29

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.

score 2 · Answer 6 · answered Jul 28 '22 at 06:58

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

Relative path in index.html after build

6 Answers6

Linked