Max RozenMax Rozen

Deploying Node and React Shopify apps on Vercel

Max Rozen
@RozenMD

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.

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

Now the real work begins.

Do you struggle to keep up with best practices in React?

I send a single email every two weeks with an article like this one, to help you keep track of what's happening in the React ecosystem.

Lots of developers like them, and I'd love to hear what you think as well. You can always unsubscribe.

    Join 81 React developers that signed up last month!