How to port proxy a React app


In this tutorial, we use Portzilla to set up a Port Proxy to a React app running on AWS.

In a few minutes, you will understand how to move traffic from any part of your domain, including subdomains, to user interfaces running on your domain.

[somewhere.yoursite.com/react ⟶ yoursite.com:2060]

Check out the short video and tutorial to get started.

Additional Notes

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

Step 1
Point a subdomain at your server (OPTIONAL)

In this tutorial, we move traffic from our hello subdomain to a service on another port. You can skip this step if your DNS records are already set for your subdomain.

In your Cloudflare Dashboard, click the DNS tab. Then, create an A or CNAME record with name: www or name: blog, for example. name should point to your desired subdomain.

For an A record, set value: [server ip].

For a CNAME record, set value: [server url].

Below, we create a CNAME record with name: hello and value: [server url]. This moves traffic from hello.networkchimp.fun ⟶ [server url].

Important: DNS records can take up to an hour to take effect. Ensure your DNS record is in effect before continuing.

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
Route Target
Proxies to a port on my domain
Target Port
Single Page App Mode

To avoid 525 SSL Handshake Faild errors, Use HTTP is set because our domain is HTTPS but our proxied server is not.

Single Page Mode should be enabled for React and other front-end frameworks that handle routing in the browser.

When you reload the page, you'll see one or more assets returning a 404 status code. This is because we haven't set up the necessary Target Resources.

Requests In DevTools before setting Target Resources

Setting up your Target Resources is an integral part of correctly loading your static assets. Notice that the app initiates several requests for resources in the /static directory and for /favicon.ico. These resources need to be whitelisted in Target Resources to load them correctly. We add the following to our configuration below:

Route Configuration

Target Resources
hello.networkchimp.com/static hello.networkchimp.com/favicon.ico

The above configuration tells Portzilla to proxy requests for /favicon.ico and any files in subpaths of /static to our React app.

Once saved, reload the page and the resources will load correctly.

Requests In DevTools before setting Target Resources

For additional information on Target Resources, please refer to the docs.

Step 4
Connect to your React app

Once installed, wait a few seconds, and then navigate your browser to the Route URL in your Portzilla configuration above.

We'll navigate to hello.networkchimp.com/react to connect to our service.