A much better DX for Shopify apps

When creating a shopify app, you often have to use ngrok because the shopify embed requires https. But using ngrok when you just got used to the speed of vitejs will feel very slow. and will give you a bad developer experience.

Fortunately, there is a better way.

The solution is to enable https on localhost by ourselves using mkcert.

This method will use docker but it's not completely necessary as you can still install nginx or apache directly on your OS and the method would still work.

mkcert: generate the ssl certificates

To start, we install mkcert, then we install a CA (Certificate authority) using

mkcert -install

Then we generate our self-signed certificate like this

mkcert local.dev localhost 127.0.0.1 ::1

You can replace local.dev with any domain of your choice

Editing the hosts file

Finally, add this line to your hosts file

127.0.0.1 local.dev

Using the certificates

The next step depends on what you use to develop your app, but the tool you use certainly supports configuring a certificate that will be used when serving the app in dev mode, here are some examples
WebPack Dev Server
ViteJs
Apache
Nginx

Creating a reverse proxy (it's easier than it sounds)

Since you are probably serving your app over a specific port that is different than port 80, then shopify embed won't accept that, i.e. something like this https://local.dev:8081 won't be accepted.

There is probably a simpler solution but the method that worked for me was to create a reverse proxy using apache or nginx.

Here's a working solution that uses docker and nginx
https://github.com/unlocomqx/nginx-docker-ssl-proxy

Now, I can access SvelteKit using https://local.dev

If you use apache, here's a config that you can add to your virtual hosts file

<VirtualHost *:80>
    ProxyPreserveHost On

    ProxyPass / "http://host.docker.internal:8081/" retry=0
    ProxyPassReverse / "http://host.docker.internal:8081/" retry=0

    ServerName local.dev
</VirtualHost>

<VirtualHost *:443>
    ProxyPreserveHost On

    SSLEngine on

    SSLCertificateFile      /etc/ssl/certs/cert.pem
    SSLCertificateKeyFile   /etc/ssl/certs/key.pem

    ProxyPass / "http://host.docker.internal:8081/" retry=0
    ProxyPassReverse / "http://host.docker.internal:8081/" retry=0

    ServerName local.dev
</VirtualHost>

Feel free to share other tools configs in the comments

Reconfiguring our Shopify app

To tell shopify to load the app through local.dev, we need to change our app url in the partner dashboard

Also don't forget to edit your .env file by setting the host var

HOST=https://local.dev

Now you can access your start your app using this url

https://local.dev/?shop=shopname.myshopify.com

Or you can install it to your test shop from the partner dashboard

If you would like to use SvelteKit to develop your Shopify app, check this template
https://github.com/unlocomqx/shopify-app-sveltekit

Here's how the end result looks

Comparison with ngrok

I compared the SvelteKit demo app load and found a big difference

ngrok load time: 21s (but maybe I have a slow internet 12Down/1Up)
ngrok vite hmr: 450ms

localhost load time: under 1s (as you might expect)
localhost vite hmr: 30ms

Finally

I hope this give you a better developer experience and make developing shopify apps a lot more enjoyable

Comments

[Rohan Rajpal]

THANKS A TON for sharing this!

I've been going through the pain of ngrok and looks like this will solve a ton of problems.