Deploying Headless Strapi to Netlify and Digital Ocean — Part 1: Intro

This is really my first tech article and it's a 4-parter. If you have any corrections, comments, or pro tips let me know!

Quick note: If you want the quick and easy solution Digital Ocean offers a 1-click install button for Strapi on a $10/month server. It's great if you don't have an existing Strapi project (Shameless plug: Here's my referral link for $100 in credit)

So why did I do the deployment myself?

1. Be cheap and save $5 a month by running it headless
2. I love figuring these things out
3. I thought it would be easier to configure the admin UI to be on a subdomain

This guide assumes:

1. You already own a domain and it's using Netlify DNS
2. You have a Digital Ocean account
3. You have an existing strapi project in a git repository
4. We will be using MongoDB as our backend through MongoDB Atlas (they have a generous free tier!)

---

Versions
Strapi -- 3.0.1
Node -- 12.18.0
NPM -- 6.14.5

---

I've been wanting to build this side project for a while and this is a perfect opportunity to build it and share how I first deployed and set it up. My side project is Front End Cuts, a place to create, contribute, manage, and search for code samples for front end development. While writing this article the only thing you can do is signup/signin and create/view a cut. More will be added later so please don't comment on the ugly look 😂

This article is not for extreme beginners as I'm assuming you have some knowledge of strapi, linux/unix commands, and mongodb. Throughout the different parts I will link to guides for things that do not directly contribute to deploying Strapi.

Here's what we want:
frontendcuts.dev --> Frontend Nuxt site
admin.frontendcuts.dev --> Strapi Admin Panel (React app)
api.frontendcuts.dev --> Strapi server and API

Let's dive in!

Go to Part 2: The Admin Panel UI