What’s up all-star devs? Wanna build a Shopify app? You’ve come to the right place. This starter kit will provide you with all the tools you need to get up-and-running with a working, embedded, public Shopify app. You can develop it for your own use, or for sale in the Shopify App store.
Why this sweet, sweet Shopify App Guide?
In our experience building Shopify apps, Shopify provides you with a great deal of tools, and documentation. However, to get fully started on an app you need to follow various resources in different places, some with differing/slightly-incorrect/missing-one-small-step information that could be enough to throw you off your path. So, we compiled these resources into a complete, step-by-step guide! We followed along as we wrote it, tested it, and confirmed this will get you where you need to go.
What this Shopify App Guide covers
In this guide, we’re going to:
harness the power of use Rails and the shopify_app gem
install all the development tools you’ll need on your computer
get you started developing your app
take the training wheels off and let you fly down a sweet hill of Shopify app development
This guide assumes the following:
you’re on a Mac
you’re familiar with the command line
you’re familiar with Shopify
you’re familiar with Rails app development*
you understand API consumption
*We don’t have time to cover Rails development here, but if you’re new to it, don’t worry — Rails development is easy! Have a look at courses like Rails for Zombiles and get up-and-running in no time!
We’ll be installing the following tools (if you haven’t already) to get up-and-running:
Now that we’ve gotten the preamble out of the way, let’s do this thing!
Homebrew is a tool that allows us to easily install other much-needed tools on our machine, right from the command line. This is where it all begins.
If you don’t have Homebrew installed on your machine yet (you can check by running brew -vfrom the command line), go to http://brew.sh/ and follow the installation instructions there.
Install Ruby 2.2.2
If you use a version manager such as rbenv (we highly recommend it), install Ruby v2.2.2 through your Ruby version manager. If you don’t use a version manager, you can go to the Ruby installation docs and follow instructions there on how to install.
We’re installing postgresql so you can deploy to Heroku easily if you want to. But you don’t need to deploy to Heroku if you don’t want to! You’ll be able to serve your app from anywhere you could normally serve a Rails app.
If you’re missing any of these things, make sure you add them before moving forward!
Install our Rails starter app
Note: if the following commands aren’t working on your command line, try running them with the sudo command
The good folks over at Shopify created the fantastic shopify_app to get you up-and-running with a Shopify app boilerplate. We’ve forked it and added a few things we like. For this tutorial, grab our version for this tutorial here. Once you’ve downloaded it:
cd into the app folder
ensure you’re running Ruby 2.2.2
install your Ruby gems
have a look at your Gemfile:
you’ll see the various gems installed and why – this is helpful in understanding how your application works and how to troubleshoot
Make sure Postgresql is running:
postgres -D /usr/local/var/postgres
Create a DB for our application:
Start our application:
Go to a browser and visit http://localhost:3000
if you see an error page like the one pictured in the image below, good stuff! You’re on the right track.
once we setup and configure our app, we’ll see a different screen
Use Shopify_app to generate our Shop model:
rails generate shopify_app:shop_model
Pro-tip: run rake db:migrate after every time you generate a shopify_app model
Install and Run Ngrok
Ngrok is a proxy server that allows us to serve our local application through a public URL. It’s pretty cool.
take the “ngrok” file and move it to the location you want to install it: (for example: ~/dev/tools)
double-click the “ngrok” file to install
your computer will ask you if you want to open it; click “ok”
a terminal window will open to run a script. When it’s complete, you can close it
add the ngrok command to your command line
in your text editor of choice, open ~/.bashrc
add the following line and save:
(where “/my/path/to/” is the folder you installed ngrok in)
update the command line with your changes:
From your application root directory, run:
ngrok http 3000
now ngrok will display a UI with your new public URLs
try one of these by copy/pasting into the browser
Now that our computer is setup, let’s create our Shopify app.
login to your partner account. If you don’t have one, create one here
once you’re logged in to your partner account:
Go to Apps
Click “Create a new app”
General app config
Name your app
Important: check “Enabled” for the Embedded App SDK
Configure app URLs
Place your NGROK url in the “App URL” field
Place your NGROK url in the “Redirection URL” field
Add “/auth/shopify/callback” to the end of it
Configure app proxy
Type “starter-app” into the “App proxy:URL” field
Place your NGROK url in the “Proxy URL” field
Add “/proxy” to the end of it
Accept developer terms
Click “Create app” button
Configure App Credentials
Now, you’ll be redirected to your app dashboard, which contains the credentials your app will use to connect to the Shopify API. Let’s use these values to configure our Rails app:
Copy the following fields into our Rails app development config file at “config/environments/development.rb”:
Copy the “API Key” value, paste as value of “config.shopify_api_key” variable (should be string; wrap in quotes)
Copy the “Secret” value, paste as value of “config.shopify_secret” variable (should be string; wrap in quotes)
Configure our public NGROK url:
In the same config file, copy/paste your ngrok url as the value of the config.public_url variable (should be string; wrap in quotes)
Add whitelisted URLs if you need them
Pro-tip: don’t store important credentials in your source code. We’re doing this for easy development, but when you switch to production, remove the credentials and specify them when you boot your server instead!
Now our app is configured: we’re ready to install it on a store!
Install App in Store
In a web browser, go to your ngrok public url
You’ll see a page prompting you to enter in a store domain
Enter in the domain of the store you want to install the app to, and click “install”
You should be taken to a store admin panel, asking you if you want to install the app. Click “ok”
You will be redirected to your app dashboard.
You made it – welcome! Develop your little heart out.
Have a look around: dig through your admin panel, dig through your Rails app, etc. If you want to use Application Proxies, our app is setup to do that by default. Read up on them here.