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. 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 your local host, specifying the port where your rails app is running (this is likely http://localhost:3000/)

Set the Redirection URL to http://localhost:3000/auth/shopify/callback

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

4. 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.

5. 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

6. 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 :)