Can I use relative path with webpack dev server - react js

Question

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.

Ken Bekov · Accepted Answer · 2020-06-04 12:36:40Z

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.

edited Jun 4, 2020 at 12:36

answered Jun 4, 2020 at 12:17

Ken Bekov

14.1k3 gold badges40 silver badges46 bronze badges

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

Collectives™ on Stack Overflow

Can I use relative path with webpack dev server - react js

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