- Quick Start Guide
- 1. Install Strapi and Create a new project
- 2. Create an Administrator user
- 3. Create a Restaurant Content Type
- 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
- 9. Consume the Content Type’s API
Quick Start Guide
Get ready to get Strapi up and running in less than 3 minutes 🚀.
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 Node.js and npm are properly installed 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.
1. Install Strapi and Create a new project
yarn create strapi-app my-project --quickstart
npx create-strapi-app my-project --quickstart
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 clickContinue
- Click the Text field
- Type
name
in the Name field - Click over to the ADVANCED SETTINGS tab, and check the
Required field
and theUnique 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
4. Create a Category Content type
Navigate back to PLUGINS - Content Type Builder (opens new window), in the left-hand menu.
- Click the “+ Create new collection type” link
- Type
category
, and clickContinue
- 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 theUnique 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 COLLECTION TYPES - Restaurants (opens new window), in the left-hand menu.
- Click on + Add New Restaurants button. Type
Biscotte Restaurant
in the Name field. TypeWelcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.
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. SelectBiscotte Restaurant
, on the right in the Restaurant (0) dropdown. - Click Save.
Navigate back to COLLECTION TYPES - Categories (opens new window). 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 ADDBiscotte Restaurant
to theRestaurants
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
theAdd 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.
7. Set Roles and Permissions
Navigate to GENERAL > Settings > USERS & PERMISSIONS PLUGIN > Roles (opens new window).
- 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 COLLECTION TYPES - Categories (opens new window)
- 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 http://localhost:1337/restaurants
(opens new window).
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 Next.js (opens new window)) or Vue.js (Nuxt.js (opens new window)).
- Have a look at the Tutorials (opens new window) to deep dive into Strapi.
- Get help on our community forum (opens new window).
- Read the source code (opens new window), contribute (opens new window) or give a star (opens new window) on GitHub.
- Follow us on Twitter (opens new window) to get the latest news.
- Join the vibrant and active Strapi community (opens new window) on Slack.
Consume your API using one of these technologies:
[
React
Consume your API with React
[
Vue.js
Consume your API with Vue.js
[
Angular
Consume your API with Angular
[
Next.js
Consume your API with Next.js
[
Nuxt.js
Consume your API with Nuxt.js
[
GraphQL
Get started with GraphQL
[
Gatsby
Consume your API with Gatsby
[
Gridsome
Consume your API with Gridsome
[
Jekyll
Consume your API with Jekyll
[
11ty
Consume your API with 11ty
[
Svelte
Consume your API with Svelte
[
Sapper
Consume your API with Sapper
[
Ruby
Consume your API with Ruby
[
Python
Consume your API with Python
[
Dart
Consume your API with Dart
[
Flutter
Consume your API with Flutter
[
Go
Consume your API with Go
[
PHP
Consume your API with PHP