How to prevent minified scripts in React production?

We have an API that we host via nginx on localhost:3128. That API serves all of our JS/HTML as well as our various service endpoints.

If I run yarn start that will run on port 3000, which means that our fetch requests also go to port 3000, and that won’t work since the endpoints are all on 3128.

My plan was to instead run a build, and then upload to our serving API behind nginx for testing. The problem is that yarn build transforms our human readable typescript into minified, compiled javascript. This makes my stack traces and debugging harder.

How can I solve this problem?

Answer

General solution to this would be to create some proxy that would redirect your requests from :3000 to :3128. If you use CRA, you can declare proxy in package.json or setupProxy.js.

If you don’t use CRA, but use webpack, it is made in similar fashion with webpack-dev-server.

Leave a Reply

Your email address will not be published. Required fields are marked *