How to turn your Ruby on Rails project into a Shopify app
Tags: rails, shopify
Published: 2022-02-18 13:00:26

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](https://www.shopify.com/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](https://ngrok.com/) 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:
![ngrok running in the terminal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1u4ef14bg9aocjixncqf.png)

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.
![URLs section when creating an App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iwppl3b6m5vd20x5k7gq.png)
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
```
2. Visit the ngrok URL you defined as the App’s URL.
3. You should now see an input field asking you to enter your shop domain. Enter it and click Install app.
![shopify app pop up asking to enter the shop domain](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7x1uu7do5rztqbfq0uui.png)
 
If you forgot your shop domain, simply click on your store in your partner dashboard and it should be displayed on the right side.

4. 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.
![View asking you to install unlisted app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohxtp457ym69sz3cona6.png)
 
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_.
![Installed apps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yenmppq1g5sy635k9ipj.png)
 
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.