- Ruby on Rails w/ shopify_app gem
- Polaris Components for the app’s admin design, but I use the pure CSS/HTML method instead of the intended use as a React component bc I’m a neanderthal
- Ngrok to give my localhost server a secure public URL
- Heroku for hosting the app
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
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)