How I build Shopify Apps

The Tools

I use:

The Setup

When you start building apps for Shopify, one thing that isn’t clear is how you should config the apps in the Shopify admin.

I reached out to Ryan Kulp awhile back with this question, and he was kind enough to set me on the right path:

1. Create two Shopify apps in the admin, one for production/app store that points to heroku and one for development that points to ngrok/localhost.

2. Then, in your RoR app within /config/initalizers/shopify_app.rb you want to use your development app keys for development and your production app keys for production (duh).

# config/initalizers/shopify_app.rb
ShopifyApp.configure do |config|
  config.application_name = "App Name"
  if(Rails.env.production?)
   config.api_key = "ProductionKeyHere"
   config.secret = "ProductionSecretHere"
  else 
    config.api_key = "DevelopmentKeyHere"
    config.secret = "DevelopmentSecretHere"
  end 

(You should accomplish this with env variables if you will be putting app code in repository.)

Then it’s as simple as developing in localhost w your development app, and when you’re ready to push those changes in production, run your git push heroku master terminal command

Bonus:

I also created an Alfred workflow that lets me start development on any of my apps instantly by automatically:

  • Opens 3 terminal windows:
    • First window starts NGROK server for that app’s reserved subdomain,
    • Second window runs ‘rails s’ with a unique port for that app
    • Third window opens in the app directory for me to run rails commands
  • Opens app project in Sublime Text
  • Opens web browser with my development Shopify store

(I got really sick of doing this manually)