DEV Community

loading...
Cover image for Strapi  Quickstart πŸš€

Strapi Quickstart πŸš€

Ivana
Software Engineer | Full Stack Web Developer | Rails, JavaScript, React | HTML/CSS
・3 min read

Strapi is the leading open-source headless content management system or headless CMS. A headless CMS provides a way to author content, but instead of having your content coupled to a particular output (like web page rendering), it provides your content as data over an API.

Strapi's name comes from the word Bootstrap and helps Bootstrap your API.

Alt Text

A full list of Headless Content Management Systems for Jamstack Sites can be found here.

Strapi is 100% Javascript and fully customizable. From it's documenation:

Strapi is a flexible, open-source Headless CMS that gives developers the freedom to choose their favorite tools and frameworks while also allowing editors to easily manage and distribute their content.

By making the admin panel and API extensible through a plugin system, Strapi enables the world's largest companies to accelerate content delivery while building beautiful digital experiences.

Features

Custom Content Structure

You can generate the admin panel in a few clicks and get your whole CMS setup in a few minutes.

Easy Content Management

Strapi's admin panel gives you an intuitive interface to create, edit and delete your content.

Developer-Friendly API

Strapi provides you with an API that will easily match your needs and you can Fetch any data you might need via a REST API or GraphQL endpoint.

Roles & Permissions

Strapi has a built-in user system that allows you to manage who can access what.

Customization

Every part of your application can be easily customized.

πŸš€ Getting Started

1. Install Strapi and Create a new project

npx create-strapi-app my-project --quickstart

Due to dependency conflict, I received an error right there and needed to fix dependencies. This works for me:

npm install --save --legacy-peer-deps

Description of `--legacy-peer-deps command is to ignore all peerDependencies when installing, in the style of npm version 4 through version 6.

More about npm install and dependencies can be found in Documentation for the npm registry, website, and command-line interface

2. Create an Administrator user

Navigate to http://localhost:1337/ and you will see:
Alt Text

Since I got the not Found error page http://localhost:1337/admin I had to run npm run build for building admin UI:
Alt Text

to be able to complete the form to create the first Administrator user when visiting http://localhost:1337/admin/auth/register-admin:

Alt Text

You will also need to npm run strapi develop to have "+ Create new collection type" link. For me, this link won't appear at all. After I run npm run strapi develop the problem was solved and I was able to click the link "+ Create new collection type":

Alt Text

3. Create a Restaurant Content-Type

Navigate to PLUGINS - Content Type Builder (opens new window), in the left-hand menu.

Click the "+ Create new collection type" link
Enter restaurant, and click Continue
Click the "+ Add another Field" button
Click the Text field
Type name in the Name field
Click over to the ADVANCED SETTINGS tab, and check the Required field and the Unique field
Click the "+ Add another Field" button
Click the Rich Text field
Type description under the BASE SETTINGS tab, in the Name field
Click Finish
Click the Save button and wait for Strapi to restart, you should have this created:

Alt Text

What’s next?

πŸš€Let's see what's next amazing coming after adding more features like:

4. Create a Category Content type
5. Add content to "Restaurant" Content Type
6. Add categories to the "Category" Content Type
7. Set Roles and Permissions
8. Publish the content

To connect with me please check my Github, LinkedIn or Twitter.

Thank you for reading!

Discussion (0)