How to port proxy a React app
We are using create-react-app with react-router.
The app is served from an Amazon EC2 instance with a Security Group that opens port 2060 to the internet.
Use HTTP is necessary because our domain is SSL enabled but our react server is not.
We enable Single Page Mode for React and other front-end frameworks that handle routing in the browser.
When mounting your React app on a subpath, ensure to set the Base URL in your app accordingly. For more information, visit https://stackoverflow.com/a/52363490/1534040
In your Cloudflare Dashboard, click the DNS tab and add a CNAME record pointing your desired subdomain at your server.
Ensure your service can communicate with the internet. Our service is
running on an EC2 instance, so we add our
Target Port to
the Port Range field in our EC2 Security Policy.
Once the service is open to the internet, we configured and installed Portzilla with the following options.
By opening the Developer Tools > Network tab in your browser, you'll
notice that create-react-app serves its static assets from the /static
folder. We set
Target Resources to proxy these files. If
you receive 404's on file requests, add those file paths to
Once installed, navigate to your React app's
Check it out in the browser below.