Using local HTTPS development

import { Terminal } from '/ui/components/Snippet'; import { Step } from '/ui/components/Step';

When developing Expo web apps locally, you may need to use HTTPS with your local development environment for testing secure browser APIs. This guide shows you how to set up local HTTPS for Expo web apps.

Prerequisites

This guide requires the following tool installed on your machine:

• mkcert: A tool for creating development certificates. For installation instructions, see the mkcert GitHub repository.

Benefits

• Team scalability: Same setup works for everyone
• Authentication support: HTTP-Only Cookies and secure contexts
• Production parity: Match your production HTTPS environment
• Easy sharing: Consistent development URLs across the team

Set up your project

<Step label="1">

Create or navigate to your Expo project:

<Terminal cmd={[ '# Create a new project (if needed)', '$ npx create-expo-app@latest example-app --template default@sdk-55', '$ cd example-app', '', '# Or navigate to existing project', '$ cd your-expo-project', ]} />

</Step> <Step label="2">

Start your Expo development server:

<Terminal cmd={['$ npx expo start --web']} />

Your app will be running on http://localhost:8081. Keep this terminal window open.

</Step> <Step label="3">

Use mkcert to generate a certificate for localhost. Run the following command in a new terminal window from your project's root directory:

<Terminal cmd={['$ mkcert localhost']} />

info Tip: Ensure that after installing mkcert, you run mkcert -install to install the local certificate authority (CA).

This will generate two signed certificate files: localhost.pem (certificate) and localhost-key.pem (private key), inside your project's root directory.

</Step> <Step label="4">

Inside your project's root directory, run the following command to start the proxy:

<Terminal cmd={[ '$ npx local-ssl-proxy --source 443 --target 8081 --cert localhost.pem --key localhost-key.pem', ]} />

info Tip: local-ssl-proxy is a tool that creates a proxy server that forwards HTTPS traffic from port 443 to your Expo dev server on port 8081.

This creates a proxy that forwards HTTPS traffic from port 443 to your Expo dev server on port 8081.

</Step> <Step label="5">

Open https://localhost in your browser to access your app. Your Expo app is now running with HTTPS.

</Step>