How to build your first Shopify app
By: Igor Petrov
Tags: Shopify, Technology, Ruby on Rails, Ecommerce, React

Why build a Shopify App?

I have always been excited about how the e-commerce market is growing, and have made various attempts to dive into this world. About five years ago, a partner and I built an e-commerce website selling and delivering flowers, a soft toy, and a greeting card packaged together as a gift. This was an idea validation attempt, and we didn’t take it seriously. So it ended soon.

Later, we tried to sell floor tiles (partnering with a guy who had worked in that area for several years) and it didn’t go well, either. Mostly, the reason was the same: it was a side project for us, and we knew nothing about the floor tile market.

But, during this time, we developed a lot of e-commerce websites for our agency’s clients. Most of these websites were built using Ruby on Rails and specifically Spree. And this direction was successful — we learned a lot about e-commerce website development and typical development problems (as well as marketing, shipping, and different business problems).

This year I’m working with a new partner who had good experience with the Shopify platform. We talked a lot and came up to an idea of developing a Shopify app. This platform is growing fast, and there’s a big demand on the market for extending platform possibilities.

Building a product, rather than doing custom development for someone, was exciting for me, too. So these two things — e-commerce and product development — have naturally combined into the idea of a Shopify app.

Understanding app building complexity

So you’ve come up with an idea for your application. Now you need to decide if your app will interact with merchants’ storefronts by extending templates or injecting some scripts. Or maybe you need to work with some third-party API and integrate it into your app, or extend a Shopify Admin.

Each part can be complex enough. So if you just need to do something with Shopify store data and output something in the Admin section, you are dealing with 1 type or 1 point of complexity. If you need to work with external APIs and still have some section in Admin, you have 2 points of complexity. And so on.

Start development with a boilerplate

Well, we can see that our app is quite complex (though for customers it looks like an easy one). Since we agreed on app idea and initial MVP, I started to research and found that Shopify has a great shopify_app Ruby gem.

This is a pretty cool stuff that saves you a lot of time: it generates for you a Shopify app framework without the need to setup OAuth flow manually. Other things to note:

Generated Shop model

Simple Webhooks and ScriptTags registering

Authentication approaches

App Proxy verification (for your storefront customizations)

I’ve launched a blank app in minutes, not hours.

Use recommended tools

Next, I have researched how to approach Admin UI in your app. I found out that Shopify simplifies this task for you as well with the power of their design framework Shopify Polaris.

Polaris is a React.js components library, and this is the recommended way for extending the Shopify Admin section. Your app will look like a native Shopify app with admin sections like “Products” or “Orders” (Shopify uses it too, I guess).

You should use it instead of some custom theme, because it’s well documented, supported, and has guidelines.

Extending Shopify Admin

After a successful installation of Shopify Polaris into the project with the help of Webpacker or Yarn, you’ll be able to extend the Shopify Admin section.

For the welcome page (one that merchants will see after app installation with no data set up yet), then you’ll do these things:

Add a route:

get ‘/welcome’ => ‘home#index’

Create a Rails controller:

class HomeController < BaseAuthenticatedController

def index

end

end

Add a view template that just renders React component with the help of react-rails gem:

Create a React component that renders some Shopify Polaris components (like EmptyState , for example).