{"id":13711456,"url":"https://github.com/bahmutov/cypress-local-https","last_synced_at":"2025-09-28T22:30:35.584Z","repository":{"id":66012316,"uuid":"440207139","full_name":"bahmutov/cypress-local-https","owner":"bahmutov","description":"Example using Cypress to test Create-React-App site running with custom certificate for domain \"my-secure-site\"","archived":false,"fork":false,"pushed_at":"2021-12-20T17:22:02.000Z","size":634,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-27T21:03:30.586Z","etag":null,"topics":["cypress-example"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bahmutov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2021-12-20T14:53:43.000Z","updated_at":"2021-12-21T17:56:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"556d440b-b365-4e93-992e-c607ff84fe15","html_url":"https://github.com/bahmutov/cypress-local-https","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/bahmutov%2Fcypress-local-https","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcypress-local-https/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcypress-local-https/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcypress-local-https/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bahmutov","download_url":"https://codeload.github.com/bahmutov/cypress-local-https/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234565277,"owners_count":18853277,"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":["cypress-example"],"created_at":"2024-08-02T23:01:08.352Z","updated_at":"2025-09-28T22:30:35.240Z","avatar_url":"https://github.com/bahmutov.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# cypress-local-https\n\n\u003e Example using Cypress to test Create-React-App site running with custom certificate for domain \"my-secure-site\"\n\nRead the blog post [Cypress Hosts Option](https://glebbahmutov.com/blog/cypress-hosts-option/)\n\n## Making certificate\n\nBefore testing the site, we need to make local self-signed certificate in the folder \".cert\". On Mac I used the following commands to create a self-signed certificate for domain \"my-secure-site\"\n\n```\n$ brew install mkcert\n$ mkcert -install\n$ mkdir .cert\n$ mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem \"my-secure-site\"\n```\n\nYou should now have two text files in the folder `.cert`: `cert.pem` and `key.pem`\n\n## Start the local site\n\nLet's use the `react-scripts to start the site with the [.env.development](./.env.development) settings (HTTPS, local certificate)\n\n```\n$ npm start\n```\n\nIf you open the browser at `https://localhost:3000` you will see an error.\n\n![HTTPS localhost error](./images/error.png)\n\nThe certificate we just made is for domain \"my-secure-site\", not for \"localhost\". If we click \"Proceed\" then the browser shows the SSL error while accessing the site.\n\n![Mismatch domain certificate name warning](./images/proceed.png)\n\n## Hosts file\n\nWe created the SSL certificate for domain \"my-secure-site\", yet are trying to access \"localhost\". We cannot just go to \"https://my-secure-site\" because the browser does not know that domain \"my-secure-site\" should map back to our local computer address 127.0.0.1. The DNS system has no record for \"my-secure-site\". Instead we need to set in our local networking settings a DNS \"helper\", telling the local computer that \"my-secure-site\" name is at 127.0.0.1 IP address. We can do it via [hosts file](https://en.wikipedia.org/wiki/Hosts_%28file%29). On Mac I could edit the `/etc/hosts` file to add my own record\n\n```\n127.0.0.1 my-secure-site\n```\n\nThen in the browser I can go to `https://my-secure-site` and see my local React application without any browser errors.\n\n## Cypress\n\nI can avoid messing with the `hosts` file on the computer and instead specify the local DNS names directly on the [cypress.json](./cypress.json) file. For example, to work with the local HTTPS site:\n\n```json\n{\n  \"baseUrl\": \"https://my-secure-site:3000\",\n  \"hosts\": {\n    \"my-secure-site\": \"127.0.0.1\"\n  }\n}\n```\n\nNote that the \"hosts\" record only specifies the domain -\u003e IP mapping, the port number is unchanged. With the above `cypress.json` I can visit the base URL in Cypress _without_ any changes to `/etc/hosts` file on the machine.\n\n![Cypress visits the custom local domain](./images/visit.png)\n\n## Small print\n\nAuthor: Gleb Bahmutov \u0026lt;gleb.bahmutov@gmail.com\u0026gt; \u0026copy; 2021\n\n- [@bahmutov](https://twitter.com/bahmutov)\n- [glebbahmutov.com](https://glebbahmutov.com)\n- [blog](https://glebbahmutov.com/blog)\n- [videos](https://www.youtube.com/glebbahmutov)\n- [presentations](https://slides.com/bahmutov)\n- [cypress.tips](https://cypress.tips)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Fcypress-local-https","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbahmutov%2Fcypress-local-https","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Fcypress-local-https/lists"}