Shopify App From Scratch #1 - Introduction
Tags: shopify, shopifyapps, jamstack, javascript
Published: 2020-05-24 20:22:03

## Deprecation Notice

Yeah, yeah, I know. I hate it too when people abandon tutorial series mid-way. But, due to (exciting!) circumstances, I'm calling it quits for now.

I'm thinking of just dropping a link to the full repo here - it's a mess, but it's something you guys can chew on instead of my empty promises.

If you'd like me to drop it here - let me know at hey@redcaptom.com.

And, just sayin', I had a BLAST doing this. If you know something - anything - about technology, take the time to write it down as a tutorial series. You will get SO, SO much value out of it, you can't even believe it.

Until we meet again - RCT :)

## The Video (Scroll down for the article)

Coming soon!

## What now?

So, in December of 2019 I set out to build a [Shopify](https://shopify.com/) app.

![Shopify Logo](https://dev-to-uploads.s3.amazonaws.com/i/vd1r1exaj05sqwnynqoe.png)

[Shopify](https://shopify.com/) is an e-commerce platform that is, by far, the largest and most advanced one in the market. While I'm totally a fanboy, I can actually back that up by looking around - everyone and their brother is opening up a Shopify store. They offer solutions for payments, for shipping, for store design and whatever else you might be interested in as a business owner in need of an online presence.

## The Shopify App Store

At some point, Shopify figured out that they need an [App Store](https://apps.shopify.com/) - a central location to allow third party developers to create merchant-tailored experiences in various niches. Shopify will provide developers with the tooling, the documentation and an 80% cut of every app installation - and the developers will come.

![Shopify App Store](https://dev-to-uploads.s3.amazonaws.com/i/vnyl27a6n7fgcnar19tt.png)

And come they did - 3,200 apps later, it looks like a win for Shopify. And to be frank, I see why from a developer's perspective - you get the means to build a money-making thing, with first-class support to boot. Not a a bad deal.

## The Shopify App development experience

However, even if you've got some notches in your developer belt, you might hit some bumps along the road. If, for example, you come from only frontend or only backend work you might find yourself struggling through their tutorials. Heck, I've hit my fair share just trying to make sense of the architecture decisions they made, so I can follow best practices of each platform as I'm building my app.

So, having went through the experience myself, I can tell you that there are plenty of resources for learning the technologies involved and a (somewhat) active ecosystem around Shopify Apps. The problem begins when you're trying to connect all the parts together - to me, the [official tutorial](https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react) is a bit lacking in basic concept explanations. I know, I know, it's out of scope for Shopify to explain "external" things - like what a [custom Next.js server](https://nextjs.org/docs/advanced-features/custom-server) is, or how is [Koa](https://koajs.com/) different from [Express](https://expressjs.com/) and why they chose to use it over Express, or how to deploy your app to [Heroku](https://www.heroku.com/) in a way that keeps you sane and asleep at night, or... you get the picture.

Wait, that sounds like an awesome opportunity to make a mark in the tutorial space, isn't it? Well, this is the reasoning behind what you're reading right now. I want to make this the resource I wished I had when I started working on my app.

## This tutorial series

In practice, what I'm trying to achieve in this tutorial series is a full walkthrough of what it's like to develop a Shopify App - the thought process, the tools and the nitty-gritty details that no one is talking about in the official resources. I will walk you through from setting up your machine for work, getting an app idea (or verifying an existing one) all the way to deploying your app and (most likely) the marketing aspects you have in front of you.

You'll see that I prefer to dwell on some things and skip others. Generally speaking, I will elaborate on non-Shopify things in what I call **sidesteps**, which are mini-deep-dives for the uninitiated. I will do those for React, for Koa, for Next.js and other goodies you need to know _just enough_ of to get along.

This will make for a rather long tutorial series - I assume it will be around 60-70 videos when I'm done (ambitious me!), each one between 5-45 minutes, depending on the subject. Wherever possible I'd make an attempt to stick to 10-ish minute videos, because I too cannot stand never-ending series, but bare with me if I'm going over budget here and there.

## About going off the path

I'm posting this series because I wanted to have one like, it and couldn't find one. I might at some point decide that I'd like to take it in some direction that tangents from the original path.

If you're following my work and would like me to take some time to explain something that I haven't covered - just ping me at [hey@redcaptom.com](mailto:hey@redcaptom.com). I'll find the time and make a video, if possible, and I assume that if you're struggling with this you're note alone.

Now, let's do this!