Strapi Quickstart π
Ivana
Posted on February 15, 2021
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.
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:
Since I got the not Found
error page http://localhost:1337/admin I had to run npm run build
for building admin UI:
to be able to complete the form to create the first Administrator user when visiting http://localhost:1337/admin/auth/register-admin:
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":
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:
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!
Posted on February 15, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.