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>