Building a Lyric Blog with Nuxt.js and Strapi with Daniel Madalitso Phiri
Configuring Strapi admin
Hello explorers in this mission, we'll navigate through the Strapi admin panel and create content types to power our lyric blog. What we see right now is the Strapi admin panel. We'll start by exploring the general section. In marketplace, we have a number of plugins. Graph QL, email documentation, content types folder, roles and permissions, content manager, and the media library, the content types, builder, Roles and permissions, content manager, and media library are built in by default.
In this mission, we use our graph QL plugin with our Nuxt js application to make the content we create in Strapi accessible via a graph QL endpoint. In our plugin section, we have an overview of all the marketplace plugins that we have installed in our Strapi application. In settings, we have a couple sections global settings help us manage the media library and webhooks, the administration panel section, and helps us manage roles and users over the admin panel.
What we're looking at right now. The user and permissions plugin helps us manage roles of end users as well as third party providers to add end users to our application. We can also manage email templates and advanced settings under the plugin section, we have the media library, which helps us manage media assets in our admin panel.
And last, but definitely not least we have the content types builder, which helps us build out content schemas that describe the content that we can then present via our APIs. We'll go back to the Strapi admin homepage and click create your first content type. In Strapi, we have various content types today.
However, we will be building out a collection type, which is a collection of related fields. We click the button and the display name, we named these articles. Okay, continue. And now we can pick out the fields that are articles, collection type who have we'll start out with the text field for the title of our blog post.
In this case, the title of our song, we'll keep this short text and click. Add that other field. We use the date field to display the date our entry was published. We'll pick date as the type of date field, and then click add another field we'll click on the text field again, to add a description, two our blog posts, we'll select long texts time.
And then click add another field. we'll select the rich text editor for our body, and then click add another field. And last but not least to do the routing, we'll create the U ID based on our title, which will create a slug and save that finish. We save our content and wait for our server to restart. When our server is back up and running, you notice that on the left side menu in Strapi, we have articles appearing under collection types.
When we click articles, we can now add entries to our articles to do that. Click add new article let's name, this Gemini let's pick a date of February 14th, a description of a song. By what? So not let's paste in the lyrics and notice that UID field that we selected has auto-generated a slug for us. So we'll save our content because Strapi uses a draft and publish system.
Our content is currently in its draft state, and we'll have to publish it. Now that we have some entries we have to navigate to the settings section of Strapi in our settings section, under user and permission, select roles. What we're doing now is giving end users the ability to access content from the article's collection type via the API.
We have the option of either giving them access via an authenticated role. Using a JWT token or a public role available to anyone with the endpoint URL. We'll use the public role this time, click public, and scroll to your relevant collection type, which for us is articles, click find, which gives our end users access to making, get requests on our articles endpoint and find one, which gives our end users access on our article's endpoint.
For specific articles specified by an ID, save these settings and you get a message saying our role has been updated. By default, Strapi uses a rest API to deliver content. So in our browser, we'll head over to hopscotch dot IO an API request build on slash articles. We'll click send to make the get request.
We get a status code of 200. And in our response body we get our entry Gemini as the title description, a song by What So Not and the body as well as a slug, we'll go back to Strapi. . And end mission for now. In our next mission, we'll get started with using graph QL in Our application.