So you’ve made the decision to become a Shopify app developer. Now what?

Going from zero to Shopify app developer can seem a little daunting. That’s what I’ve written this series of articles to help you through the process of building your first Shopify app. Unlike many articles on the topic I’m going to cover more than just building a basic app. That’s why this is going to be a series. So you don’t miss out of the following articles I’d strongly recommend you join my mailing list.

Now where to start…

Join the Shopify Partner Program

Before you can build an app for Shopify you need to register as a developer with the Shopify Partner Program. Registration is free and only takes a few minutes. Once you are registered you will have access to the partner dashboard which allows you to create development sites and apps.

Git repository

I’m going to assume you’re using git for version control. If you are then create a repo now and clone it locally.

git clone git@github.com:buggy/shopify-embedded-app.git
cd shopify-embedded-app

Creating a new Rails App

If you’re using rbenv (or similar) you probably want to create a .ruby-version file to set the verion of Ruby to use.

echo "2.3.1" > .ruby-version

Next make sure you have Rails and Bundler installed.

gem install rails
gem install bundler

We now need to create a new Rails application that will become our new application. To do that we’re going to use the rails command.

mkdir .bundle
rails new .

Finally commit the new application to git.

git add * .gitignore .ruby-version
git commit -m "New Rails application"
git push

You can test that everything installed correctly by running the rails development server and visiting http://127.0.0.1:3000/ with your browser.

bundle exec rails s

Pick your database

By default Rails will use SQLite as the database for your application. Personally I’ve been using MySQL so I’m going to include instructions here for installing that. If you’re using Postgresql or another database you should follow the instructions for connecting to that database instead.

Using MySQL

You need to replace the sqlite3 gem with the MySQL gem. Look for

# Use sqlite3 as the database for Active Record
gem 'sqlite3'

and replace with

# Use mysql2 as the database for Active Record
gem 'mysql2', '~> 0.4.5'

Now install the new gem using bundler.

bundle install

Move the original database config file to an example file so that someone installing the app for the first time has something to start with.

git mv config/database.yml config/database-example.yml

The create a new config/database.yml file with the correct settings for your database.

# MySQL
#   gem install mysql2
#
#   Ensure the mysql2 gem is defined in your Gemfile
#   gem 'mysql2'
#
default: &default
  adapter: mysql2
  encoding: utf8
  username: root
  host: 127.0.0.1
  port: 3306
  pool: 5
  timeout: 1000

development:
  <<: *default
  database: myapp_dev

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test: &test
  <<: *default
  database: myapp_test

production:
  <<: *default
  database: myapp_prod

You’ll want to add config/database.yml to your .gitignore so it doesn’t get commited to git.

echo "config/database.yml" >> .gitignore

Create the database and run the migrations

bundle exec rails db:create
bundle exec rails db:migrate
bundle exec rails db:migrate RAILS_ENV=test

And commit the change to git.

git add .gitignore Gemfile Gemfile.lock db/schema.rb
git commit -m 'Switched the database to MySQL'

Adding development and test gems

There are a few development gems I like to install. You can skip this or replace it with your preferred gems.

RSpec Rails

Add rspec-rails to the Gemfile

  # Use RSpec for tests
  gem 'rspec-rails', '~> 3.5', '>= 3.5.2'

Then install the gem and commit to version control

bundle install
bundle exec rails generate rspec:install
bundle binstubs rspec-core
git add Gemfile Gemfile.lock .rspec bin/rspec spec
git commit -m "Added RSpec Rails support"

Factory Girl Rails

Add factory girl to the Gemfile

  # Use factories for tests
  gem 'factory_girl_rails', '~> 4.8'

Then install the gem and commit to version control

bundle install
git add Gemfile Gemfile.lock
git commit -m "Added Factory Girl support"

Faker

Add faker to the Gemfile

  # Helps create fake data for tests
  gem 'faker', '~> 1.7.2'

Then install the gem and commit to version control

bundle install
git add Gemfile Gemfile.lock
git commit -m "Add Faker gem"

Database Cleaner

Add database cleaner to the Gemfile

  # Use database cleaner to keep the database empty
  gem 'database_cleaner', '~> 1.5.3'

The install the gem.

bundle install

Create a file spec/support/database_clear.rb with the following:

RSpec.configure do |config|

  config.before(:suite) do
    DatabaseCleaner.strategy = :transaction
    DatabaseCleaner.clean_with(:deletion)
  end

  config.around(:each) do |example|
    DatabaseCleaner.cleaning do
      example.run
    end
  end

end

And commit to version control.

git add Gemfile Gemfile.lock spec/support
git commit -m "Add database_cleaner"

Adding the Shopify App Gem

Now that our basic Rails application has been setup we need to install the shopify_app gem. To do that add the following line to your Gemfile

# This is required so bundler can find the correct version of activeresource for Rails 5.0
gem 'activeresource', github: 'rails/activeresource'

# Use the shopify_app to create a basic embedded app
gem 'shopify_app', '~> 7.2', '>= 7.2.3'

Note: You need to use activeresource from the master branch with Rails 5

Now install the gem.

bundle install

The shopify_app gem has a generator to create the nesecary files. You should run that now.

bundle exec rails generate shopify_app

I then update the create_shop migration in db/migrate to include [5.0]

class CreateShops < ActiveRecord::Migration[5.0]

Run the migrations

bundle exec rails db:migrate
bundle exec rails db:migrate RAILS_ENV=test

Now modify config/initializers/shopify_app.rb and set your applications API key and secret. If you don’t want to commit those to version control (you shouldn’t) then you can grab them from your environment variables.

config.api_key = ENV["SHOPIFY_CLIENT_API_KEY"]
config.secret = ENV["SHOPIFY_CLIENT_API_SECRET"]
config.scope = "read_orders, read_products"

Add some validation to the Shop model

  validates :shopify_domain, length: {maximum: 255}, presence: true, uniqueness: true
  validates :shopify_token, length: {maximum: 255}, presence: true, uniqueness: true

Create a start script that sets the environment variables before running the Rails development server.

cat > start.sh << EOF
#!/bin/sh

export SHOPIFY_CLIENT_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
export SHOPIFY_CLIENT_API_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
bundle exec rails s
EOF
chmod 0700 start.sh

And make sure it’s never commited to version control.

echo "/start.sh" >> .gitignore

You can test the application by starting the server

./start.sh

Then visiting the http://127.0.0.1:3000

Finally commit the application to version control.

git add .gitignore *
git commit -m "Added the shopify_app gem"
git push

END OF PART 1!