DEV Community

Mohamed Jbeli
Mohamed Jbeli

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

Then we generate our self-signed certificate like this

mkcert local.dev localhost 127.0.0.1 ::1
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Dev app served through https

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>
Enter fullscreen mode Exit fullscreen mode

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
Partner Dashboard

App URLs

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

HOST=https://local.dev
Enter fullscreen mode Exit fullscreen mode

Now you can access your start your app using this url

https://local.dev/?shop=shopname.myshopify.com
Enter fullscreen mode Exit fullscreen mode

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
Shopify Embed

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

Top comments (1)

Collapse
 
rohanrajpal profile image
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.