Thanks to the tools provided by Shopify, creating an app on the Shopify App Store is really easy. They also made a video showing how to create one. Here I will show you how to create a Shopify App and setup everything so you can start creating your custom app right after :smile:

Configuration of our Rails app

Let’s begin by creating a brand new rails app with :

$ Rails new my-awesome-app --database=postgresql

We add the database parameter postgresql because we will use Heroku to host our app and this is the default used by Heroku.

Then, enter your app directory :

$ cd my-awesome-app

Next thing to do is to initialize a new git repository to keep track of the changes we make :

$ git init
$ git add .
$ git commit -m "Initial commit : Rails new"

Ok, great. Now we will create a new heroku app with this command :

$ heroku create my-awesome-app

The heroku create command automatically creates a remote and add it to git.

Before configuring our Shopify App, we will need to install a specific tool that will help us test our App in development : ngrok. Ngrok allows us to expose a web server running on our local machine to the internet. Follow the instructions to install it, then go to the directory you installed it, and run :

$ ./ngrok http 3000

You should see an https URL looking like https://2254ba59.ngrok.io. Let ngrok running and take note of this URL : it is the address that tunnels to you local machine and we will need it later.

Configuration of our Shopify App

Now it is time to go to Shopify and setup everything we need. First, create a Shopify Partner account, and go the the App directory (left sidebar), then “Create a new app” (top-right corner).

You will have to do 4 required things :

  • App name : Add a name to your app.
  • SDK settings : enable “EMBEDDED APP SDK” (it enables our app to be embedded in the shopify admin interface)
  • App URL : add your https ngrok URL
  • Redirection URL : add your https ngrok URL followed by the path /auth/shopify/callback

Ok, now click on “Create app”. On the next page, note your API key and Credential sets, we will need them later for authentification.

In order to test our app, we will need a development store. The process of creating a store is really easy on Shopify, just go to your Partner account, then choose “Development Stores” (left sidebar), then “Create a new sotre” (top-right corner).

Ok, now everything is setup on the Shopify side.

Let’s go back to our Rails app

Instead of reinventing the wheel, we will use a gem developed by shopify developers. Just add gem "shopify_app" to your Gemfile. For security reasons, we will also add the figaro gem which will help us handle our environment variables and never store them on public repositories. Add gem "figaro" to your Gemfile, and run :

$ bundle install

Basically, with figaro, you just have to store your credentials in a file named application.yml and then use them by calling ENV[“MY_KEY”]`. To install figaro, run :

$ bundle exec figaro install

This creates the config/application.yml file and adds it to your .gitignore so you can be safe :)

Open your config/application.yml and add your Shopify App credentials as follows :

SHOPIFY_API_KEY: 123example24apikey123
SHOPIFY_SECRET:  456example23secret789

Ok, now let’s use a generator providing by the shopify_app gem by running :

$ rails generate shopify_app --api_key <your_api_key> --secret <your_app_secret>

Go to config/initializers/shopify_app.rb and replace your credentials by environment variables :

ShopifyApp.configure do |config|
  config.api_key = ENV['SHOPIFY_API_KEY']
  config.secret = ENV['SHOPIFY_SECRET']
  config.scope = "read_orders, read_products"
  config.embedded_app = true
end

The scope attribute defines the actions we will be allowed to perfom through the Shopify API. You can find a complete list of Shopify scopes here.

Then run a rails server :

$ rails s

Go to your ngrok URL, enter your shopify development store URL, click install.

Install the app on your store and you are done !

You can now start creating you own app, iterating and making any change you want. Once you are done and you want to push it to heroku, just run :

$ git push heroku
$ figaro heroku:set -e production

The figaro command pushes your credentials to Heroku. Don’t forget to replace the App URL and Redirection URI of your App on Shopify. Put your heroku URL instead of the Ngrok one.

That’s it!