Attaching absolute path to css/js files while building the react app

Question

Is there a way I could have absolute paths to reach js/css files after I build the react app? I tried the homepage thing in package.json which looks like:

  {
    "name": "controller",
    "version": "0.1.0",
    "private": true,
    "homepage": "http://127.0.0.1/controller/",
    "dependencies": {
      "react": "^16.5.2",
      "react-dom": "^16.5.2",
      "react-scripts": "2.0.4"
    },
    "scripts": {
      "start": "PORT=3006 react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": [
      ">0.2%",
      "not dead",
      "not ie <= 11",
      "not op_mini all"
    ]
}

But the final output produced has an output which looks like:

<script src="/controller/static/js/main.38015169.chunk.js"></script>

So the path is from controller. The problem occurs when I try to load the react app from a proxy. The scripts start giving 404 error because it searches the scripts on a different domain. How could I make the part as absolute during the react build?

I would want the referencing to look like:

<script src="http://127.0.0.1/controller/static/js/main.38015169.chunk.js"></script>

Try creating .env file at the root level. Set NODE_PATH to ‘127.0.0.1/controller/static’ or ‘127.0.0.1/src’ I'm not sure. I think that this will work if you are using create-react-app because create-react-app is configured in such a way that its webpack configuration will automatically pick up ‘.env’ files and read the ‘NODE_PATH’ environment variable, which can then be used for absolute imports. — evgeni fotia
– evgeni fotia, Commented Oct 11, 2018 at 14:46
Or try doing this instead <base href="http://127.0.0.1/"> in the head of the index file — evgeni fotia
– evgeni fotia, Commented Oct 11, 2018 at 19:24
have you tried adding <base href="http://127.0.0.1/"> to index.html? I think that this one should work because it use HTML — evgeni fotia
– evgeni fotia, Commented Oct 12, 2018 at 14:31

Suhail Gupta · Accepted Answer · 2018-10-16 16:57:08Z

5

I was able to solve this by placing a variable called PUBLIC_URL in the .env file at the root of each react application.

PUBLIC_URL=http://127.0.0.1/controller/

When the build is made, all javascript/CSS paths start from the value of PUBLIC_URL, which is what I had wanted.

answered Oct 16, 2018 at 16:57

Suhail Gupta

23.4k67 gold badges214 silver badges347 bronze badges

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

Collectives™ on Stack Overflow

Attaching absolute path to css/js files while building the react app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related