Example using Cypress to test Create-React-App site running with custom certificate for domain "my-secure-site"

Last update: Dec 21, 2021

cypress-local-https

Example using Cypress to test Create-React-App site running with custom certificate for domain "my-secure-site"

Read the blog post Cypress Hosts Option

Making certificate

Before 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"

$ brew install mkcert
$ mkcert -install
$ mkdir .cert
$ mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "my-secure-site"

You should now have two text files in the folder .cert: cert.pem and key.pem

Start the local site

Let's use the `react-scripts to start the site with the .env.development settings (HTTPS, local certificate)

$ npm start

If you open the browser at https://localhost:3000 you will see an error.

HTTPS localhost error

The 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.

Mismatch domain certificate name warning

Hosts file

We 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. On Mac I could edit the /etc/hosts file to add my own record

127.0.0.1 my-secure-site

Then in the browser I can go to https://my-secure-site and see my local React application without any browser errors.

Cypress

I can avoid messing with the hosts file on the computer and instead specify the local DNS names directly on the cypress.json file. For example, to work with the local HTTPS site:

{
  "baseUrl": "https://my-secure-site:3000",
  "hosts": {
    "my-secure-site": "127.0.0.1"
  }
}

Note that the "hosts" record only specifies the domain -> 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.

Cypress visits the custom local domain

Small print

Author: Gleb Bahmutov <[email protected]> © 2021

GitHub

https://github.com/bahmutov/cypress-local-https
You might also like...

Takehome test for netflix

Hello there! The goal of this exercise is to extend this "Github Repo Search" application. The application currently lists the projects of the Netflix

Feb 23, 2022

This project was developed as a technical test for a Frontend JR Landing Page with dynamic data via .json

This project was developed as a technical test for a Frontend JR Landing Page with dynamic data via .json

Healthy Foods 🍉 📚 Informações sobre o projeto Esse projeto foi desenvolvido como teste técnico para uma vaga Frontend JR Landing Page com dados dinâ

Jan 20, 2022

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

TryShape is an open-source platform to create shapes of your choice using a simple, easy-to-use interface. You can create banners, circles, polygonal shapes, export them as SVG, PNG, and even as CSS.

May 14, 2022

React-node-notion - An example of a React app and Node server using Notion as a CMS

React-node-notion - An example of a React app and Node server using Notion as a CMS

Running the Project Create an env file with your Notion credentials Create a ser

Apr 26, 2022

An example of a Quotes App using Ionic and React

An example of a Quotes App using Ionic and React

An example of a Quotes App using Ionic and React

Oct 28, 2021

An example configuration of a fullstack Node app with PostgreSQL using Docker Compose

An example configuration of a fullstack Node app with PostgreSQL using Docker Compose

Usage To use this project make sure you have Docker installed then run the follo

May 15, 2022

flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example

flipkart-clone using react js express js mongo db razorpay complete e-commerce website using MERN stack client server MVC architecture redux redux-thunk ecomerce project live example

Flipkar Clone MERN stack Sijeesh Miziha's Flipkart Clone is done with top-notch features for the entrepreneur startups like Flipkart it has RazorPay I

May 5, 2022

Create-serverless-api - Create Serverless APIs with no infra configuration

Create-serverless-api - Create Serverless APIs with no infra configuration

Create Serverless API Create Serverless APIs with no infra configuration. It is

Feb 23, 2022

Snow - social network can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk

Snow - social network can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk

Snow is a social network. Here you can create and share content! You can upload posts, upload images, create polls, interact with friends, create and join groups, and even includes its own chat to talk

Apr 29, 2022
React-counter - Access the internal state of React components from Cypress E2E tests
React-counter - Access the internal state of React components from Cypress E2E tests

react-counter Access the internal state of React components from Cypress E2E tes

Feb 2, 2022
A simplified Jira clone built with React/Babel (Client), and Node/TypeScript (API). Auto formatted with Prettier, tested with Cypress.
A simplified Jira clone built with React/Babel (Client), and Node/TypeScript (API). Auto formatted with Prettier, tested with Cypress.

A simplified Jira clone built with React and Node Auto formatted with Prettier, tested with Cypress ?? Visit the live app | View client | View API Wha

May 15, 2022
👻 A SnapChat clone built with React, Redux and Typescript. Styled with SASS. Tested with Cypress, Jest and Enzyme. Linted with Eslint and formatted with Prettier!
👻 A SnapChat clone built with React, Redux and Typescript. Styled with SASS. Tested with Cypress, Jest and Enzyme. Linted with Eslint and formatted with Prettier!

?? SnapChat Clone [LIVE APP] [Live App] • [Video Demo] ⚡️ Breakdown Built with React Only functional components using hooks Folder structure: Flat - n

May 8, 2022
Plugin for cypress to control toxiproxy

Example of using Toxi Proxy and Cypress Running npm run all starts everthing but toxicproxy npm run api will run a simple mock webserver that on the u

Feb 9, 2022
React-realtime-example - Example Demonstrating React with Realtime API Backend

Getting Started with React Realtime Example App This project contains two folder

Jan 6, 2022
Just made this repo to test firebase with my react app.

Firebase Setup Deployment Status Just created this repo because I tend to forget the steps to add firebase to my projects. Steps Go to Firebase home p

Jan 11, 2022
React Test Shop Using Remix
React Test Shop Using Remix

React Test Shop Using Remix Development Build React Test Shop makes API calls to an external server. First set up this server by cloning the React Tes

Dec 9, 2021
Typing test website build with React
Typing test website build with React

Typing test website build with React

May 9, 2022
Memory-test-game - Memory Testing Game Built With React

Memmory Testing Game This game is currently live and hosted on verce , play it h

Feb 22, 2022
Log, test, intercept and modify Apollo Client's operations
Log, test, intercept and modify Apollo Client's operations

Test, mock, intercept and modify Apollo Client's operations — in both browser and unit tests! Features mock responses in either unit tests or browser

Apr 28, 2022