{"id":149,"date":"2020-01-31T23:53:09","date_gmt":"2020-01-31T23:53:09","guid":{"rendered":"https:\/\/emersoncode.com\/blog\/?p=149"},"modified":"2022-09-29T18:53:23","modified_gmt":"2022-09-29T18:53:23","slug":"how-i-build-shopify-apps","status":"publish","type":"post","link":"https:\/\/emersoncode.com\/blog\/how-i-build-shopify-apps\/","title":{"rendered":"How I build Shopify Apps"},"content":{"rendered":"\n<p><strong>The Tools<\/strong><\/p>\n\n\n\n<p>I use:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/guides.rubyonrails.org\/getting_started.html\">Ruby on Rails<\/a>&nbsp;w\/&nbsp;<a href=\"https:\/\/github.com\/Shopify\/shopify_app\">shopify_app<\/a>&nbsp;gem<\/li><li><a href=\"https:\/\/polaris.shopify.com\/components\/get-started\">Polaris Components<\/a>&nbsp;for the app\u2019s admin design, but I use the&nbsp;<a href=\"https:\/\/github.com\/Shopify\/polaris-react\/tree\/master\/examples\/cdn-styles\">pure CSS\/HTML method<\/a>&nbsp;instead of the intended use as a React component bc I\u2019m a neanderthal<\/li><li><a href=\"https:\/\/ngrok.com\/\">Ngrok<\/a>&nbsp;to give my localhost server a secure public URL<\/li><li><a href=\"https:\/\/heroku.com\/\">Heroku<\/a>&nbsp;for hosting the app<\/li><\/ul>\n\n\n\n<p><strong>The Setup<\/strong><\/p>\n\n\n\n<p>When you start building apps for Shopify, one thing that isn\u2019t clear is how you should config the apps in the Shopify admin.<\/p>\n\n\n\n<p>I reached out to&nbsp;<a href=\"https:\/\/www.ryanckulp.com\/\">Ryan Kulp<\/a>&nbsp;awhile back with this question, and he was kind enough to set me on the right path:<\/p>\n\n\n\n<p><strong>1. <\/strong>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.<\/p>\n\n\n\n<figure class=\"wp-block-image is-style-default\"><img decoding=\"async\" loading=\"lazy\" width=\"396\" height=\"181\" src=\"https:\/\/emersoncode.com\/blog\/wp-content\/uploads\/2020\/01\/Screen-Shot-2020-01-22-at-5.46.30-PM.png\" alt=\"\" class=\"wp-image-129\" srcset=\"https:\/\/emersoncode.com\/blog\/wp-content\/uploads\/2020\/01\/Screen-Shot-2020-01-22-at-5.46.30-PM.png 396w, https:\/\/emersoncode.com\/blog\/wp-content\/uploads\/2020\/01\/Screen-Shot-2020-01-22-at-5.46.30-PM-300x137.png 300w\" sizes=\"(max-width: 396px) 100vw, 396px\" \/><\/figure>\n\n\n\n<p><strong>2.<\/strong> 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).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"ruby\" class=\"language-ruby\"># config\/initalizers\/shopify_app.rb\nShopifyApp.configure do |config|\n  config.application_name = \"App Name\"\n  if(Rails.env.production?)\n   config.api_key = \"ProductionKeyHere\"\n   config.secret = \"ProductionSecretHere\"\n  else \n    config.api_key = \"DevelopmentKeyHere\"\n    config.secret = \"DevelopmentSecretHere\"\n  end <\/code><\/pre>\n\n\n\n<p>(You should accomplish this with env variables if you will be putting app code in repository.)<\/p>\n\n\n\n<p><strong>Then it&#8217;s as simple as developing in localhost w your development app, and when you&#8217;re ready to push those changes in production, run your <code>git push heroku master<\/code> terminal command<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Tools I use: Ruby on Rails&nbsp;w\/&nbsp;shopify_app&nbsp;gem Polaris Components&nbsp;for the app\u2019s admin design, but I use the&nbsp;pure CSS\/HTML method&nbsp;instead of the intended use as a React component bc I\u2019m a neanderthal Ngrok&nbsp;to give my localhost server a secure public URL Heroku&nbsp;for hosting the app The Setup When you start building apps for Shopify, one thing [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/posts\/149"}],"collection":[{"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/comments?post=149"}],"version-history":[{"count":6,"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/posts\/149\/revisions"}],"predecessor-version":[{"id":246,"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/posts\/149\/revisions\/246"}],"wp:attachment":[{"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/media?parent=149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/categories?post=149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/tags?post=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}