Deploying Node and React Shopify apps on Vercel

Building Shopify apps in React and Node the way Shopify teaches you is cool and all, but what if you wanted to take advantage of Next.js API routes, and deploy on Vercel?

Luckily for you - I've scoured the web to figure this out.

Prerequisites

To start off, you're going to want to go through the official Shopify app tutorial.

It's probably one of the best tutorials I've seen for doing anything in React, so just take an hour, and learn how Shopify apps are built.

Actually deploying to Vercel

The issue with the official Shopify tutorial is that it makes you build a Next.js app with a custom server.

In case you don't know (I didn't), you can't deploy custom servers on Vercel:

So we could either re-write the custom server example to use API routes, or find an example on GitHub that does that already.

This repo by bluebeel is the example you're looking for. It even comes with a "Deploy to Vercel" button.

Smash that "Deploy to Vercel" button.

On Vercel, set your SHOPIFY_API_KEY and SHOPIFY_API_SECRET, as well as HOST and NEXT_PUBLIC_HOST (I guessed the Vercel deployment URL and used the same value for these two).

You'll also want to update your Shopify app's "App URL" and "Allowed redirection URL(s)" so that authentication works. At time of writing this was {VERCEL_URL}//api/shopify/auth/callback. Note the double slash there.

Update: as of March 2021, I've received reports that the single slash version now works as expected, so try using {VERCEL_URL}/api/shopify/auth/callback.

Once deployed, and authenticated, eventually you'll see this screen: Vercel Shopify app

Now the real work begins.

(Shameless plug for the useEffect book I wrote below)

Tired of infinite re-renders when using useEffect?

A few years ago when I worked at Atlassian, a useEffect bug I wrote took down part of Jira for roughly one hour.

Knowing thousands of customers can't work because of a bug you wrote is a terrible feeling. To save others from making the same mistakes, I wrote a single resource that answers all of your questions about useEffect, after teaching it here on my blog for the last couple of years. It's packed with examples to get you confident writing and refactoring your useEffect code.

In a single afternoon, you'll learn how to fetch data with useEffect, how to use the dependency array, even how to prevent infinite re-renders with useCallback.

Master useEffect, in a single afternoon.

useEffect By Example's book cover