Network Chimp
> Visit website  |  Install the app

Portzilla

How to port proxy a React app

Overview

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.

Additional Notes

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

<  Previous Tutorial  |  Next Tutorial  >
Step 1
Point a subdomain at your server

In your Cloudflare Dashboard, click the DNS tab and add a CNAME record pointing your desired subdomain at your server.

portzilla dns configuration
Step 2
Expose your service to outside traffic

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.

portzilla aws configuration
Step 3
Configure and install Portzilla

Once the service is open to the internet, we configured and installed Portzilla with the following options.

Route Configuration

Route Name
My React Route
Route URL
hello.networkchimp.com/react
Route Target
Proxies to a port on my domain
Target Port
2060
Target Resources
hello.networkchimp.com/static
Single Page App Mode
true
Use HTTP
true

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 Target Resources.

Step 4
Connect to your React app

Once installed, navigate to your React app's Route URL. Check it out in the browser below.

https://hello.networkchimp.fun/react/