Introduction & Project Overview
Hello, you wonderful people. You probably were expecting to see my face. Fortunately for some or unfortunately for others, that's not going to happen because I am traveling. But what I want to do is start re-recording a new video series that I started in the past. If you're familiar with my website, Coding After 30, this was a project that I started where I wanted to post some awesome tutorials around Strapi, Astro, and Next.js.
I've started this tutorial and started slowly recording the videos, but because I procrastinated so much, I actually need to restart and redo all these tutorials to make them current in 2025. And so for the end of this month and beginning of April, I'm hoping to make really good progress.
And so in this video, we're going to start by setting up our Strapi 5 instance. But before we do that, I actually went ahead and finished building the Strapi 5 application, including the whole and complete front end with Astro. And the only piece I have left to build is the Next.js piece. So I actually have a lot of material to start recording the videos every couple of days and posting them here.
We're going to start by building our API first. Once that is completed, we'll move on to building our front end to see how we consume that API with Astro. The reason why I decided to go with Astro first is because if you're new to web development, all you really need to know is HTML, CSS, and JavaScript, and especially when you're cheating with Tailwind, that's even easier. And finally, we'll finish up by building that same project using Next.js.
Demo: Deconstructing the UI with Strapi
But before we do that, let's dive into the demo and see what we're going to build. I already created this project, but we're going to treat this as this is the UI that someone provided to you. And what you want to do is figure out how to represent this data in your back end, for which we're going to use Strapi, which is a headless CMS that allows you to represent your content and create an API endpoint front end could access to render that data to screen. And that's exactly what we're doing in this Astro project.
But for beginners, what we want to do is take a look at this landing page, which could be a UI that someone designed, and how do we think about representing this data in Strapi? For instance, if you take a look at the top navigation, the heading here, and we scroll all the way to the bottom and take a look at the footer, when we log in into our Strapi instance, which we will learn how to set up from scratch and do everything ourselves, if you go to our Content Manager, you're going to notice that we have a collection called Global. Well, this is a single type, and we'll learn more about them in detail.
And notice how here we have our header, which has the logo, it has our links (About, Blog), it has our call-to-action link. We also see our banner, which is our banner data that you see here at the top. It is represented inside this Global single type. And you could also see that our footer is represented as well.
If you take a look at the main landing page, where is this data coming from? So for this particular view and everything that you see here, from this form to these featured blog posts to these frequently asked questions to our person data, including this text, our image with its text, our features, and this hero section, it's all represented in Strapi in our collection type called Landing Page. As you could see here, all of our data is represented via these blocks, which are components that represent our Strapi data that we're going to learn how to build.
And the way we're able to access all data on our front end, we are able to easily expose those endpoints. For instance, if I go under Users Permission Roles and take a look at the Public, if we take a look at the landing page here, you could see that we're making a find request to this endpoint that our front end will consume to get the data. And that's exactly what we're doing here. I'm making a call to that endpoint. I'm looking for my landing page, and we're getting all this landing page data that's coming from Strapi.
So to get started, we're going to learn how to think about each and one of these sections as Strapi components, how to break it down into Dynamic Zones that allows non-technical users to easily manage content. And if all of that sounds to you like mumbo jumbo, no worries, we will figure it out.
Demo: Creating and Managing Dynamic Pages
We're also going to learn how to make dynamic pages. For instance, this page here, 'About', is a dynamic page that's coming from Strapi. I could have an 'About' page, I could have a 'Today is a good time to eat pizza' page, it doesn't matter because we're going to learn how in Strapi you could create dynamic pages where a non-technical user could easily add them to your front end.
So back in a Strapi instance, if we navigate back to the Content Manager, notice that we have a collection called Page. For now, we only have one page called 'About' that consists of two blocks, which is our person card and our heading. This is exactly what you see here. You see the person card and the heading. You know what, this heading, what the hell is it doing here? I'm able to go ahead and delete it. If I publish and I restart my application, look, the heading is gone. Now we just have this person card. So notice how a non-technical user is able to easily manage their website data from this Strapi admin. And we will learn more about how to build this as we go along.
We could easily add additional pages, and because we're using this concept of blocks where we created different blocks to represent different data types, we empower the user to be able to create any additional page in our Astro website.
Demo: Building a Blog with Strapi
And we're going to learn how to represent our blog, including our single blog view, which has this image, our title, information about the author, and the blog post. And if we take a look in our Strapi application, if we look at our articles and open one, you could see the data structures that we're using. For instance, we have the title, description, the slug, the featured image, content. And to make it more flexible, to allow the developer to add different types of content, we are also using our blocks concept, where we could create any different blocks that contain a specific type of data that we're able to add. For instance, here we have our featured article block, which has our featured articles, and that's exactly what you see displayed here on our blog: featured articles here.
For instance, if I go ahead and in Strapi remove one of the articles, and after I delete one of the posts, go ahead and republished, now because Astro is statically built, in order for me to see the changes, I have to redeploy my application. So now as you can see, we only have two items. And again, notice how I didn't have to do any code but was just able to make changes inside my Strapi admin.
So now that we have the basic overview of some of the things that we're going to learn, let's actually jump in and get started with Strapi.
Getting Started: Installing Strapi v5
To get started with Strapi, navigate to strapi.io and we're going to start by copying this command. Now that that's selected, we're going to jump into our terminal and get started. So here I'm in my terminal. I'm going to go ahead and paste that command: npx create-strapi-app@latest, and I'm going to call this 'server' because this is going to be the server or the backend for my front end that we're going to eventually build with Astro and then Next.js. Go ahead and click enter.
It's going to go ahead and do its magic. First thing it's going to ask you, are you okay to proceed? I guess it's important to ask for permission, so we're going to think about it and yeah, yeah, we're going to say yes. Once this starts, it's going to go ahead and do the spinny thing. And once the spinny thing is done, it is going to eventually, depending on your internet, which since I'm traveling, it's as if I'm not working from my cell phone or anything, which is perfectly fine, is going to go ahead and do the rest of its magic.
It's going to ask you some questions. You could self-host Strapi, but they also offer a convenient way where you could just host your Strapi instance as Strapi Cloud, which is not required at all, and it's not something we're going to do. So I'm going to go ahead and click skip for now. So our first most important question: do you want to use the default databases, which is SQLite? We're going to say yes, because this is a perfect database to start locally building our project. Do we want to start with example structure data? We're not amateurs here, so we're going to go ahead and say no, because we're going to create everything from scratch. Start with TypeScript? Yes, yes, yes, you're going to do TypeScript before people get mad at me. Install dependencies with npm? I'm going to go ahead and say no because I'm going to use yarn, but I'll let you decide if you want to click yes here. And initialize git repository? I'm going to say yes or no to do it later. You know what, I'm going to be lazy. I'm going to say yes. So we're going to initialize a git repository here.
First Launch & Admin User Setup
Once everything's done, because I didn't install dependencies, I'm going to CD into my server folder. This is where a Strapi application is. And before starting it, here we could say npm run... Man, I'm probably going to get judged that I want to use yarn, but don't worry about it. So let me install my dependencies first.
Once everything's installed, to start my Strapi instance, I'm going to go ahead and run yarn develop. Our project is going to start at localhost:1337. Go ahead and create your first Strapi admin user. I'm going to go ahead create mine with my super cool email. And for password, we're going to say monkey1234 because the chances of you guessing this password is going to be very difficult.
Now when we click Let's start, boom, and we're done. We are now set up with Strapi. Literally, if I talk less, we could have actually got this started even faster. So now that our Strapi instance is set up, in the next video, we're going to go ahead through all the most important parts of this left sidebar menu before getting started and learning about how to model our data in Strapi by building out our first collection and taking a look at our application.
Conclusion and What's Next
And once we get our bearings around Strapi, we're going to start taking a look at our UI and thinking about how we can represent this data. Most likely, we're going to start with the top bar, the top navigation, and the footer. But with that being said, go ahead, take a break, get some cup of tea. Now that we have Strapi set up, we are ready to move on to the next part.
And if you're ever wondering where these videos are going to be posted, they're going to be posted here on our website, codingafter30.com, and as well as YouTube. You'll be able to sign in, which is very easy, you just use your GitHub. Everything is absolutely free, nothing to pay. And just a reminder, we are replacing the old tutorials with this updated new tutorial that I just recorded. Sadly, you're not going to see my face because I am traveling, but not only will you have the video, you will also have the notes responsible for the session. So if you are just starting out and I post the video and come back here, most likely the new video will be here and the old videos will be removed, so this UI may look a little bit different. But with that being said, I'll see you in the next video. Bye-bye.
