I have a react application that was created using create-react-app being served from an NGINX server. We have it setup to serve the site statically, where I do npm run build and it builds the site of course to the the /build directory. I then rsync it over to a certain directory where of course the nginx config file has a server entry setup to look in this directory and serve the site. Everything works.
But the issue is because this site is very large, every small change you make, you have to rebuild the site (which takes a while) and then rsync it over. This is not good for development. Of course this is the production pipeline which is pretty standard.
What I need to do is be able to run npm start from my directory and it invokes the create-react-app development server (built in) and I am assuming it is serving from localhost:3000 now.
How do I set up nginx to route to localhost:3000 or a specifically unique new nginx server entry. The goal here is to get a server that stays running and watches for changes and I can develop far, far faster without doing a build everytime. There might be even other approaches which are better than this.
Anyone ran into this and what would the solution be?
One of the frequent uses of nginx is setting it up as a proxy server, which means a server that receives requests, passes them to the proxied servers, retrieves responses from them, and sends them to the clients.
In your case, the proxy might be as following:
server {
location / {
proxy_pass http://localhost:3000;
}
}