Shopify App and Theme Development tutorials for those who are familiar with code and want to dive into Shopify.

Shopify embedded apps are a wonderful way to extend the functionality of your store and provide a seamless experience for the vendor. In this post we will go over how to set up a private embedded app with Ruby on Rails and add it to your store.

1. Create a New Rails Application

In a terminal window navigate to the directory where you want to store your app. To generate your app run with appname being the name of your app:

rails new appname

then go into the root directory of your app

$ cd appname

2. Add the Shopify App Gem

Shopify has made it easy to set up your app environment with their gem.

With your app open in your favourite text editor find your Gemfile and add the shopify_app gem.

#Gemfile
gem 'shopify_app', '6.2.1'

In your terminal run

$ bundle install

3.Set up your app with ngrok

In order to properly preview and run our app as an embedded Shopify app within our local environment we need to set up a public url with an ssl certificate (https). We're going to use a tunneling service called ngrok.

Follow the steps below to install and run ngrok:

1. Download ngrok
2. In your terminal cd to the location where you downloaded ngrok
3. Start up the ngrok process ngrok http 3000. This will create a tunnel to your rails app running on localhost:3000.

Once you've started up ngrok it will give you a temporary public url for your app, something like: https://b48a6e1c.ngrok.io

🔥 TIP - the free version of ngrok will generate a new temporary public URL each time you start and stop the process. This can get a little cumbersome as the app URL and redirect URL you set up in Shopify (up next) will need to match this ngrok URL. A 'hack' is to keep the process running so the URL never changes. Another solution is to pay for ngrok (we really love the service and this is what we do!) this way you can specify the subdomain you want the tunnel on like this: ngrok http -subdomain=codeshopify 3000.

4. Create an App in Your admin Panel

** This assumes you have set up a Shopify Partner Account, if not head here.

In your Shopify Partner admin select Apps > Create a new app

Give your app a name

Enable the Embedded App SDK under Embedded Settings.

As we start out we will be developing our app locally, so under App URLs set the Application URL to the ngrok tunnel URL you just set up (this is likely something like https://subdokmain.ngrok.io/)

Set the Redirection URL to https://subdomain.ngrok.io/auth/shopify/callback

Make sure to read and accept the developer terms, then hit create app!

5. Run the Default Generator

In your terminal run

$ rails generate shopify_app --apikey your_api_key --secret your_secret

The api key and secret are generated in your Shopify Partner Admin when you create your app

Under db > migrate in your rails app check out the create shops migration. It should look something like this:

class CreateShops < ActiveRecord::Migration
  def self.up
    create_table :shops  do |t|
      t.string :shopify_domain, null: false
      t.string :shopify_token, null: false
      t.timestamps
    end

    add_index :shops, :shopify_domain, unique: true
  end

  def self.down
    drop_table :shops
  end
end

Then in your terminal run:

$ rake db:migrate

Still in the db directory check out the newly generated schema.rb. This will show your shops table.

In your terminal start up your rails application by running

$ rails s

Head to http://localhost:3000/ and you should see a screen where you can input the shop name to connect your app.

6. Set Up Environment Variables

In order to authenticate our app we need to include the api key and secret, but we want to make sure that these are not publicly available. To do so we will use the rails dotenv gem.

In your gemfile add:

#Gemfile
gem 'dotenv-rails'

In your terminal run

$ bundle install

In the root of your project create a new .env file. Make sure to include this file in your .gitignore so you do not push your private keys public later.

In your .env file add:

#.env
api_key=your_api_key
api_secret=your_api_secret

In the config > initializers > shopify_app.rb file add the reference to your api_key and api_secret environment variables. It will look something like this:

#shopify_app.rb
ShopifyApp.configure do |config|
  config.api_key = ENV['api_key']
  config.secret = ENV['api_secret']
  config.redirect_uri = "http://localhost:3000/auth/shopify/callback"
  config.scope = "read_orders, read_products"
  config.embedded_app = true
end

7. One last configuration

To allow the app to work as an embedded app you need to make sure this setting is enabled. Back in your partner dashboard navigate to the apps and select the app you just created. Navigate to extensions and make sure 'Embed in Shopify' admin is set to enabled.

7. Voila Your App!

start the server and head back to http://localhost:3000/. Type in the URL of your shopify store and hit install. If all goes as planned you will be redirected to your shop where you can finish connecting the app!!

** Hint: if you kept the server running and are getting an error try restarting and hitting install again :)