Introduction

Have you ever wondered how to automate the deployment of your frontend projects, such as Next.js or Astro, whenever changes are made based on an external event, such as content changes in your backend or Headless CMS, without directly touching your code?

In this tutorial, you will learn how to trigger your frontend deployments based on when content changes in your Strapi CMS using Strapi webhooks alongside Vercel deploy hooks.

Triggering Frontend Deployments

What is Frontend Deployment?

Frontend deployment refers to publishing the latest version of a frontend code to a production environment.

Automatic deployment process

Reasons for Deployment

You would want an automatic redeployment of your frontend applications for several reasons. Here are a few reasons.

1. Content updates.
2. Performance Enhancement.
3. Template or Design Updates.
4. Plugin or Dependency Update.
5. Security patches, etc.

Methods of Triggering Deployments

Triggering frontend deployments is not limited to webhooks alone, although this method is popular and efficient.

• Automatic Deployments: These are Used to automate deployments by listening to events such as content changes or pushes to the repository and triggering actions in response. A good example is using webhooks.
• Continuous Integration/Continuous Deployment (CI/CD) Pipelines: CI/CD tools like Jenkins, GitLab CI, and GitHub Actions can automate the deployment process.
• Scheduled Deployments: Some systems allow deployments to be scheduled at specific times. A good example is the use of Cron jobs.
• API Calls: Custom backend scripts or codes can trigger deployment through API Calls.
• Manual or Forced Deployment: Through command-line interfaces or deployment tools provided by hosting platforms.

What is a Strapi Webhook?

Strapi CMS is the leading open-source headless CMS. It is 100% JavaScript / TypeScript and fully customizable. Strapi comes with an easily customizable admin panel and API. You can consume the Strapi API from any client (React, Vue, Angular), mobile apps, or even IoT devices using REST or GraphQL. You can also extend your content management with custom plugins in seconds. Among other features is the Strapi webhook.

A Webhook is a construct used by an application to notify other applications that an event has occurred. Developers can configure webhooks to trigger upon content creation, updates, or deletions.

The real power of Strapi webhooks lies in their ability to integrate seamlessly with external systems, enabling real-time updates and processes. For an in-depth understanding, Strapi's official documentation provides a comprehensive overview here.

You can learn more about Webhooks in this blog post: Webhooks explained and how to use them in Strapi.

What is a Vercel Deploy Hook?

Vercel is a cloud platform that provides developer tools and cloud infrastructure to build, scale, and secure a faster, more personalized web. Among these services is frontend hosting.

Vercel's Deploy Hooks allows you to create URLs that accept HTTP POST requests to trigger deployments and re-run the build step of your frontend application.

These URLs link uniquely to your project, repository, and branch, so there is no need to use an authentication mechanism or provide a payload to the POST request.

According to the Vercel official documentation, here are various ways you may want to use a deploy hook:

• Automatic deployments on content changes from a Headless CMS
• Scheduled deployments by configuring third-party cron job services to trigger the Deploy Hook
• Forced deployments from the command line

You can learn more about Vercel deploy hooks here.

Strapi Cloud Setup

As you know, we will demonstrate how to trigger deploy hooks in Vercel using Strapi webhooks.

We will start by setting up our Strapi backend locally and deploying to production using Strapi Cloud. While at this, we will create a webhook that will trigger our Vercel deploy hook. This will be a continuation of the Strapi backend project that we built in the final part of the Astro/Strapi tutorial series: Astro & Strapi Website Tutorial: Part 3 - Project Build.

For the frontend, we will deploy our Astro frontend application to Vercel and create a deploy hook. This will also continue the Astro frontend project that was built in the final part of the Astro/Strapi tutorial series.

1. Clone or Fork Strapi and Astro Projects

As shown below, we already have our Strapi backend application in this Github repository. The name of the repository is astro-strapi-tutorial.

Make sure to clone or fork the deployment branch by running the command below:

git clone --single-branch --branch deployment https://github.com/Theodore-Kelechukwu-Onyejiaku/astro-strapi-tutorial.git

The command above will clone a single branch, which is the deployment branch.

Project Folder Structure

If the cloning was successful, you should have the following file tree:

1
2
3
4
5
6
astro-strapi-tutorial/
┣ astro101/
┣ blog/
┣ images/
┣ ui/
┗ .gitignore

Inside the astro-strapi-tutorial repo you cloned above, you have the following directories:

• astro101: This is the source code for the part 1 of the Astro & Strapi Website Tutorial: Part 1 - Intro to Astro tutorial.
• blog: This is the Strapi backend. It houses the backend of your website for the Harry Potter universe.
• images: These are the images you used in the tutorial series.
• ui: This represents the complete Astro frontend UI.

2. Strapi Cloud Setup: Deploy Strapi Backend Project

Step 1: Log in to Strapi Cloud

Head over to Strapi Cloud and create a new project. If you are new to Strapi cloud, you can signup here.

You can choose to continue with any of the options above. For this tutorial, you will continue with GitHub since your code is already on Github.

Step 2: Create a new project

The next step will be to create your project. So click on any of the "Create project" buttons as shown below.

Step 3: Select a Plan

Make sure to select the plan that best fits your use case.

Step 4: Import a Github Repository

After selecting a plan, the next step would be to import the Github repository. Select your Github account in the Account input. And select the repo, which is astro-strapi-tutorial as the Repository of your project.

Step 5: Setup General Information

The next step would be to enter the Display name and the Git branch. The former could be any name, here it is called astro-strapi-backend. The latter is the Github branch that you want to deploy. And as highlighted earlier, it should be the deployment branch.

After filling it, make sure to click on "show advanced settings" as shown below.

Step 6: Advanced Settings and Create Project

Recall that your code contains some directories and that the blog directory represents your Strapi backend. For that reason, you have to set the Base directory for this project as /blog. You will leave the rest such as Region and Node version as default and click the "Create project" button to start the project creation

When the project is successfuly created, you should see the following:

Make sure to click on "Visit app" to view the deployed app. After that, fill in your credentials so as to access your Strapi backend.

3. Data Migration: Transfer Data from Local Strapi Instance to Strapi Cloud

NOTE: You can skip this section of Strapi data transfer if you have already populated your Strapi cloud instance with data.

When you access the backend in Strapi cloud, you notice that it is empty, even though you already have contents in your local Strapi instance, recall part 3 of the Astro/Strapi tutorial.

For this reason, you want to automatically run a data migration to transfer all your data including image assets, links, configurations, entity types and so on to the instance on your Strapi cloud.

Step 1: CD Into Local Strapi Instance

To do this, first you must CD into the directory where yur local Strapi backend instance resides. Recall that this is called blog.

cd blog

Step 2: Run the data transfer command

To transfer the data from your local Strapi instance to Strapi cloud run the command below:

npm run strapi transfer -- --to destinationURL

Replace the destinationURL with the full URL to the admin panel. Here is an example: https://generous-growth-3f7f68bbac.strapiapp.com/admin.

After running the command above, you will prompted to enter a transfer token which you will create in the next section.

Step 3: Generate Transfer Token

Click on Settings > Transfer Tokens > Add new Transfer Token to create a new transfer token.

Fill in the details. Make sure to set the the Token duration to Unlimited and the Token type to Full Access.

Finally, hit the "Save" button to create a transfer token. Make sure to copy the transfer token because you won't be able to see it again after you left that page.

Bravo! Now, magically transfer all your local data to Strapi cloud!

Step 4: Paste Transfer Token to Transfer Data

Now, paste in the transfer token to start the data transfer.

NOTE: Since you used PostgreSQL for this project, ensure that the PostgreSQL container is running. This will throw the error error: database "blog" does not exist if this condition is not met.

If this process was successful, you should see the following message displayed on our terminal:

When you go back to your Strapi cloud admin, you should now see your backed populated with local data!

Setting up Astro Frontend on Vercel

Now that we are done with the Strapi data transfer and Strapi cloud setup, we have to setup our Astro frontend which depends on our Strapi cloud instance for data. Here are the steps to take to set up an Astro application on Vercel.

Step 1: Add New Project

Proceed to log into your Vercel account. After successful login, make sure to click the Overview > Add New Project.

Step 2: Import Git Repository

By clicking the "Project" tab as shown above, you will be asked to import a project. Recall that your project is the in the repository called astro-strapi-tutorial.

Step 3: Configure Project

Next, you will have to configure your project.

Make sure to select the following:

• Project Name: This should be astro-strapi-tutorial
• Framework Preset: This should be set to Astro. Automatically, it should be detected when you select the Root Directory. Or you can manually select it.
• Root Directory: In the beginning, recall that the Astro frontend is in the ui directory. So you have to select ui as the root directory.
• Environment Variable: Your Astro frontend depends on the Strapi backend for data, like in the tutorial series. For this reason, you should create an environment variable Strapi_URL to hold the URL of our local Strapi instance. Since you have deployed it to Strapi cloud, you need to add the URL of our deployed Strapi Instance.

Once you are done with the configuration, you can hit the "Deploy" button.

One more thing! You forgot to tell Vercel that you want the deployment branch and not the main branch!

Step 4: Change Deployment Branch

You need to change your deployment branch. So click on Settings > Git and change the branch name from main to deployment.

Step 5: Redeploy Frontend

In order to update our Deployment branch, which is the deployment branch, Vercel requires that you push to it.

Update the code of your frontend by changing the index.astro, which is present in the src folder, to the following:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// .src/index.astro
---
export const prerender = true;
import Layout from "../layouts/Layout.astro";
import Hero from "../components/Hero.astro";
import About from "../components/About.astro";
import fetchApi from "../lib/strapi";

const pageData = await fetchApi({
  endpoint: "pages",
  page: "LandingPage",
  wrappedByKey: "data",
});

const heroData = pageData.find((pd) => pd.__component === "hero.hero");
const { heroText, heroDescription } = heroData;

const aboutData = pageData.find((pd) => pd.__component === "about.about");
const { aboutText } = aboutData;
console.log(aboutData.aboutPhoto.data.attributes.url);
const {
  aboutPhoto: {
    data: {
      attributes: { url: aboutPhotoURL },
    },
  },
} = aboutData;
---

<Layout>
  <h1>Hello World!</h1>
  <Hero {heroText} {heroDescription} />
  <About {aboutText} {aboutPhotoURL} />
</Layout>

In the code above, you only added <h1>Hello World!</h1> to the code. After that, make sure to commit your changes and push to the deployment branch.

Once that is done, your app will redeploy and be live as shown below!

Creating Deploy Hook on Vercel

The next step is to create a Deploy hook on Vercel. Click on Settings > Git. Here, you will name it "astro strapi deploy hook"

After creating the deploy hook, ensure to copy the URL of the hook. You will make use of the URL in the next section where a Strapi webhook will be created to trigger the deploy hook.

Creating a Webhook on Strapi

You have set up your Vercel deploy hook. The next step is to create a Strapi webhook that will trigger the deploy hook whenever data changes in the Strapi backend.

Proceed by clicking Settings > Webhooks > Create new webhook. Ensure to give it a name, and enter the URL of the Vercel deploy hook you created above.

Notice that you checked all the boxes for Entry and Media events. These means that you want this webhook to trigger whenever you create, update, delete, publish and unpublish an entry or media.

Now, test your Strapi webhook!

Making Changes to Strapi Backend

Navigate to your Strapi dashboard and make changes to the LandingPage that was created using Strapi Dynamic Zones. Learn more about Strapi Dynamic zones: How to Create Pages on the fly with Dynamic Zone.

Modify the heroText component of the LandingPage Dynamic zone. You will add "Theodore" to the text to make it "Welcome to Theodore Wizarding World".

Feel free to change this to any text you prefer.

When you hit the "Save" button, you should see the deployment process starting up in our Vercel. This means the content change has executed the Strapi webhook, triggering the deploy hook.

Also note that this was not an automated deployment by code change, CLI, or manual deployment. It was done using the Deploy Hook, as seen below!

Congratulations!

After creating and triggering the Vercel deploy hook using the Strapi webhook and refreshing our Astro frontend page, you should see that "Theodore" is now displayed in the frontend hero text! Congratulations!

Conclusion

In this tutorial, we have delved into the crucial topic of automated frontend deployments and why they are indispensable. We have also explored the various methods to trigger deployments of a frontend application, underscoring their importance in the development process.

Furthermore, we demonstrated this process using a project deployed to the Strapi cloud and a live Astro frontend app on Vercel, a cloud platform that also provides frontend hosting.

To wrap it up, we created a webhook on Strapi that triggers automated deployment of our Astro frontend application on Vercel when events like creating, updating, deleting, publishing, and unpublishing an entry occur.

Remember to share this article if you find it very helpful or you could explore related contents down below.