CRA hosts

Created two CRA apps using npx create-react-app example# --template typescript.

Example 1: Binding to example1.com:80 (HTTP)

The app was configured to run on example1.com:80 using this .env:

HOST=example1.com
PORT=80

Additionally, example1.com points to localhost in hosts.

127.0.0.1 example1.com

cd example1
npm start

Example 2: Binding to example2.com:443 (HTTPS)

The app was configured to run on example1.com:80 using this .env:

HOST=example2.com
PORT=443
HTTPS=true

A self-signed certificate will be generated by CRA to enable HTTPS.

Additionally, example2.com points to localhost in hosts.

127.0.0.1 example2.com

cd example2
npm start

Example 3: Binding to local.sub.domain.example3.com:443 (HTTPS)

The app was configured to run on local.sub.domain.example3.com using this .env:

HOST=local.sub.domain.example3.com
PORT=443
HTTPS=true

A self-signed certificate will be generated by CRA to enable HTTPS.

Additionally, example3.com points to localhost in hosts.

127.0.0.1 local.sub.domain.example3.com

cd example3
npm start

In this configuration, HTTPS is provided, proxy can be configured to another subdomain/path of example3.com and you won't run into any issues with cookies or CORS caused by being on localhost, using HTTP, having mismatched origins etc.

Putting it all together: Workers

Let's imagine we have an API running on CloudFlare Workers. The worker is a simple worker which responds with the HTTP method and URL of the request:

addEventListener(
  'fetch',
  event => event.respondWith(new Response(event.request.method + ' ' + event.request.url))
);

It is deployed at https://test.tomashubelbauer.workers.dev/.

Now let's hook up a CRA application: npx create-react-app workers --template typescript.

Run the application unmodified except for this effect in the App function:

useEffect(() => {
  void async function () {
    const response = await fetch('https://test.tomashubelbauer.workers.dev');
    const text = await response.text();
    console.log(text);
  }()
}, []);

This request will fail due to CORS. The localhost origin is different from the one of the worker.

Now let's point local.test.tomashubelbauer.workers.dev to localhost and bind to that instead:

• Add 127.0.0.1 local.test.tomashubelbauer.workers.dev to the hosts file
• Create a .env in the CRA application root with the following contents:

HOST=local.test.tomashubelbauer.workers.dev

You'll notice since HSTS (or something) forces HTTPS on the host name, we will need to switch to that, too. Maybe there is a way to make HTTP work here, but we will need HTTPS later for Secure cookies, so let's not bother.

• Add PORT=443 and HTTP=true to .env and accept the self-signed certificate

Alright, at this point, in Firefox, accessing local.test.tomashubelbauer.workers.dev will yell, because the self-signed certificate is not accepted so HSTS will prevent the navigation to the site.

In Chrome, it is possible to work around this by typing thisisunsafe on the warning page presented when accessing the site. This will disable HSTS.

For a proper solution, either the CRA's self-signed certificate would be issued for the local.test.tomashubelbauer.workers.dev host name or somehow the user would be allowed to accept the self-signed certificate in Firefox so that on subsequent connections, the certificate is already valid and HSTS doesn't fail.

https://stackoverflow.com/q/60790250/2715716

Hosts file path on Windows

C:\Windows\System32\drivers\etc\hosts

Need to run notepad as an Administrator.

To-Do

Resolve the HSTS issue

https://stackoverflow.com/q/60790250/2715716

Add CORS Access-Control-Allow-Origin value for local. so that CORS works