Portzilla React Demo

Overview

We are using create-react-app with react-router.

The app is served from an Amazon EC2 instance with a Security Group that exposes port 2060.

Additional Notes

Notice that Target Resources is set to the root folder that create-react-app serves its static assets from. Use HTTP is necessary because our domain is SSL enabled but our react server is not.

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 instace, so we open the service's port in our EC2 Security Policy.

portzilla aws configuration
Step 3
Configure and install Portzilla

Once your service is reachable, configure and install Portzilla with the following options.

Route Configuration

Route Name
My React Route
Route URL
ec2.networkchimp.com/react
Target Port
2060
Target Resources
ec2.networkchimp.com/static
Single Page App Mode
true
Use HTTP
true
Step 4
Connect to your React app

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