{"id":23763922,"url":"https://github.com/tomashubelbauer/cra-hosts","last_synced_at":"2025-06-10T16:32:24.745Z","repository":{"id":107986033,"uuid":"249003834","full_name":"TomasHubelbauer/cra-hosts","owner":"TomasHubelbauer","description":"Binding CRA to various host names and subdomains","archived":false,"fork":false,"pushed_at":"2022-04-28T08:45:20.000Z","size":181,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-01T16:42:40.798Z","etag":null,"topics":["cra","hosts","hsts","http","https"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TomasHubelbauer.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2020-03-21T15:25:12.000Z","updated_at":"2022-04-28T08:45:23.000Z","dependencies_parsed_at":null,"dependency_job_id":"1b66c9dc-1902-475e-8617-84533fb4e72c","html_url":"https://github.com/TomasHubelbauer/cra-hosts","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomasHubelbauer%2Fcra-hosts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomasHubelbauer%2Fcra-hosts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomasHubelbauer%2Fcra-hosts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomasHubelbauer%2Fcra-hosts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TomasHubelbauer","download_url":"https://codeload.github.com/TomasHubelbauer/cra-hosts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TomasHubelbauer%2Fcra-hosts/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259110133,"owners_count":22806649,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cra","hosts","hsts","http","https"],"created_at":"2024-12-31T22:13:52.844Z","updated_at":"2025-06-10T16:32:24.737Z","avatar_url":"https://github.com/TomasHubelbauer.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CRA `hosts`\r\n\r\nCreated two CRA apps using `npx create-react-app example# --template typescript`.\r\n\r\n## Example 1: Binding to `example1.com:80` (HTTP)\r\n\r\nThe app was configured to run on `example1.com:80` using this `.env`:\r\n\r\n```env\r\nHOST=example1.com\r\nPORT=80\r\n```\r\n\r\nAdditionally, `example1.com` points to `localhost` in `hosts`.\r\n\r\n```\r\n127.0.0.1 example1.com\r\n```\r\n\r\n```sh\r\ncd example1\r\nnpm start\r\n```\r\n\r\n## Example 2: Binding to `example2.com:443` (HTTPS)\r\n\r\nThe app was configured to run on `example1.com:80` using this `.env`:\r\n\r\n```env\r\nHOST=example2.com\r\nPORT=443\r\nHTTPS=true\r\n```\r\n\r\nA self-signed certificate will be generated by CRA to enable HTTPS.\r\n\r\nAdditionally, `example2.com` points to `localhost` in `hosts`.\r\n\r\n```\r\n127.0.0.1 example2.com\r\n```\r\n\r\n```sh\r\ncd example2\r\nnpm start\r\n```\r\n\r\n## Example 3: Binding to `local.sub.domain.example3.com:443` (HTTPS)\r\n\r\nThe app was configured to run on `local.sub.domain.example3.com` using this `.env`:\r\n\r\n```env\r\nHOST=local.sub.domain.example3.com\r\nPORT=443\r\nHTTPS=true\r\n```\r\n\r\nA self-signed certificate will be generated by CRA to enable HTTPS.\r\n\r\nAdditionally, `example3.com` points to `localhost` in `hosts`.\r\n\r\n```\r\n127.0.0.1 local.sub.domain.example3.com\r\n```\r\n\r\n```sh\r\ncd example3\r\nnpm start\r\n```\r\n\r\nIn this configuration, HTTPS is provided, `proxy` can be configured to another\r\nsubdomain/path of `example3.com` and you won't run into any issues with cookies\r\nor CORS caused by being on `localhost`, using HTTP, having mismatched origins\r\netc.\r\n\r\n## Putting it all together: Workers\r\n\r\nLet's imagine we have an API running on CloudFlare Workers. The worker is a\r\nsimple worker which responds with the HTTP method and URL of the request:\r\n\r\n```js\r\naddEventListener(\r\n  'fetch',\r\n  event =\u003e event.respondWith(new Response(event.request.method + ' ' + event.request.url))\r\n);\r\n```\r\n\r\nIt is deployed at https://test.tomashubelbauer.workers.dev/.\r\n\r\nNow let's hook up a CRA application: `npx create-react-app workers --template typescript`.\r\n\r\nRun the application unmodified except for this effect in the `App` function:\r\n\r\n```js\r\nuseEffect(() =\u003e {\r\n  void async function () {\r\n    const response = await fetch('https://test.tomashubelbauer.workers.dev');\r\n    const text = await response.text();\r\n    console.log(text);\r\n  }()\r\n}, []);\r\n```\r\n\r\nThis request will fail due to CORS. The `localhost` origin is different from the\r\none of the worker.\r\n\r\nNow let's point `local.test.tomashubelbauer.workers.dev` to `localhost` and bind\r\nto that instead:\r\n\r\n- Add `127.0.0.1 local.test.tomashubelbauer.workers.dev` to the `hosts` file\r\n- Create a `.env` in the CRA application root with the following contents:\r\n\r\n```env\r\nHOST=local.test.tomashubelbauer.workers.dev\r\n```\r\n\r\nYou'll notice since HSTS (or something) forces HTTPS on the host name, we will\r\nneed to switch to that, too. Maybe there is a way to make HTTP work here, but we\r\nwill need HTTPS later for `Secure` cookies, so let's not bother.\r\n\r\n- Add `PORT=443` and `HTTP=true` to `.env` and accept the self-signed certificate\r\n\r\nAlright, at this point, in Firefox, accessing `local.test.tomashubelbauer.workers.dev`\r\nwill yell, because the self-signed certificate is not accepted so HSTS will\r\nprevent the navigation to the site.\r\n\r\nIn Chrome, it is possible to work around this by typing `thisisunsafe` on the\r\nwarning page presented when accessing the site. This will disable HSTS.\r\n\r\nFor a proper solution, either the CRA's self-signed certificate would be issued\r\nfor the `local.test.tomashubelbauer.workers.dev` host name or somehow the user\r\nwould be allowed to accept the self-signed certificate in Firefox so that on\r\nsubsequent connections, the certificate is already valid and HSTS doesn't fail.\r\n\r\nhttps://stackoverflow.com/q/60790250/2715716\r\n\r\n## Hosts file path on Windows\r\n\r\n`C:\\Windows\\System32\\drivers\\etc\\hosts`\r\n\r\nNeed to run `notepad` as an Administrator.\r\n\r\n## To-Do\r\n\r\n### Resolve the HSTS issue\r\n\r\nhttps://stackoverflow.com/q/60790250/2715716\r\n\r\n### Add CORS `Access-Control-Allow-Origin` value for `local.` so that CORS works\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomashubelbauer%2Fcra-hosts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftomashubelbauer%2Fcra-hosts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftomashubelbauer%2Fcra-hosts/lists"}