How to set proxy pass for react app on nginx?

Question

My react app has got different routes to consume different functionalities

e.x.

localhost:3000,
localhost:3000/Dashboard,
localhost:3000/Hub,
localhost:3000/Person

etc....

I wanted to configure the react app routes in the nginx in the production environment. What I have actually done so far in the nginx configuration at production env is,

server_name api.vesta-project.net;

location /vqcc {
    proxy_pass http://localhost:3000/;
}

My problem here is with the current settings, the homepage works well when I say "api.vesta-project.net/vqcc". Whereas, when I click a button that navigates to /Dashboard. I get 404 error as it does not append "vqcc" to the path in the react app internally thus it becomes like api.vesta-project.net/Dashboard" when inspecting the request which is wrong per nginx conf. So I need a solution whenever the client make a request, it should append "vqcc" to the path so that it will become a valid url as per nginx routes.

e.x when client request for api.vesta-project.net/Dashboard, it should become

api.vesta-project.net/vqcc/Dashboard

Pls help me if I can handle this at nginx or package.json without being changing any routes in the react app internally

Chang Sheng · Accepted Answer · 2019-10-21 06:49:07Z

2

You can try rewriting the uri in catch-all location.

location / {
    rewrite /(.*) /vqcc/$1;
}

location /vqcc{
    proxy_pass http://localhost:3000/;
}

answered Oct 21, 2019 at 6:49

Chang Sheng

1106 bronze badges

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

1 Comment

Farhan Dulip Over a year ago

Thanks for sharing @Chang but the problem is I can't re-write the base uri ('/') because it is already been consumed by an another service running in the same environment.

Collectives™ on Stack Overflow

How to set proxy pass for react app on nginx?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related