6

When I run a development server on localhost:3000 using npm run start, the server works as expected. I am using react-scripts, I have not ejected the react app.

What I am trying to do, is set up the dev server behind a reverse proxy. So localhost:5572/author/name/ will point to the development server running on localhost:3000.

The setup is working fine, the index.html gets loaded. But as the dev server is running at "/", the page tries to load scripts as "<script src="/static/js/bundle.js"></script>". So, it expects the URL to be localhost:5572/static/js/bundle.js. But the reverse proxy is serving the same file at localhost:5572/author/name/static/js/bundle.js

Inside the package.json, I have specified 

{
    ...
    "homepage": "./",
    ...
}

so my production builds have a relative path, but the dev builds don't.

Is there a way to have relative paths rather than absolute? Or is there a different solution I can use.

Thank You.

Chaitanya Bankanhal
  • 463
  • 4
  • 10

1 Answers1

3

Create file named .env.development in the root folder of your project. Add to the file the next string:

PUBLIC_URL=/author/name

This settings will affect only on dev mode. More details about how to define environment variables you can find here. And here is some information about using of public folder.

Ken Bekov
  • 13,696
  • 3
  • 36
  • 44