How to Build a Shopify App as a Front End Developer

As a front end developer, I know that getting from front end to app development can be hard. App development requires a different set of skills, not to mention that there are many moving parts and technologies involved.

但这并不意味着它是不可能的。在这个艺术icle, I will share my journey as a front end developer getting into app development on Shopify. We will look at what tools are available, where to host your application, and how the submission process works.

But more importantly, I want to show that you do not have to be a backend full stack developer to do so. Regardless of what type of development you are doing, you can create Shopify apps. Let’s dive in.

Why front end developers could consider Shopify apps

Personally, I’m a front end developer. I’ve been doing it since tables were a thing. I wrote my first line of code on a ZX Spectrum. I did print design, Flash, SEO, I fell in love with web typography, thoughtMooToolswas groundbreaking, and experienced jQuery as my gateway to JavaScript.

I stumbled across Liquid seven years ago and loved the simplicity. It’s a sweet mix of markup plus logic, and I found it so easy to grasp. In my view, Liquid is still not getting all the credit it deserves.

Nowadays, I mostly write front end code for small and large organizations. Day-to-day, my code is limited to creating CSS and Javascript architectures, trying my hardest to make code performant and accessible.

I do not and never have handled backend. Servers are scary—when I runnpm-installand see thousands of files installed, files I know nothing about, I panic. I am just a front end developer who has been doing what I love for many years.

But as I worked more with Liquid and Shopify stores, I discovered that you can only go so far without using apps. Shopify is a versatile platform, but I found that at a certain point, only working on the storefront limits the client projects I can do.

"Shopify is a versatile platform, but I found that at a certain point, only working on the storefront limits the client projects I can do."

I knew that apps could improve and complement the services I provided for my clients. However, making the transition to app development seemed like a complicated process. It can be intimidating—there are so many technologies involved, and so many questions. React, KOA, Next, GraphQL, Polaris... I was afraid of all this. But I’ve discovered that adding apps to my developer tool belt has opened a new world of opportunities. Besides being able to provide additional services that require app development to my clients, I currently have two apps listed in theShopify App Store, and am working on my third one now.

Both of my public apps use the same development workflow and similar setups: theShopify App CLI,Polaris, andKoa. Once you’ve built your first app, it gets easy to reuse components. From app to app, you will also improve your code. Starting up can be hard, but after that, things will become much clearer and more simple.

So, if you do not know AWS, Heroku, Ngrok, Polaris, React, JSX, KOA, GraphQL, Apollo, Next, Webpack, NPM, CLI (or the rest of cryptically named technologies), and just love simple things like JavaScript, CSS, HTML, and Liquid, this article is for you. There’s lots of opportunity for front end developers to develop Shopify apps, and I hope this article gives you a starting point and answers some of your questions.

You might also like:How to Build a Shopify App: The Complete Guide.

Starting with the Shopify App CLI tool

For a front end developer, the easiest starting point to develop an app is to use theShopify App CLI tool. It helps you quickly generate Node.js and Ruby on Rails applications with a React/Polaris front end.

Using the CLI, I had a basic application that authenticates using OAuth and a “Hello World” page with Polaris components in just a few minutes. The Shopify App CLI took out all the heavy lifting by providing almost everything I needed to get started.

"The Shopify App CLI took out all the heavy lifting by providing almost everything I needed to get started."

The server uses Koa.js. This is a Node.js framework that handles factors like setting routes and making API calls. The front end is built using Shopify’s Polaris components wrapped in a Next.js application framework.

For front end developers, this is not far out of our comfort zone. On the server, we use JavaScript, and on the front end we use React.

Brushing up on my tech skills

On most of my Shopify clients, I still use ES5 or ES6. Not all stores have build processes with transpilers in place. There were things I needed to understand better and be comfortable with.

Before starting, I highly recommend looking at few things:

• The async/await function
• Module imports and exports
• Destructuring assignment
• The basics of React

Nothing on this list should be unknown to a front end developer. I initially thought that I had these topics covered, but if you do not use them on a daily basis in production, you will have a hard time understanding your application code.

There are many tutorials online to brush up on these skills, but I found thatFrontendMastersgave me everything I need in one place. I took two courses in particular: Kyle Simpson’sThe Recent Parts, which covers topics like destructuring, spread operators, and async functions (which almost everything your app does will rely on, such as API calls and server functions); and Steve Kinney’sState Management in Pure React v2 course, which covers React hooks, state management, and context, allowing you to work with React and Polaris.

Whichever courses or tutorials you choose, putting a few days into training so I could really understand the nitty-gritty parts of what I was doing saved me so much more in development hours.

You might also like:The Top Trends in the Shopify App Store in 2020 (And What You Can Learn From Them).

Using Polaris

Polarisis Shopify’s design system. It provides HTML and React components for your application. Tabs, modals, icons, cards—everything you need to put together a consistent UI is in there. With Polaris, you provide a consistent user experience to your app users.

Think of Polaris React components as Lego pieces. You can mix them up and they will play together nicely. React is a good technology here; all you need is to feed your components data.

My tips on getting started with Polaris

I have three main suggestions for working with Polaris:

• Understand React Hooks
• Get used to JSX
• UseReach Contextto structure and manage your data between components

The biggest code improvement I did on my second app was using React Context. With my first app, I was passing data top-down (parent to child) via props, a standard React pattern. But this pattern can get cumbersome when many components are involved. React Context allows you instead to pass data through the component tree, a better way to share your application logic between components.

By using Context, all my components were able to access and share the application data. For me, this was a major change in the application structure and maintainability.

ScriptTag API

Shopify’sScriptTag APIlets you inject a JavaScript file to the client storefront.

For me, this raised a lot of questions. Where should I host this file? Can my server handle a large number of requests? What are the costs?

In the end, I hosted my ScriptTag file on an AWS S3 bucket, delivered through AWS Cloudfront CDN.

Luckily with the2021-01 ScriptTag API, using"cache": true, you can now serve your scripts from Shopify CDNs. This is a great performance improvement and makes things better for both app developers and merchants. My tips:

• Use"cache": trueand let Shopify handle the distribution
• Keep it as small as possible to respect merchant performance
• Wrap your code in an IFFY, no variables should leak

Application hosting

I’ve never managed a server. Security, updates, load balancing… it’s a lot to handle. For my apps, I’m using Heroku. For my use case, it was really easy to set up and gives me what I need at this point.

To get your app into production, you will need a deployment pipeline, which sounds complicated but really isn’t. My pipeline is: review apps -> staging -> production.

Heroku connects to Github, which makes this pipeline straightforward. Whenever I create a commit, Heroku will deploy a review app. Merging to master will create a new app for staging that can be promoted to production.

In this way, I can review my application before going live, making sure everything is stable in production.

My tips:

• Make sure your hosting provides SSL certificates. This is a requirement for Shopify apps.
• 你的应用程序需要更新。任何供应商choose, make sure you have a deployment pipeline that allows you to have a staging environment.

If you decide to use Heroku, watch this video from James Ward on how to set up a pipeline with Github integration:

App submission

Honestly, I was afraid of the app submission process. Getting to this point takes a lot of effort and time, and getting rejected would have meant I’d done all that work in vain.

Authentication, access scopes, billing, GDPR, SSL, demo store, terms of service, contact, video, pricing plans, listing copy, screenshots, and key benefit images—there’s a big list of factors to consider before submitting your app. It took me a few days to prepare my submission, so I could make it the best I could.

The Shopify App CLI has the advantage of taking care of authentication for you. Heroku provides free SSL. Using the ScriptTag API with the"cache": trueflag takes care of your storefront Javascript distribution. This made it easier for me: these tools and services did most of the heavy lifting.

For testing and submission purposes, Shopify provides a freedevelopment store. You can set one up from your Partner Dashboard.

App listing

From there, I needed to make my app listing page—the page merchants will see in the Shopify App Store—look great. For images, I usedFreepik. I am not a fan ofstock images, but you can find many good resources at a decent price. You will need a logo, optional key benefit images, and product images for your demo store.

Creating a demo video is optional. I did not have one to start with, but ended up creating several withPromo. I was totally out of my depth here as I know nothing about creating videos, but with Promo I was able to set something up in a few hours.

Here’s one of the videos I created. Please do not judge too harshly.

Customer support

Customer support is a very important facet of your public app to consider. Personally, I decided to useZendesk. It allows me to keep track of all my conversations in one place. While it is a paid service, the basic plan is affordable.

In addition to reactive customer support, I also have a few additional "how-to" videos in the app itself. These videos provide step-by-step guides to using the app and hopefully help merchants before they need to contact me for support.

Not being a native English speaker, I have an accent and decided to not narrate my own video. Luckily, we have artificial intelligence voices that sound almost human nowadays. I use Amazon Poly to narrate my videos:

Beyond being prepared, there are no tips and tricks to getting listed. You need to fully followShopify's official public app requirementsclosely. There’s no way around it.

One thing I found helpful in understanding the review process was the following video on publishing your app to the Shopify App Store:

The review process was fast—I got a response in three days for my first app, and one day for my second app. I did not get listed immediately as there were, “minor issues that need to be patched.” Even after reading the full requirements several times and taking the time to prepare my submission, I still managed to make mistakes—something that’s normal for app submissions.

Specifically, the app review team flagged the following issues:

• I requested theread_scriptsscope without actually needing it.
• I needed a more unique app name.
• I had to remove all special characters from my app listing. I had an&in my detailed app description.
• I needed to remove text from my key benefit images.

My tips:

• Followthe guidelinesto the point.
• Have a decent-looking demo store.
• If you use the Shopify App CLI you have OAuth authentication out of the box. This is an app store requirement.
• Have assets like logos, screenshots, graphics, or videos ready to go.

New opportunities with development

Shopify has opened its app ecosystem for everyone. Don’t be intimidated by the overwhelming technology stack. If we front end developers can manage to center align something with CSS from IE9 to the latest shiny new device, we can surely learn how to make an API call using GraphQL. It can be a hard journey, but understanding how Shopify works on different levels it will make you a better developer.

"If we front end developers can manage to center align something with CSS from IE9 to the latest shiny new device, we can surely learn how to make an API call using GraphQL."

如果你是一个前端开发者,这是时间to start looking into Shopify apps. For me, this is an exciting opportunity.