https://github.com/tomashubelbauer/cra-hosts
Binding CRA to various host names and subdomains
https://github.com/tomashubelbauer/cra-hosts
cra hosts hsts http https
Last synced: 4 months ago
JSON representation
Binding CRA to various host names and subdomains
- Host: GitHub
- URL: https://github.com/tomashubelbauer/cra-hosts
- Owner: TomasHubelbauer
- License: mit
- Created: 2020-03-21T15:25:12.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2022-04-28T08:45:20.000Z (over 3 years ago)
- Last Synced: 2025-06-01T16:42:40.798Z (4 months ago)
- Topics: cra, hosts, hsts, http, https
- Language: TypeScript
- Homepage:
- Size: 177 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# 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`:
```env
HOST=example1.com
PORT=80
```
Additionally, `example1.com` points to `localhost` in `hosts`.
```
127.0.0.1 example1.com
```
```sh
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`:
```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
```
```sh
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`:
```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
```
```sh
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:
```js
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:
```js
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:
```env
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