Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Relative path in index.html after build

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">
like image 902
user3045654 Avatar asked Sep 15 '17 09:09

user3045654


3 Answers

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

like image 73
Gampesh Avatar answered Oct 19 '22 11:10

Gampesh


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

like image 33
Ganesan Avatar answered Oct 19 '22 09:10

Ganesan


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

You can read more about it here.

like image 7
Mr. 14 Avatar answered Oct 19 '22 11:10

Mr. 14