A much better DX for Shopify apps

Mohamed Jbeli — Sun, 06 Jun 2021 17:54:35 +0000

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

Faster dev server with(out) xDebug

Mohamed Jbeli — Tue, 17 Nov 2020 09:33:28 +0000

It has been said before, to make xDebug faster, just disable it.
But one still needs xDebug for how helpful it is!
Well, there is a good solution which is to only enable xDebug when we intend to debug the request.

The idea is to create two php containers (php and php_xdebug) and enable xDebug on only one of these two containers.
Then we can instruct apache to use the php_xdebug container only when a certain cookie is set.

php container

php_xdebug container

apache config

<If "%{HTTP_COOKIE} =~ /XDEBUG_SESSION=PHPSTORM/">
  SetHandler "proxy:fcgi://php_xdebug:9000"
</If>
<Else>
  SetHandler "proxy:fcgi://php:9000"
</Else>

So in this case, we only use php_xdebug when the XDEBUG_SESSION cookie is set to PHPSTORM.
The PHPSTORM value itself can be changed in the env file and in the xDebug helper browser extension.

The rest is very simple, we just need to configure xDebug to always start remote debugging when it's invoked.
The profiler and log output will be sent to a /tmp folder inside the server root.

zend_extension=xdebug.so
[xdebug]
xdebug.remote_autostart = 1
xdebug.remote_enable=1
xdebug.remote_handler=dbgp
xdebug.remote_connect_back=1
xdebug.profiler_enable_trigger = 1
xdebug.profiler_output_dir = /var/www/html/tmp
xdebug.idekey=${XDEBUG_COOKIE_VALUE}
xdebug.remote_log=/var/www/html/tmp/xdebug.log

You can find the docker-compose file in this github repo
https://github.com/unlocomqx/conditional-xdebug-fpm-docker

After cloning the repo, you can rename the file sample.env to .env and change DOCUMENT_ROOT, MYSQL_DATA_DIR and XDEBUG_COOKIE_VALUE if necessary.

This solution was totally inspired by this blog post https://jtreminio.com/blog/developing-at-full-speed-with-xdebug/

DEV Community: Mohamed Jbeli