Quick Start Guide

For a step-by-step guide, please take a look at the following steps. This quickstart is really close to the FoodAdvisor (opens new window) application.

(Before continuing, please make sure on your machine. You can install the Yarn v1.2.0+ package here (opens new window).)

WARNING

In the 3.1.5 the Roles & Permissions section has been migrated into the Settings section.

2. Create an Administrator user

Navigate to http://localhost:1337/admin (opens new window).

Complete the form to create the first Administrator user.

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
• Type restaurant, and click Continue
• 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
• Type description under the BASE SETTINGS tab, in the Name field
• Click Finish
• Click the Save button and wait for Strapi to restart

Navigate back to , in the left-hand menu.

• Click the “+ Create new collection type” link
• Type category, and click
• Click the Text field
• Type name under the BASE SETTINGS tab, 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 Relation field
• On the right side, click the Category dropdown and select, Restaurant
• In the center, select the icon that represents many-to-many. The text should read, Categories has and belongs to many Restaurants
• Click Finish
• Click the Save button and wait for Strapi to restart

5. Add content to “Restaurant” Content Type

Navigate to , in the left-hand menu.

• Click on + Add New Restaurants button. Type Biscotte Restaurant in the Name field. Type into the Description field.
• Click Save.

If you navigate back COLLECTION TYPES - Restaurants (opens new window), you will see your restaurant listed in the entries.

6. Add categories to the “Category” Content Type

Navigate to COLLECTION TYPES - Categories (opens new window).

• Click on + Add New Categories button. Type French Food in the Name field. Select Biscotte Restaurant, on the right in the Restaurant (0) dropdown.

Navigate back to . You will see the French Food category listed in the entries.

• Click on + Add New Categories button. Type Brunch in the Category field. DO NOT ADD Biscotte Restaurant to the Restaurants dropdown on the right.
• Click Save.

You will see the Brunch category listed in the entries.

Navigate back to COLLECTION TYPES - Restaurants (opens new window).

• Click on Biscotte Restaurant.
• On the right, under Categories(1), select the Add an item..., and add Brunch as a category for this restaurant, and click the Save button.

You have now seen two different ways to use the relation field type to add and connect relations between Content Types.

Navigate to .

• Click the Public Role.
• Scroll down under Permissions, open the Application tab and find Restaurant. Click the checkbox next to find and findone.
• Repeat and find Category. Click the checkbox next to find and findone.
• Click Save.

8. Publish the content

By default, any content you create is saved as a draft. To publish your content:

Navigate back to

• Click the Draft button on the Brunch category.
• Click Publish button.
• In the Please confirm dialog, click Yes, publish button.
• Repeat for the French food category and Biscotte Restaurant.

9. Consume the Content Type’s API

Here we are! The list of restaurants is accessible at .

CONGRATULATIONS

👏 Congratulations, you have now completed the Strapi Quick Start. Where to go next?

• Consume your API with your favorite frameworks, frontend or backend programming languages just below.
• Learn how to use Strapi with React (Gatsby (opens new window) or ) or Vue.js (Nuxt.js (opens new window)).
• Have a look at the to deep dive into Strapi.
• Get help on our community forum (opens new window).
• Read the , contribute (opens new window) or on GitHub.
• Join the vibrant and active Strapi community (opens new window) on Slack.

[

React

Consume your API with React

]()

[

Vue.js

Consume your API with Vue.js

](https://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/integrations/vue-js.html)

[

Consume your API with Angular

]()

[

Next.js

Consume your API with Next.js

](https://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/integrations/next-js.html)

[

Nuxt.js

Consume your API with Nuxt.js

]()

[

GraphQL

Get started with GraphQL

](https://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/integrations/graphql.html)

[

Gatsby

Consume your API with Gatsby

]()

[

Gridsome

Consume your API with Gridsome

](https://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/integrations/gridsome.html)

[

Jekyll

Consume your API with Jekyll

]()

[

11ty

Consume your API with 11ty

](https://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/integrations/11ty.html)

Svelte

Consume your API with Svelte

]()

[

Sapper

Consume your API with Sapper

](https://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/integrations/sapper.html)

[

Ruby

Consume your API with Ruby

]()

[

Python

Consume your API with Python

](https://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/integrations/python.html)

[

Dart

Consume your API with Dart

]()

[

Flutter

Consume your API with Flutter

](https://strapi.io/documentation/developer-docs/latest/developer-resources/content-api/integrations/flutter.html)

[

Go

Consume your API with Go

]()

[

PHP

Consume your API with PHP