Portzilla
How to port proxy a React app
Overview
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
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.
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.
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.
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:
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.
For additional information on
Target Resources, please refer to
the docs.
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.
