How to turn your Ruby on Rails project into a Shopify app

For the past few weeks, I spend my time turning a Rails project into a Shopify app and… it can be a pain. So I documented what worked and what didn’t and I hope this guide will make your introduction to Shopify app development at least a little bit easier.

Preparations

Of course, you can’t start coding right away, but luckily it’s only three things that need to be done:

1. Shopify Partner account
2. Development Store
3. ngrok account

Shopify Partner account

If you want to develop an app for Shopify, you need to create a Shopify Partners account. It’s really easy, you just need to sign up for it, and then you’re done. Plus, it’s free!

Development store

After creating a Partner account, you need to create a store. Otherwise, you wouldn’t be able to test your app inside a store.

1. Go to your Shopify Partners account and click on Stores on the menu on the left side.
2. Click Add Store and choose the option Development Store.
3. Fill out all the necessary information and done!

It should redirect you to the store’s dashboard.

ngrok account

You will also need a ngrok account. Simply sign up and download the correct version for your laptop and follow the instructions on the website. If the command on Setup & Installation doesn’t work for you, you can also do it manually as described in the Your Authtoken section.

Open a terminal and start the server with ngrok http 3000. Your terminal should look something like this:

If it didn’t work and you got ERR_NGROK_108, you might need to kill the current ngrok session and then restart it.

# kill and restart
$ kill `pgrep ngrok`
$ ngrok http 3000

Creating an app

Create an app in the Partner’s dashboard

1. Like for the development store, click on Apps on the menu on the left side and then on Create app.
2. Choose whether you want to create a custom or public app, I will choose a public app.
3. After that, input all the necessary information. For App URL use the URL provided by ngrok. In my case with the example from above it would be https://cbd2-somemorestuff.ngrok.io . For Allowed redirection URL(s), put in the same ngrok URL, but with /auth/shopify/callback at the end. This way, Shopify will be able to authenticate your app when you install it to your store.
4. Lastly, click on Create app. Done! Now you should see your app API key and secret key.

By default, embedded app should be enabled, but still, check if it is to be sure. To do so, click on App setup. Scroll down until you reach the Embedded app section and click on the Manage button. Enable Embed your app in Shopify admin if it’s currently disabled.

Add shopify_app gem

1. Take an existing project or create a new one and cd into its directory:

$ rails new shopify_rails_app_name
$ cd shopify_rails_app_name

2 Add the gem manually or run the following command in your terminal:

$ bundle add shopify_app

3 Install the generator with your own api key, secret and ngrok redirect URL (the one with /auth/shopify/callback at the end).

$ rails generate shopify_app:install -api_key=your_api_key 
-secret=your_app_secret -redirect_uri=your_redirect_uri

You might get the same long error message as me that starts like this:

in `method_missing': undefined method `assets' for #<Rails::Application::Configuration:0x000000010c7d75a0...

If you do, then you need to add require “sprockets/railtie” at the top of your application.rb in the config folder and create a manifest.js file in app > assets > config. Run the command once more.
4 Generate the home controller and shop model

$ rails generate shopify_app:home_controller
$ rails generate shopify_app:shop_model

5 Run the pending migrations
Before you execute the command, go to your routes.rb file and check if you have one or two root defined. By running the home controller command from step 4, Shopify will add root :to => ‘home#index’. Leave it and comment out your other root declaration. Otherwise, the installation won’t work (you can change it back later).
When you only have one root defined, run the migration:

$ rails db:migrate

6 Add API key and secret to .env
Open the .env file or create one in the root of your project and define your API key and secret like this:

SHOPIFY_API_KEY=Your Shopify API key
SHOPIFY_API_SECRET=Your Shopify API secret

And lastly, not necessary, but I still think you should do it: Check out all the changes the gem made (HomeController, ProductsController, migration, etc.).

Connect App to Store

Start the rails server

$ rails s

1. Visit the ngrok URL you defined as the App’s URL.
2. You should now see an input field asking you to enter your shop domain. Enter it and click Install app.

If you forgot your shop domain, simply click on your store in your partner dashboard and it should be displayed on the right side.

1. It should connect to your store and you should see this “You are about to install [your app name]” message. Click on the “Install unlisted app” button.

Your app is now installed!
Click on Apps on your store dashboard (not your partner dashboard) and you will see your app listed under Installed apps.

Click on your app to see it running!
If it’s not running, make sure your ngrok tunnel and rails server are both running. Also, if you cancel the ngrok tunnel and restart it, you will get a different URL and thus you will need to change your app’s URL and redirect URL in the partner’s dashboard.

Make it work

When you click on your app, you will see the default page of a Shopify App. It will display something along the lines of:

Products
Loading...
There are currently no webhooks

You can find it in app/views/home/index.html.erb in case you want to use it as your starting page or edit it or just play around.

If you wanted to change your root and you were to simply change it in the routes.rb file, you would see that it still loads, but it doesn’t work. If you click on a navigation item (to get to the About page for example), nothing happens. That is because for every controller we access in our Shopify App, we need to include the following:

include ShopifyApp::EmbeddedApp

If you hover over the About item in your navigation, you will see that it would redirect you to localhost:3000/about which Shopify cannot access. By including the code above, it changes it to your ngrok URL (https://cbd2-somemorestuff.ngrok.io/about), making it possible for Shopify to access.

Thank you

Thank you for reading all that and I hope I was able to give you an easier start to creating a Shopify App than the one I had.