When developing apps with [`shopify app dev`](/docs/api/shopify-cli/app/app-dev), you have multiple options for connecting your local development server to Shopify: - [Cloudflare Quick Tunnels](#cloudflare-quick-tunnels) (default) - [Localhost-based development](#localhost-based-development) - [Bring your own tunnel](#bring-your-own-tunnel) (such as ngrok) Choose the option that best fits your development needs and environment. ## Cloudflare Quick Tunnels By default, Shopify uses [Cloudflare Quick Tunnels](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/do-more-with-tunnels/trycloudflare/) to open a publicly accessible tunnel to your app. Tunneling provides a secure (HTTPS) URL to your local environment. > Tip: > If you're experiencing connectivity errors with Cloudflare Quick Tunnels, refer to [Cloudflare guidance](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/configure-tunnels/tunnel-with-firewall/) on firewall requirements, or try one of the alternatives in this guide. ## Localhost-based development <aside class="note beta"> <h4>Developer preview</h4> <p>Localhost-based development is in developer preview and is available on all development stores. Report any issues and provide feedback on this feature on the <a href="https://community.shopify.dev/new-topic?category=shopify-cli-libraries&tags=app-dev-on-localhost">Shopify Developer Community</a>.</p> </aside> When using Shopify CLI 3.77 or higher, you can serve your app using `localhost` (`127.0.0.1`) with a self-signed HTTPS certificate, which Shopify CLI generates for you. To serve your app using `localhost`, run the following command: <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="bash"> RAW_MD_CONTENTshopify app dev --use-localhost END_RAW_MD_CONTENT</script> </div> </p> > Note: > Localhost-based development isn't compatible with the Shopify features that directly invoke your app, such as [Webhooks](/docs/apps/build/webhooks), [App proxy](/docs/apps/build/online-store/display-dynamic-data), and [Flow actions](/docs/apps/build/flow/actions), and features that require you to test your app from another device, such as [POS](/docs/apps/build/pos). ## Bring your own tunnel The [`--tunnel-url` argument](/docs/api/shopify-cli/app/app-dev#flags-propertydetail-tunnelurlvalue) allows you to specify the URL of an alternate network tunnel to your app. You can use this argument with [ngrok](https://ngrok.com/) with the following steps: 1. Set up an [ngrok](https://ngrok.com/) account. 1. Install the [ngrok CLI](https://ngrok.com/download). 1. Follow the steps in the ngrok documentation to [set up your access token](https://ngrok.com/docs/agent/#authtokens). 1. In a terminal, start ngrok using the following command. You can alternatively choose another port number. <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="sh"> RAW_MD_CONTENTngrok http 3000 END_RAW_MD_CONTENT</script> </div> </p> 1. Note the URL ending in `ngrok-free.app` that's returned - you'll need this URL in the following command - and leave ngrok running. 1. Run `app dev` using the `--tunnel-url` argument. If you've chosen another port number, then use that instead. <p> <div class="react-code-block" data-preset="terminal"> <div class="react-code-block-preload ThemeMode-dim"> <div class="react-code-block-preload-bar "></div> <div class="react-code-block-preload-placeholder-container"> <div class="react-code-block-preload-code-container"> <div class="react-code-block-preload-codeline-number"></div> <div class="react-code-block-preload-codeline"></div> </div> </div> </div> <script type="text/plain" data-language="sh"> RAW_MD_CONTENTshopify app dev --tunnel-url=https://<ngrok-URL>:3000 END_RAW_MD_CONTENT</script> </div> </p>