Thanks to the tools provided by Shopify, creating an app on the Shopify App Store is really easy. They also made a video showing how to create one. Here I will show you how to create a Shopify App and setup everything so you can start creating your custom app right after
Configuration of our Rails app
Let's begin by creating a brand new rails app with :
We add the database parameter
postgresql because we will use Heroku to host our app and this is the default used by Heroku.
Then, enter your app directory :
Next thing to do is to initialize a new git repository to keep track of the changes we make :
Ok, great. Now we will create a new heroku app with this command :
heroku create command automatically creates a remote and add it to git.
Before configuring our Shopify App, we will need to install a specific tool that will help us test our App in development : ngrok. Ngrok allows us to expose a web server running on our local machine to the internet. Follow the instructions to install it, then go to the directory you installed it, and run :
You should see an https URL looking like
https://2254ba59.ngrok.io. Let ngrok running and take note of this URL : it is the address that tunnels to you local machine and we will need it later.
Configuration of our Shopify App
Now it is time to go to Shopify and setup everything we need. First, create a Shopify Partner account, and go the the App directory (left sidebar), then "Create a new app" (top-right corner).
You will have to do 4 required things :
- App name : Add a name to your app.
- SDK settings : enable "EMBEDDED APP SDK" (it enables our app to be embedded in the shopify admin interface)
- App URL : add your https ngrok URL
- Redirection URL : add your https ngrok URL followed by the path
Ok, now click on "Create app". On the next page, note your
API key and
Credential sets, we will need them later for authentification.
In order to test our app, we will need a development store. The process of creating a store is really easy on Shopify, just go to your Partner account, then choose "Development Stores" (left sidebar), then "Create a new sotre" (top-right corner).
Ok, now everything is setup on the Shopify side.
Let's go back to our Rails app
Instead of reinventing the wheel, we will use a gem developed by shopify developers. Just add
gem "shopify_app" to your Gemfile. For security reasons, we will also add the
figaro gem which will help us handle our environment variables and never store them on public repositories. Add
gem "figaro" to your Gemfile, and run :
Basically, with figaro, you just have to store your credentials in a file named
application.yml and then use them by callingENV["MY_KEY"]`. To install figaro, run :
This creates the
config/application.yml file and adds it to your
.gitignore so you can be safe :)
config/application.yml and add your Shopify App credentials as follows :
Ok, now let's use a generator providing by the
shopify_app gem by running :
config/initializers/shopify_app.rb and replace your credentials by environment variables :
The scope attribute defines the actions we will be allowed to perfom through the Shopify API. You can find a complete list of Shopify scopes here.
Then run a rails server :
Go to your ngrok URL, enter your shopify development store URL, click install.
Install the app on your store and you are done !
You can now start creating you own app, iterating and making any change you want. Once you are done and you want to push it to heroku, just run :
The figaro command pushes your credentials to Heroku. Don't forget to replace the
App URL and
Redirection URI of your App on Shopify. Put your heroku URL instead of the Ngrok one.
That's it !
Always keep learning