Created two CRA apps using npx create-react-app example# --template typescript
.
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
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
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.
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 thehosts
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
andHTTP=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
C:\Windows\System32\drivers\etc\hosts
Need to run notepad
as an Administrator.