Finally, an edge runtime that works out-of-the-box with Next.js, Remix, Nuxt, and more. Check it out!

Guides & Tutorials

Create a Custom Back-End for Jamstack Apps with Strapi

Guides & Tutorials

Create a Custom Back-End for Jamstack Apps with Strapi

A common misconception about the Jamstack is that Jamstack apps can’t have custom backends.

“But Jason,” the internet cries out in unison, “isn’t the whole point of a Jamstack app that there is no back-end?”

Not at all! The whole point of the Jamstack is that there’s no backend required (because we prerender as much content as possible and put the resulting static assets on a CDN). We often need custom backends to prerender from, and may also find ways to progressively enhance our apps by reading or writing data to a custom backend asynchronously based on user data or interactions.

Heads up! If the previous paragraph just confused the heck out of you, check out this overview of the Jamstack architecture.

In this two-part tutorial series, you’ll build a complete custom backend to house our custom data, then create a Jamstack app to both read and write to that backend.

In part 1 (this article), you’ll use Strapi to build a custom API to store data.

In part 2, you’ll build a Jamstack app that uses the custom backend to:

  • asynchronously load data from the backend
  • update the backend when users click a button

By the end of this series, you’ll create a fully functional frontend and backend for a Jamstack app deployed to production!

tl;dr

In this part of the tutorial, you will:

It may sound surprising, but there is no code required to build this backend. If you want to skip ahead, you can see the Jamstack app demo or review the frontend source code on GitHub.

Set Up a New Strapi backend on DigitalOcean

Our first step is to create the backend using Strapi. Because Strapi is a Node app, it requires a server in order to be used with build systems and handle asynchronous requests. In this tutorial, we’ll be using DigitalOcean to host Strapi.

Heads up! If you’re new to DigitalOcean, you can sign up to get $100 in DigitalOcean credit here.

Create a new Strapi Droplet using the DigitalOcean Marketplace.

Once you’ve logged into your DigitalOcean account, create a new Strapi Droplet from the Marketplace. You can find this by clicking "Marketplace" under the "Discover" section of the sidebar, then searching for Strapi.

Strapi in the DigitalOcean Marketplace

Click the “Create Strapi Droplet” button at the top right and you’ll be taken to the Droplet creation flow.

Configure your Droplet settings.

This tutorial is built using basic 2 GB / 1 CPU size, which should be more than enough to get most apps up and running.

DigitalOcean Droplet configuration for Strapi.

Choose whatever datacenter you prefer. Typically you’ll want to start with the datacenter closest to you. Add or choose your SSH key(s) in case you need to log into the Droplet from your terminal — we won’t do this during this tutorial, but it’s important to have this set up in case you need to make changes later.

Heads up! If you’re unfamiliar with SSH keys, DigitalOcean has written up a guide to adding SSH keys to Droplets.

Set SSH keys and a Droplet name for Strapi on DigitalOcean.

Next, choose whether you want to add tags (these are optional and only for organizing Droplets in DigitalOcean) and whether you want to enable backups. Backups cost 20% of the Droplet price, but they also automatically back up your whole backend weekly — it’s your call, but in my opinion they’re worth it.

Enable backups for a Strapi Droplet on DigitalOcean.

After choosing settings, click "Create Droplet" and you’ll see a progress bar as your new Droplet is provisioned and started.

Creation progress bar for a Strapi Droplet on DigitalOcean.

After a minute or so, the Droplet will be fully set up and started.

Copy the IP address of your new Strapi Droplet.

Once the Droplet starts, you’ll see its IP address, and if you hover there’s an option to copy it to your clipboard.

IP address of a Strapi Droplet on DigitalOcean.

Copy the IP address — you’re ready to configure Strapi!

Configure Your Strapi Instance

After the Droplet is created, your Strapi instance is up and running — no code required! The next step is to visit the IP address for your Droplet in the browser and configure Strapi.

On the first visit, Strapi shows a “getting started” page with a link to create an administrator.

Strapi’s getting started page.

Click the “Create the first administrator” button to get started.

Create an Administrator account.

The Administrator account has full privileges on the Strapi instance. If you’ve worked with content management systems like WordPress before, the administrator account works similarly here. If you’re not familiar with Administrator accounts, this account is allowed to do everything, so keep the credentials safe!

Create an administrator account for Strapi.

Set a username, password, and email so you’re able to log in and, if necessary, recover your account.

Create content types in Strapi.

After creating the Administrator account, you’ll see the Strapi dasbhoard. Since there’s no content yet, a panel is displayed asking you to create your first content type.

The empty state of the Strapi dashboard.

Click the “Create your first content-type” button.

Create a custom Corgi collection type.

Our app is going to display photos of corgis to site visitors. Each corgi photo will have two “reaction” buttons: you can pet or boop the corgi(s) of your choice.

To start, click the “collection” type and give it a name of “Corgi”.

Create a collection type in Strapi.

After clicking “Continue”, you’ll see an option to add fields. Click the “Text” field type and add a new field with the name “photo”. This will hold the URL for corgi photos, which will be sourced from Unsplash.

Add a text field in Strapi.

In the “Advanced Settings” tab, you also have the option to mark fields as required. This helps avoid accidental empty entries.

Mark a field as required in Strapi.

After choosing the advanced settings for the photo field, click “Add another field” and repeat the process for a “credit” and “title” field. When you’re done, you’ll have a “Corgi“ collection type with three text fields.

Strapi dashboard showing the custom Corgi type.

Next, you’ll need to create a “Reaction” type to handle pets and boops!

Add a Reactions collection type.

To track boops and pets, create another collection type and name it “Reaction”.

Create a Reactions collection type in Strapi.

Because this app only supports two reactions — boops and pets — choose the “Enumeration” field.

Enumeration field creation in the Strapi admin UI.

Name the field “type”, then place “pet” and “boop” in the values field on separate lines.

Configuration for the Reaction enumeration field in Strapi.

Each reaction needs to be associated with the corgi that spurred the reaction. To do this, add a “Relation” field and set it so that one corgi can have many reactions.

Strapi one-to-many relationship for reactions.

After saving the Reaction collection, open up the Corgi collection and you'll see a new reactions field that stores a relationship with our Reaction type.

Strapi automatically added a relationship field for the corgi type.

This means that each Corgi entry can have any number of pets and boops attached to it, but a pet or a boop can only be attached to one corgi.

Corgis do not share pets. They get very jealous.

Create corgi entries in the Strapi admin UI.

To keep this tutorial to a reasonable scope, we won’t cover creating corgis from the app frontend. However, the process you’ll follow for creating reactions later on will also allow you to create corgis with small adjustments.

For now, click the “Corgis” collection type in the top left of the Strapi sidebar and you’ll see an empty list.

Adding an entry through the Strapi admin UI.

Strapi tells us that there is no Corgi, so — wait.

Same screenshot of above, but with the Ghostbusters meme with Siguorney Weaver when she says, “There is no Dana, only Zuul.”

Sorry. Anyways.

Create a new corgi by clicking the “Add New Corgi” button at the top right. For the first corgi, use the following field values to add this very good corgo:

Entry creation form for the corgi type in the Strapi admin UI.

For the second, add a pupper in glasses:

Corgi entries listed in the Strapi admin UI.

Save, then check out the Corgi collection type to see both entries.

Set read and write permissions for content types in Strapi.

Strapi has fine-grained access control for each content type, so we can explicitly allow public access to read both corgi and reaction values, while only allowing creation of reactions.

For “Reaction” types, check the count, create, and find boxes. For “Corgi” types, check find and findOne.

Setting permissions for the public role in the Strapi admin UI.

Strapi also makes it straightforward to set up different types of authenticated access, which is great for more advanced use cases like commenting where someone should be able to edit or delete their own posts, but not other people’s.

Heads up! If you need to safely make requests using secret keys, I wrote a post about protecting API keys in Jamstack apps using serverless functions. Check it out!

After configuring the permissions, visit your Droplet’s IP address /corgis and you’ll see the corgi data returned as JSON.

JSON data returned from the Strapi API endpoint.

And just like that — with no code written and no servers logged into — you’ve built and deployed a full-on custom backend using Strapi!

Now’s a great time to take a quick break and recharge. In the next section, you’ll switch gears and learn how to build a frontend to read and write from this backend.

What Happens Next

In the next part of this series, you’ll use your custom Strapi backend to power a Jamstack site. In addition to loading the corgis into the page, you’ll also create the ability for site visitors to add reactions to each corgi and save those reactions to Strapi.

Check out these additional resources.

To go further, check out these resources for more information:

Share a custom backend you’ve built (or are planning to build) on Twitter!

Keep reading

Recent posts

Book cover with the title Deliver web project 10 times faster with Jamstack enterprise

Deliver web projects 10× faster

Get the whitepaper