How to solve timeout when developing extensions

The Internet, 2024/03/15

Introduction

You don’t need an external tunnel to test your Shopify Extension. Using a cloudflare or ngrok tunnel can be slow and sometimes it can cause timeouts. You can use Caddy to create a local tunnel with a custom domain and use it as your development server.

Time to set it up? 1 minute, plus the time you lost reading this intro.

Installation

Download Caddy from the official website
Install mkcert: brew install mkcert (or check here for other ways)

Create certificates

Create a folder, let’s call it extension_server.

mkdir extension_server
cd extension_server

Create the certificates with mkcert

mkcert shopify.localhost

Caddy

Create a config file for Caddy with this content and call it Caddyfile

shopify.localhost

reverse_proxy /* 127.0.0.1:8989
tls ./shopify.localhost.pem ./shopify.localhost-key.pem

Run Caddy in the same folder

caddy run

Run dev

Now you can use https://shopify.localhost as your development server. Run your dev like this

pnpm dev --tunnel-url https://shopify.localhost:8989