Astro & Strapi Website Tutorial: Part 2 - Intro to Strapi

Introduction

In the previous Part of this tutorial series, we learned about Astro, a popular frontend framework designed for speed and content-based websites.

We also explored Static Site Generation, pre-rendering, layouts and components, and linking between pages. With the ability to modify Astro's behaviour, we transitioned from static site generation to server-side generation.

Lastly, we also briefly discussed other cool features of Astro, such as Content Collections, View Transitions, Prefetches, CSS framework integrations, Astro DB, Astro Islands, and Client Directives.

In Part 2, we will explore Strapi, a robust CMS. We will also explore Strapi installation, Strapi Content type builder, Collection type, enabling API access, Internationalization, Dynamic zones, and more.

Let's get started!

Tutorial Outline

This post is Part 2 of a three-part series on our Astro and Strapi tutorial. The outline for the next post can be found here.

• Part 1: Introduction to Astro
• Part 2: Introduction to Strapi
• Part 3: Building the Main Project

What is Strapi?

Strapi is an open-source, Node.js headless content management system (CMS) that helps developers create and manage content-rich experiences for any digital device. Strapi can be used to develop websites, mobile apps, eCommerce sites, and APIs.

It is the leading open-source headless CMS, fully customizable, 100% JavaScript/TypeScript.

To learn more about Strapi, please visit the Strapi docs.

Strapi Installation

To create a Strapi CMS application, run the command below and give it the name blog:

npx create-strapi-app@latest blog

Like we did for Astro in Part 1, we won't follow recommended but custom settings. So, we make sure to do the following:

• Select JavaScript as preferred language.
• We will select Postgres as the database for our application. We already have a Postgres Instance up and running by Docker. However, you can select any other database
• Create the database name as blog.
• Select the default Host and PORT.
• Set username as "postgres".
• Set our preferred password.
• And we won't be enabling any SSL connection.

IMPORTANT: You don't necessarily need to use Postgres for this tutorial. You could use SQLite, which is Strapi's default database.

Start Application

After successful installation, we want to start up the Strapi Admin dashboard. Run the command below:

cd blog
npm run develop

Remember that we gave the name of our database as blog. Unfortunately, Strapi can't create this database for us. For this reason, we will get the following error:

To resolve this, we need to go into our PostgreSQL and create the database blog.

Because we are running a Postgres instance via Docker and are logged into the instance, we will execute the command below:

psql -U postgres -c "CREATE DATABASE Blog;"

In the command above, we used psql, a terminal-based front-end used to send queries to PostgreSQL.

If successful, you should see the command and result below:

docker exec -it f3e15d8dc7885bd7c55673aff91b4e02487f5ba000549311fbeee953c3c4a04b /bin/sh
/ # psql -U postgres -c "CREATE DATABASE Blog;"
CREATE DATABASE
/ # 

Now that we have created the database, let's attempt to build the Strapi Admin interface by rerunning the command:

npm run develop

After running the command above, we should see the following in our terminal:

Futhermore, after the successful building of the Strapi Admin dashboard, our browser will open the URL http://localhost:1337/admin automatically. If it doesn't open, we make sure we visit it manually.

Lastly, enter your Strapi Admin credentials to log in.

Create Blog Collection Type

What is a Strapi Collection Type?

In Strapi, a collection type is a content type that can manage multiple entries of the same type of content, such as blog posts, products, or users.

Create a Strapi Collection Type and Fields

For this tutorial, we create a content type to represent the articles or blog posts we will store inside our CMS. We will call this Blog.

Most importantly, click the "ADVANCED SETTINGS" tab and enable Internationalization. We will be translating the entries of our collection into different languages.

Click the "continue" button to set up how the Strapi Collection type should look like. There are several types, such as text, JSON, image, number, etc. You can always check out Strapi docs.

Create Content Type Fields

For our first field, we will select type of Text and name it tile. This will be the title of blog posts.

Now, we should have the following fields:

We will lick the "finish" and "save" buttons and wait for Strapi to restart.

Add Data to Collection

We have created the collection type; let us create some entries.

Note that we can fill it with any data of our choice. Also, note that content is of the markdown type.

Proceed to enter the metaTitle and metaDescription. Also notice there is a little button to generate the slug of our blog content. See the image below:

For the image data, make sure to click on the image icon. Notice we don't have any images inside our media library.

So, click on the "Add new assets" button. This will allow us to select multiple files and just add them to Strapi.

As shown in the GIF above, we will add 12 image assets. We select only one image and click the "finish" and "save" buttons.

NOTE: Ensure you click the "publish" button to save the entry; otherwise, it is still a draft.

Internationalization

Next, we need to make sure we enable Internationalization in Strapi.

What is Internalization in Strapi?

Internationalization (i18n) lets you create many content versions, also called locales, in different languages and for other countries.

To enable Internationalization, click on Settings > Internalization > Add new locale.

Select simple "Spanish (es)" as the locale and leave the display name as it is.

Now that we have enabled Internationalization, we can see a dropdown menu in the image below, from which we can select between the two languages.

With Internationalization enabled, we can now create a new article in either Spanish or English.

However, we want to translate the recently created article (see image above) into Spanish. So click on the article.

When we switch from English to Spanish as shown above, notice how it automatically fills up the information. If we click on the "Fill in from another locale" just below the dropdown, we could directly translate this particular blog post.

When we switch from English to Spanish, as shown above, notice how the information is automatically filled in. If we click on "Fill in from another locale" just below the dropdown, we could directly translate this particular blog post.

Finally, we click the "save" and "publish" buttons. And with that, we have two articles published, one in English and another in Spanish.

Enable API Public Access

The blog post we have created is not yet accessible to the public. For example, an Astro UI can not fetch this information just yet. For this reason, we need to allow public access to our blog.

Navigate to Settings > Role > Public and click the Blog collection type. As shown in the image below, check find and findOne to enable public access to fetching a single and all blog posts.

The find allows us to make HTTP GET requests to /api/blogs so as to get all the blog posts. And the /api/blogs/id allows us to make HTTP GET requests to grab the actual blog post via REST API call from the Strapi CMS. After that, we hit the "save" button.

Now when we go to http://localhost:1337/api/blogs?populate=* we get the following information:

NOTE: We added ?populate=* to populate the response with everything that belongs to the blog post. Learn about Demystifying Strapi's Populate & Filtering

From the response, we get all the information including the locale, image, and localizations.

Now, let's move on to the next step. Populating the Blog collection with blog posts is a straightforward process that you can easily manage, giving you full control over your content.

Create Dynamic Zone in Strapi

With the Content Builder in Strapi headless CMS, we can create a new Collection type. This new collection will be a Dynamic zone.

What is Strapi Dynamic Zones?

Strapi Dynamic zones allow us to build flexible, customizable, and reusable content models or components within our Strapi applications. For example, we can easily create landing pages using the Strapi Dynamic Zones.

Create Landing Page Dynamic Zone

Here is how we will create a landing page Dynamic Zone.

• Click the "Create new collection type" button.
• Enter the Display name as Page.
• Hit "continue", and scroll down to the bottom and click on "Dynamic zone".

• Add a new Dynamic zone by giving it the name LandingPage. And then click on the "Add components to the zone" button to add a component to the Dynamic Zone.

• The first component we will add to the LandingPage Dynamic zone is hero component. So, set the display name as hero and category as hero as well. And then click the "Add first field to the component" button.

• For the first field of the hero component, we will create a Text field called heroText. It will be of type Short text.
• The second field will be called heroDescription and type Short text too.
• Then we finally click the "finish" button.

After successfully creating the dynamic zone for our landing page, we should see something like this:

Create About Component

In the image above, we only have the hero component. We also want to have an about component, which we will create similarly to the hero component.

• Create a new component called about
• Give it the following fields:
  1. aboutText: This should be Short text.
  2. aboutPhoto: This should be a Single Media because we will use it as an avatar.

After creating the about component, we should now see the following.

Create an Entry

After successfully creating the landing page Dynamic Zone, notice that by the left-hand side of the Strapi Admin, we now have the Page Collection type. So, let's create an entry!

Click on Page > Create new entry > Add a component to LandingPage to add an entry.

We will be presented with the image above showing the hero and about components. Click the hero component to add its text and description.

Do the same for the about component by adding a text and an image.

Regardless of the UI we use, we will be able to pick up the information above when we start making API requests.

Enable Public Access to Page Collection Type

Finally, make sure to enable public access for the Page collection type by checking find.

Our intention in enabling public access is to be able to access the pages we have using the endpoint /api/pages. Don't forget to hit the 'save' button to apply these changes.

Now, when we navigate to localhost:1337/api/pages?populate[LandingPage][populate]=* on our browser, we get the information about the hero component, about component, and other information:

Learn more about population in Demystifying Strapi's Populate & Filtering blog post.

The good thing about Dynamic zone is that we could have lots of usecases asides a landing page. They could be a review section, call-to action section, news letter subscription and so on.

All these sections can be managed as Dynamic zones within Strapi. Then, using any popular front-end framework of our choice, such as Astro, we can grab the content from Strapi and add it to our UI.

Conclusion

In Part 2 of the tutorial series, we have looked at an introduction to Strapi, Strapi installation, Strapi Content type builder, Collection type, enabling API access, Internationalization, Dynamic zones, and more. This is a testament to the cool features of Strapi headless CMS!

In the next part, we will see how to build a user interface by using the components created in this landing page Dynamic Zone. Furthermore, we will see how to display the blog posts. Let's go!

Resources

• You can find the GitHub with the complete code for this tutorial here. Make sure to select the branch part-2.

Youtube Video Resources

• Astro Crash Course Part 1: Project overview and introduction
• Astro Crash Course Part 2: Astro 101 introduction to the basics
• Astro Crash Course Part 3: Server-Side Rendering
• Astro Crash Course Part 4: Introduction to Strapi
• Astro Crash Course Part 5: Building the main project
• Astro Crash Course Part 6: Final steps and wrap up

Register For Our Upcoming Stream Event with Ben Holmes from Astro

We are excited to have Ben Holmes from Astro chatting with us about why Astro is awesome and best way to build content-driven websites fast.

Topics

• What's new in Astro
• Content Layer
• Webhooks

Join us to learn more about why Astro can be great choice for your next project.