Building a Shopify app is kinda fun

In this article, we'll dive into the process of building a Shopify app, focusing on the Node.js + React option, though it's worth noting that other platforms can also be used to build Shopify apps.

Please note that this article isn't a step-by-step guide or a deep technical dive into Shopify app development. Instead, I aim to share an overview of the current state of Shopify app development and its impressive progress.

As an engineering team, our priority is to deliver the most value possible. Development time doesn’t come cheap so it's crucial to use it wisely by focusing on specialised knowledge of the business systems your company relies on, rather than building standard e-commerce bits, like maintaining a "Contact Us" page or an FAQ page.

When we began, we had no prior experience building Shopify apps. However, the clear documentation, boilerplate starting code and wealth of pre-built components made it incredibly easy to complete a crucial app our business needs in a relatively short time.

Getting Started

The ideal starting point is the first page of the official Shopify app documentation.

I also found it helpful to keep a separate tab open featuring a completed sample app maintained by a team at Shopify, that allows you to cross-reference with the finished product.

Exploring Pre-built Components

By cloning the Shopify app repository, you'll gain access to a React-based front-end with Polaris already installed and an Express.js back-end. Shopify has even included several custom React hooks to help you get started quickly!

In my opinion, the two most crucial components to understand are useAuthenticatedFetch and useAppQuery.

The useAuthenticatedFetch hook ensures that your fetch requests always include a valid X-Shopify-Access-Token header or generates a new one before sending your request to your backend. In Shopify's own words, useAppQuery is "A thin wrapper around useAuthenticatedFetch and react useQuery."

The repository also puts a file structure in place for extending the app with more pages, hooks, or your custom components—an excellent starting point for building a data-intensive React app.

The Back-end

The back-end is an Express.js app with boilerplate code that handles authenticated and non-authenticated requests. Initially, it uses an SQLite database for session storage, which you'll need to replace before going live. You can choose from a multitude of SessionStorage implementations, but it probably makes sense selecting the same database you'll use for your app's use-cases.

Deployment

To deploy your app quickly, you can use the existing Dockerfile to create a Docker image. The documentation recommends using either fly.io or heroku to run your Docker image. We opted for fly.io.

Early questions we had revolved around using a database and persistent file storage. Fly.io has you covered, offering the ability to mount a volume for storage and choose your preferred database type. In total, it took about an hour to onboard fly.io, deploy, and run our first Shopify app using Docker!

Introducing Polaris

As I said in my previous post about the platform, Shopify's primary product is its admin page, and the company wants developers to create apps that look and feel as if they were built by their internal teams. Polaris is Shopify’s design system and component library. It’s kind of like Material-UI but for Shopify. It provides a consistent user interface for building Shopify apps, ensuring they integrate seamlessly with the platform's look and feel.

This approach is both bold and wise, as I've seen some suboptimal UX implementations in seemingly simple apps when the app wasn’t build using Polaris, in cases like simple FAQ modules for storefronts or cookie banners .

It's generally best to use Polaris components in your app, rather than building custom HTML & CSS, although that may not always be feasible. I did encounter some challenges when needing to build simple layouts, but it appears that Shopify is addressing these issues in new releases. Polaris will impose some constraints on what's possible, but that’s what encourages creativity and pushes developers and product managers to reconsider their approach to fit the provided tooling.

The dev experience with Polaris is very enjoyable. Each component is well documented and can be tested in its own sandbox (which is extremely useful for isolating bugs).

Polaris also addresses many common challenges faced by small teams by providing a strong foundation in terms of accessibility, tone of voice for user messages, colour schema, icons, and more. They also offer a Visual Studio Code extension!

Conclusion

My team is quite satisfied with the experience of building and launching a Shopify app. This platform enables smaller teams like ours to iterate quickly while providing larger teams with enough flexibility to tailor the process to their needs. I can say the Shopify team has done an outstanding job of winning us over, and I'm eager to see what they come up with next!