Watch mode for Shopify theme app extensions

One of the missing features for Shopify CLI is watch mode for theme app extensions. Without it, you have to constantly switch between editor and terminal to manually run shopify extension push command. It’s pretty annoying and time-consuming considering that this command takes a while to run. Wouldn’t it be better to run this command automatically on code changes?

Luckily we can pretty easily do in it Rails. We can watch for code changes in theme-app-extension folder using listen gem. And on change run shopify extension push command. This is how rake task will look like:

# lib/tasks/extension.rake

namespace :extension do
  desc "Auto-push theme app extension on changes"
  task watch: :environment do
    extension_path = Rails.root.join("theme-app-extension")
    listener = Listen.to(extension_path) do
      system("cd theme-app-extension; bundle exec shopify extension push")
    end
    listener.start
    system("cd theme-app-extension; bundle exec shopify extension push")
    sleep
  end
end

To run it use:

bin/rake extension:watch

To stop it hit Ctrl + C.

If you use multiple environments for theme app extensions from my previous article you’ll need to change rake task to insert and remove env variables:

# lib/tasks/extension.rake

namespace :extension do
  # ...

  desc "Auto-push theme app extension on changes"
  task watch: :environment do
    extension_path = Rails.root.join("theme-app-extension")
    create_dot_env
    listener = Listen.to(extension_path) do
      system("cd theme-app-extension; bundle exec shopify extension push")
    end
    listener.start
    system("cd theme-app-extension; bundle exec shopify extension push")
    sleep
  rescue Interrupt
    delete_dot_env
  end
end

This simple rake task made the process of developing theme app extension much better for me. I hope some day it will be included into Shopify CLI and so we could run it via shopify extension serve instead 🙏

If you like reading about Shopify app development follow me on Twitter.