Strapi  Quickstart 🚀
Tags: javascript, strapi, tutorial, npm
Published: 2021-02-15 04:56:58

[Strapi](https://strapi.io/) 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](https://dev-to-uploads.s3.amazonaws.com/i/wux00ysf1fm3pgd4t45n.png)

A full list of Headless Content Management Systems for Jamstack Sites can be found [here](https://jamstack.org/headless-cms/).

Strapi is 100% Javascript and fully customizable. From it's [documenation](https://strapi.io/documentation/developer-docs/latest/getting-started/introduction.html#what-is-strapi):

 
 >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](https://docs.npmjs.com/cli/v6/commands/npm-install)

### 2. Create an Administrator user
Navigate to http://localhost:1337/ and you will see:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s9dfdf9u1jwb8ckllw6n.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/3bcgfbocaunt7o3ho31k.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/99nbydjmgos6h15kqnhe.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/rbupgp0tbrtjklu2llcm.png)

### 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](https://dev-to-uploads.s3.amazonaws.com/i/ivir752p0bd6a5j2wndf.png)

### 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](https://github.com/ivanadokic), [LinkedIn](https://www.linkedin.com/in/ivana-dokic/) or [Twitter](https://twitter.com/LloydPile).

Thank you for reading!