DEV Community

Chris Achinga
Chris Achinga

Posted on • Originally published at chrisdevcode.hashnode.dev on

Getting Started With strapi

Using Strapi

https://strapi.io/

What is Strapi

Strapi is a headless CMS

A headless content management system, or headless CMS, is a back-end-only content management system that acts primarily as a content repository. A headless CMS makes content accessible via an API for display on any device, without a built-in front-end or presentation layer

A list of headless cms - https://jamstack.org/headless-cms/

Creating a simple blog CMS with strapi

Setup strapi project:

Requirements

Need to have nodejs(Version 10 and above) and npm.

To start open your terminal/cmd and run:

npx create-strapi-app blog-cms

Enter fullscreen mode Exit fullscreen mode

You will be prompted to select an installation type, select Quickstart

selet-instalation-type.png

Installation proceeds

installing.png

Completed Installation:

completed.png

This command will set up the necessary files and folders for your projects. You don't have to understand everything at once, we'll go through the basics.

Once the project is set up, it will open a browser tab for the admin panel, where you will be required to create an admin account - http://localhost:1337/admin/auth/register-admin

admincreate.png

I will use a dummy user to create one for demo purpose: you will need first and last name, email, and a password.

admin.png

Once you have created the account, you will be redirected to an admin panel. Strapi admin has a simple to understand layout.

dash.png

Creating Content:

Say you are creating a blogging site, you will need something like an entry table on the database, tag/category table too, so in strapi, we create that from the content-type feature on strapi. We do that by creating a Content-Type in strapi.

Right on the admin dashboard, there is a button to 'create your first content-type

The first step is to create the name, a name could be of anything you think of, let's say a blog entry.

contentcreate.png

While giving it a name, strapi will automatically create a uid from the name. once you are done, click on continue to go on.

A modal box will appear after the click for you to create the fields for your blog entry.

fieldtypes-box.png

There are a lot of options based on the data type you want an entry to be of:

  1. Text
  2. Rich Text
  3. number
  4. date
  5. boolean
  6. relation
  7. email
  8. password
  9. enumeration (list of choices)
  10. media
  11. JSON
  12. uid

We will create a simple title and body:

So select the 'text' options.

Give it a name: 'title'

title.png

Click +add another field

Then select Rich Text for the article body:

Give it a name: 'entry'

entry.png

Click finish, that's it.

Click on save after that. the server will reload while saving the current content-type.

loadaing.png

That's it, you are done.

On the left of the dashboard, under the content-types, you'll see Blog Entries/the name of the content type you created.

Go ahead and add a few entries, one or two (to test of course)

entry1.png

After you have added an entry, and saved it, you have to publish it.

Remember: it's save then publish!

Access Your API

You may have a client side site that you'd want to show the blog or the content from your cms, Strapi has a built in api that lets you do that, after all that's the main point, aint it...

By default, strapi runs on port 1337 on your localhost. to acces the api, you use the url: http://localhost:1337/

In my demo: http://localhost:1337/blog-entries

api403.png

By default the api will be forbiden for public urls, to disable that we go settings:

(http://localhost:1337/admin/settings/application-infos)

in settings go to 'USERS & PERMISSIONS PLUGIN ' and select roles

There are 2 roles, authenticated and public

roles.png

Let's start with the authenticated, scroll down to permissions and select all and save. do the same for the public.

permisoms.png

After that let's go back to the API URL and refresh the page:

there we go:

api.png

As simple as that, now you can use strapi to manage dynamic content on your site.

NOTES:

To run the development server:

npm run develop

Enter fullscreen mode Exit fullscreen mode

Source Code

Github: https://github.com/ChrisAchinga/strapi-demo

Strapi Docs and Tutorials

Strapi Docs

udemy: strapi and next

Top comments (0)