mirror of
				https://github.com/strapi/strapi.git
				synced 2025-10-31 09:56:44 +00:00 
			
		
		
		
	
		
			
				
	
	
		
			641 lines
		
	
	
		
			29 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
			
		
		
	
	
			641 lines
		
	
	
		
			29 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| # Tutorial
 | |
| 
 | |
| This **tutorial** is written for developers to **teach and explain** a step-by-step introduction to Strapi. (The [Quick Start Guide](quick-start.md) is a more concise **How-to** version.) This tutorial takes you through the beginning steps of how you start a project like **"FoodAdvisor"** ([Github](https://github.com/strapi/foodadvisor/))([Demo](https://foodadvisor.strapi.io/)).
 | |
| 
 | |
| You get a good overview of the features developers love found in Strapi.
 | |
| 
 | |
| <iframe width="800" height="450" src="https://www.youtube.com/embed/vulcVRQ4X8A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 | |
| 
 | |
| By following this tutorial, you install and create your first Strapi project.
 | |
| 
 | |
| ::: tip NOTE
 | |
| 
 | |
| You need to have **_Node.js and npm_** installed on your system before following these steps. If you do not have Node.js and npm installed (or are not sure), please visit our [installation requirements](install-requirements.md).
 | |
| 
 | |
| :::
 | |
| 
 | |
| **Table of Contents**
 | |
| 
 | |
| [[toc]]
 | |
| 
 | |
| ## 1. Install Strapi and create a project
 | |
| 
 | |
| Navigate to your parent `Projects/` directory from your command line.
 | |
| 
 | |
| ::: tip NOTE
 | |
| 
 | |
| In this tutorial, the example assumes a **Projects** folder on your **Desktop**. However, this is not required, and you may put your project where you want.
 | |
| 
 | |
| :::
 | |
| 
 | |
| **Path —** `~/Desktop/Projects/`
 | |
| 
 | |
| Use **only one** of the following commands to create a new Strapi project
 | |
| 
 | |
| :::: tabs
 | |
| 
 | |
| ::: tab yarn
 | |
| 
 | |
| Use **yarn** to install the Strapi project (**recommended**). [Install yarn with these docs](https://yarnpkg.com/lang/en/docs/install/)
 | |
| 
 | |
| ```bash
 | |
| yarn create strapi-app my-project --quickstart
 | |
| ```
 | |
| 
 | |
| :::
 | |
| 
 | |
| ::: tab npx
 | |
| 
 | |
| Use **npm/npx** to install the Strapi project
 | |
| 
 | |
| ```bash
 | |
| npx create-strapi-app my-project --quickstart
 | |
| ```
 | |
| 
 | |
| :::
 | |
| 
 | |
| ::::
 | |
| 
 | |
| The command creates a Strapi project `my-project/` folder within your parent `Projects/` directory.
 | |
| 
 | |
| ::: tip NOTE
 | |
| 
 | |
| When you create a new Quick Start(`--quickstart`) project, Strapi downloads the node modules and the Strapi files needed. Using `--quickstart` automatically completes an **additional** step of **building the administration panel** for Strapi and then **starting** Strapi for you. This opens the browser for you and brings you to the [Welcome](http://localhost:1337/admin/plugins/users-permissions/auth/register) page.
 | |
| 
 | |
| You can replace the `my-project` name with any name you want. E.g., `yarn create strapi-app my-foodadvisor-project --quickstart` creates a folder `./Projects/my-foodadvisor-project`.
 | |
| 
 | |
| :::
 | |
| 
 | |
| You see something like this. The output below indicates that your Strapi project is being downloaded and installed.
 | |
| 
 | |
| ```bash
 | |
| yarn create v1.17.3
 | |
| [1/4] 🔍  Resolving packages...
 | |
| [2/4] 🚚  Fetching packages...
 | |
| [3/4] 🔗  Linking dependencies...
 | |
| [4/4] 🔨  Building fresh packages...
 | |
| success Installed "create-strapi-app@3.0.0-beta.14" with binaries:
 | |
|       - create-strapi-app
 | |
| [#####################################################################] 71/71Creating a new Strapi application at /Users/paulbocuse/Desktop/Projects/my-project.
 | |
| 
 | |
| Creating a quickstart project.
 | |
| Creating files.
 | |
| Dependencies installed successfully.
 | |
| 
 | |
| Your application was created at /Users/paulbocuse/Desktop/Projects/my-project.
 | |
| 
 | |
| Available commands in your project:
 | |
| 
 | |
|   yarn develop
 | |
|   Start Strapi in watch mode.
 | |
| 
 | |
|   yarn start
 | |
|   Start Strapi without watch mode.
 | |
| 
 | |
|   yarn build
 | |
|   Build Strapi admin panel.
 | |
| 
 | |
|   yarn strapi
 | |
|   Display all available commands.
 | |
| 
 | |
| You can start by doing:
 | |
| 
 | |
|   cd /Users/paulbocuse/Desktop/Projects/my-project
 | |
|   yarn develop
 | |
| 
 | |
| Running your Strapi application.
 | |
| 
 | |
| ```
 | |
| 
 | |
| Next, you notice the following that builds your Strapi administration panel and automatically starts up Strapi:
 | |
| 
 | |
| ```bash
 | |
| > my-project@0.1.0 develop /Users/paulbocuse/Desktop/Projects/my-project
 | |
| > strapi develop
 | |
| 
 | |
| Building your admin UI with development configuration ...
 | |
| 
 | |
| ✔ Webpack
 | |
|   Compiled successfully in 52.21s
 | |
| 
 | |
| [2019-07-30T15:21:17.698Z] info File created: /Users/paulbocuse/Desktop/Projects/my-project/extensions/users-permissions/config/jwt.json
 | |
| [2019-07-30T15:21:17.701Z] info The server is restarting
 | |
| 
 | |
| [2019-07-30T15:21:19.037Z] info Time: Tue Jul 30 2019 17:21:19 GMT+0200 (Central European Summer Time)
 | |
| [2019-07-30T15:21:19.037Z] info Launched in: 910 ms
 | |
| [2019-07-30T15:21:19.038Z] info Environment: development
 | |
| [2019-07-30T15:21:19.038Z] info Process PID: 70615
 | |
| [2019-07-30T15:21:19.038Z] info Version: 3.0.0-beta.14 (node v10.16.0)
 | |
| [2019-07-30T15:21:19.038Z] info To shut down your server, press <CTRL> + C at any time
 | |
| 
 | |
| [2019-07-30T15:21:19.038Z] info ☄️  Admin panel: http://localhost:1337/admin
 | |
| [2019-07-30T15:21:19.039Z] info ⚡️ Server: http://localhost:1337
 | |
| 
 | |
| ```
 | |
| 
 | |
| 
 | |
| 
 | |
| ::: tip NOTE
 | |
| Using the `--quickstart` flag installs Strapi using an [SQLite](https://www.sqlite.org/index.html) database. You may, at any time, leave off the **--flag**, but you need to follow a few configuration steps for your database choice. **You need to have your database choice installed and running locally before creating your project.**
 | |
| 
 | |
| If you would like to use **MongoDB** in production, you need to [install, run, and use MongoDB to develop your Strapi project (in development)](../guides/databases.md#mongodb-installation).
 | |
| :::
 | |
| 
 | |
| You are now ready to create a new **Administrator** and new front-end **User**.
 | |
| 
 | |
| ## 2. Create an Administrator and front-end User
 | |
| 
 | |
| The first step is to create an **Administrator** (or "root user") for your project. An **Administrator** has all administrator privileges and access rights. (You can read more about why **Administrators** and front-end **Users** are separate [here](https://blog.strapi.io/why-we-split-the-management-of-the-admin-users-and-end-users/).)
 | |
| 
 | |
| You need to complete the following fields:
 | |
| 
 | |
| - **Username**, create a username for login access to your project, e.g., `paulbocuse`
 | |
| - **Password**, create a unique password for logging into your project
 | |
| - **Email address**, this is used for recovery
 | |
| - Check **Receive news**, this is optional but **recommended**
 | |
| - Click the **Ready to Start** button
 | |
| 
 | |
| 
 | |
| 
 | |
| After your **Administrator** registration is complete, you see the Strapi _Administration Dashboard_:
 | |
| 
 | |
| 
 | |
| 
 | |
| **Administrators** and front-end **Users** are separate roles.
 | |
| 
 | |
| **A.** An **Administrator** has access and rights to the Administration Dashboard (or backend) of Strapi. **Administrators** can, for example, add content, add plugins, and upload images.
 | |
| 
 | |
| **B.** A front-end **User** is someone who interacts with your project through the front-end. A front-end **User** can, for example, be an "Author" of an article, make a purchase, has an account, leaves a review, or leaves a comment.
 | |
| 
 | |
| Up until this point, you have created an **Administrator**, and so you next want to create a front-end **User**.
 | |
| 
 | |
| ::: tip NOTE
 | |
| 
 | |
| It is not necessary to always create a front-end **User** for your **Administrators**; in this case, the **Administrator** is also a front-end **User** as an "Author" of content in the application.
 | |
| 
 | |
| :::
 | |
| 
 | |
| - Click on `Users` located under **CONTENT TYPES** in the left-hand menu
 | |
| - Click the blue **+ Add New User** button in the top right corner
 | |
| - Next, complete the `Username`, `Email`, and `Password` fields
 | |
| - Select `ON` for the **Confirmed** toggle field
 | |
| - To the right, under **Role**, select `Authenticated`
 | |
| - Save the new user by clicking the blue **Save** button (top right)
 | |
| 
 | |
| 
 | |
| 
 | |
| You are now ready to create your first **Content Type**.
 | |
| 
 | |
| ## 3. Create a new Content Type called "Restaurant"
 | |
| 
 | |
| **Content Types** are a collection of entered data represented by fields. For example, a **Content Type** called `Restaurant` may be intended to display information regarding restaurants. A `restaurant` **Content Type** could have fields that include a `name`, the main `image`, and a `description` - _at a minimum_. However, a `restaurant` could also have a `category` or multiple `categories`, and a `restaurant` could perhaps need to show `hoursofoperation`.
 | |
| 
 | |
| A **Content Type** can be considered a sort of _blueprint_ for the data created. In other words, a **Content Type** is the schema of the data structure.
 | |
| 
 | |
| The next section guides you through the steps needed for each of these above **Content Type** fields.
 | |
| 
 | |
| ::: tip NOTE
 | |
| 
 | |
| Additional **Restaurant** themed **Content Types** and fields can be seen in the [FoodAdvisor demo site](https://foodadvisor.strapi.io/).
 | |
| 
 | |
| :::
 | |
| 
 | |
| ### The Restaurant Content Type
 | |
| 
 | |
| Go to the **Content Type Builder** plugin, located in the left menu: Under **PLUGINS** -> **Content Type Builder**
 | |
| 
 | |
| You are now able to see the three available **Content Types**. At this point, three Content Types are available `Permission`, `Role`, and `Users`.
 | |
| 
 | |
| 
 | |
| 
 | |
| You need to create a new **Content Type** for `Restaurants`.
 | |
| 
 | |
| 1. Complete these steps to **Add a Restaurant Content Type**
 | |
| 
 | |
| - Click the `+ Add A Content Type` link (under existing **CONTENT TYPES**)
 | |
| - Enter a **Name** for your new **Content Type** (call this `restaurant`), and you can write `Restaurant Listings` for the **Description**
 | |
| - Click the `Done` button
 | |
| 
 | |
| 
 | |
| 
 | |
| ::: tip NOTE
 | |
| 
 | |
| The Content Type **Name** is always **singular**. For example, `restaurant` not `restaurants`.
 | |
| 
 | |
| :::
 | |
| 
 | |
| 2. You are now at the **Field Selection** panel
 | |
| 
 | |
| You may add your first field, a **String** field for the **Restaurant** name.
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on the `String` field
 | |
| - In the **Name** field, type `name`
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on the `ADVANCED SETTINGS` tab
 | |
| - Check the `Required field` checkbox
 | |
| - Check the `Unique field` checkbox
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `+ Add Another Field` button
 | |
| 
 | |
| You are now ready to add the second field, a **Rich Text** field for the **Restaurant** description.
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `Rich Text` field
 | |
| 
 | |
| - In the **Name** field, type `description`
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `+ Add Another Field` button
 | |
| 
 | |
| You are now ready to add the third field, a **Media** field for the **Restaurant** thumbnail image.
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `Media` field
 | |
| 
 | |
| - In the **Name** field, type `image`
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on the **ADVANCED SETTINGS** tab
 | |
| - Check the `Required field` checkbox
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `Done` button
 | |
| 
 | |
| Your new Content Type called **Restaurant** is ready to be **Saved**.
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `Save` button
 | |
| 
 | |
| - Wait for Strapi to restart
 | |
| 
 | |
| 
 | |
| 
 | |
| After Strapi has restarted, you are ready to continue to create the `Category` **Content Type**.
 | |
| 
 | |
| ## 4. Create a new Content Type called "Category"
 | |
| 
 | |
| ### The Category Content Type
 | |
| 
 | |
| The `Category` **Content Type** will have a **String** field named `category`, and a **Relation field** with a **Many to Many** relationship.
 | |
| 
 | |
| 
 | |
| 
 | |
| 1. Complete these steps to **add a Category Content Type**:
 | |
| 
 | |
| - Click the `+ Add A Content Type` link
 | |
| - Enter a **Name** for your new **Content Type** (call this `category`)
 | |
| - Enter `Restaurant Categories` for the **Description**
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `Done` button
 | |
| 
 | |
| 2. Now, you are ready to add fields to your **Category**:
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on the `String` field
 | |
| - In the **Name** field, type `name`
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on the `ADVANCED SETTINGS` tab
 | |
| - Check the `Required field` checkbox
 | |
| - Check the `Unique field` checkbox
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `+ Add Another Field` button
 | |
| 
 | |
| You are now ready to add the second field, a **Relation** field for creating a **Many to Many** relationship between the **Category** and **Restaurant** Content Types.
 | |
| 
 | |
| - Click on the `Relation` field
 | |
| 
 | |
| 
 | |
| 
 | |
| This brings you to the **Add New Relation** screen.
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on _right dropdown_ with `Permission (Users-Permissions)` and change it to `Restaurant`
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `Many to Many` icon (from the middle icon choices). It should now read, **"Categories has and belongs to many Restaurants"**
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `Done` button
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `Save` button
 | |
| 
 | |
| - Wait for Strapi to restart
 | |
| 
 | |
| 
 | |
| 
 | |
| After Strapi has restarted, you are ready to create a `Group and Repeatable Field` called **"Hours of Operations."**
 | |
| 
 | |
| ## 5. Create a new Group, and Repeatable Field called, "Hours of Operation"
 | |
| 
 | |
| ### The Hours of Operation Group
 | |
| 
 | |
| The `Restaurant` Content Type has a **Group** field named `Hours_of_operation`. This Group is **Repeatable** and for displaying the **Opening hours** and **Closing hours** of a **Restaurant**.
 | |
| 
 | |
| 1. Complete these steps to **add a new Group**:
 | |
| 
 | |
| - Click the `+ Add A Group` link to add a new **Group**
 | |
| - Enter a **Name** for your new **Group** (call this `hours_of_operation`), and you can write `Hours of Operation` for the **Description**
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `Done` button
 | |
| 
 | |
| 2. Now, you are ready to add fields to your **Group**:
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on the `String` field
 | |
| - In the **Name** field, type `day_interval`. This is to enter the **Day (or Days)** with **Hours of Operation**
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on the `ADVANCED SETTINGS` tab
 | |
| - Check the `Required field` checkbox
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `+ Add Another Field`
 | |
| 
 | |
| You are now ready to add a second field, another **String** field for the **Opening Hours**.
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on the `String` field
 | |
| - In the **Name** field, type `opening_hours`
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `+ Add Another Field` button
 | |
| 
 | |
| You are now ready to add a third field, another **String** field for the **Closing Hours**.
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on the `String` field
 | |
| - In the **Name** field, type `closing_hours`
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `Done` button
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `Save` button
 | |
| - Wait for Strapi to restart
 | |
| 
 | |
| 
 | |
| 
 | |
| After Strapi has restarted, you are ready to assign this **Hours_of_operation** group to the **Restaurant** Content Type.
 | |
| 
 | |
| ::: tip NOTE
 | |
| 
 | |
| It would be possible to assign the **Hours_of_operation** group to another **Content Type**, let's say, a **Cafe** Content Type. You have the option to reuse this group across your application.
 | |
| 
 | |
| :::
 | |
| 
 | |
| 3. Next, you need to assign the **Hours_of_operation** Group to the **Restaurant** Content Type.
 | |
| 
 | |
| To access the **Hours_of_operation** Group from within the **Restaurant** Content Type, you need to **edit** the **Restaurant** Content Type in the **Content Type Builder**.
 | |
| 
 | |
| - If needed, navigate back to the **Content Type Builder**
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on the `Restaurant` Content Type, under **CONTENT TYPES**
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click one of the `+ Add Another Field` buttons, to add the **Group**
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on the `Group` field
 | |
| 
 | |
| - Ensure `hours_of_operation` is displayed in the **Select a group** dropdown
 | |
| - Provide a **name** for this group in the **Restaurant** Content Type. E.g., `restaurant_hours`
 | |
| - Check the `Repeatable field` box
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on the `ADVANCED SETTINGS` tab
 | |
| - Check the `Required field` checkbox
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `Done` button
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `Save` button
 | |
| 
 | |
| - Wait for Strapi to restart
 | |
| 
 | |
| 
 | |
| 
 | |
| After Strapi has restarted, you are ready to continue to the next section where you customize the user-interface of your **Restaurant** Content Type.
 | |
| 
 | |
| 4. Next, you edit the **View Settings** for the new **Hoursofoperation Group** from within the **Content Manager**.
 | |
| 
 | |
| You can _drag and drop_ fields into a different layout, as well as, _rename the labels_ as two examples of how you can customize the user interface for your **Content Types**.
 | |
| 
 | |
| - Navigate to and click on the `Content Manager`, under **PLUGINS** in the left-hand menu
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on the `Groups(1)` tab
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on `Hours_of_operation` to modify the **View Settings**
 | |
| 
 | |
| 
 | |
| 
 | |
| - Rearrange the fields and make them more user friendly. Grab the `opening_hours` and slide it next to `closing_hours`
 | |
| 
 | |
| 
 | |
| 
 | |
| Next, you will change the **field labels** to make them easier to understand:
 | |
| 
 | |
| - Click on the `day_interval` field
 | |
| - Edit the **Label** to read, `Day (or Days)`
 | |
| - Add a **Description**, `You can type in one day or a series of days to complete this field. E.g. "Tuesday" or "Tues - Wed"`
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on the `opening_hours` field
 | |
| - Edit the **Label** to read, `Opening Hours`
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click on `closing_hours` field
 | |
| - Edit the **Label** to read, `Closing Hours`
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `Save` button, and then the `Confirm` button to save your settings
 | |
| 
 | |
| Your settings have now saved.
 | |
| 
 | |
| Whenever anyone enters in information for a **Restaurant**, the entry form is clear. With Strapi you can modify these and more settings to provide the best experience possible.
 | |
| 
 | |
| You are ready to start inputting actual content.
 | |
| 
 | |
| ## 6. Manage and add content to a "Restaurant" Content Type
 | |
| 
 | |
| You are now ready to add some **Restaurants** and **Categories**.
 | |
| 
 | |
| 1. You are now going to enter a new **Restaurant**
 | |
| 
 | |
| - Navigate to and click on the `Restaurants`, under **CONTENT TYPES** in the left-hand menu
 | |
| 
 | |
| 
 | |
| 
 | |
| - Next, click on the **+ Add new Restaurant** button (in the top right corner)
 | |
| - Enter in the following information for your first **Restaurant** called **Biscotte Restaurant**
 | |
|   - In the **Name** field, enter `Biscotte Restaurant`
 | |
|   - In the **Description** field, enter `Welcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.`
 | |
|   - Upload an **Image** to represent the **Restaurant**
 | |
| 
 | |
| **Note:** At this point, you would generally select the **Categories** for this **Restaurant**. You have not entered any **Categories**, so you do this step after entering this first **Restaurant**.
 | |
| 
 | |
| 
 | |
| 
 | |
| - Next scroll down to **RestaurantHours|(0)** and click the `+ ADD NEW ENTRY` button
 | |
|   - In the **Create an Entry** section, enter the following details:
 | |
|     - In the **Days (or Days)** field, enter `Sun - Mon`
 | |
|     - In the **Opening Hours** field, enter `Closed`
 | |
|     - **Skip** the **Closing Hours** field, as this **Restaurant** is closed all day
 | |
|   - Click the `+ ADD NEW ENTRY` button to create another new entry
 | |
|     - In the **Days (or Days)** field, enter `Tues - Fri`
 | |
|     - In the **Opening Hours** field, enter `12:00`
 | |
|     - In the **Closing Hours** field, enter `22:30`
 | |
|   - Click the `+ ADD NEW ENTRY` button to create the last entry
 | |
|     - In the **Days (or Days)** field, enter `Sat`
 | |
|     - In the **Opening Hours** field, enter `11:30`
 | |
|     - In the **Closing Hours** field, enter `16:00`
 | |
| 
 | |
| You have now entered in all the information necessary, for your first **Restaurant**.
 | |
| 
 | |
| 
 | |
| 
 | |
| - **Scroll up** and click the `Save` button
 | |
| 
 | |
| Next, you need to enter in some **Categories** that can relate to the above and other **Restaurants**.
 | |
| 
 | |
| - Navigate to and click on the `Categories`, under **CONTENT TYPES** in the left-hand menu
 | |
| 
 | |
| 
 | |
| 
 | |
| You are going to enter two **Categories**, but you could add as many **Categories** as you need to. Later, you can add additional **Categories** and assign them to existing and new **Restaurants**.
 | |
| 
 | |
| - Click on the `+ Add New Category` button
 | |
|   - In the **Name** field, enter `French food`
 | |
|   - In the **Restaurants(0)** dropdown, select `Biscotte Restaurant`
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `Save` button
 | |
| 
 | |
| You now enter your second **Category**.
 | |
| 
 | |
| - Click on the `+ Add New Category` button
 | |
|   - In the **Name** field, enter `Brunch`
 | |
|   - In the **Restaurants(0)** dropdown, select `Biscotte Restaurant`
 | |
| 
 | |
| 
 | |
| 
 | |
| - Click the `Save` button
 | |
| 
 | |
| You have now entered your first **Restaurant** Content Type. You have also assigned two **Categories** to this **Restaurant**. Your next step is to set the **Roles and Permissions**.
 | |
| 
 | |
| ## 7. Set Roles and Permissions
 | |
| 
 | |
| By default, Strapi publishes all **Content Types** with restricted permissions. Which means you have to explicitly give permissions to each **Content Type** you create. You are going to give **Public** API (or URL) access to both the **Restaurant** Content Type and **Category** Content Type.
 | |
| 
 | |
| - Click on the `Roles & Permissions` menu item, under **PLUGINS** in the left-hand-menu
 | |
| - Locate and click on the **Roles & Permissions** menu item under **PLUGINS** on the left menu
 | |
| 
 | |
| 
 | |
| 
 | |
| - Next, click on the **Public** Role
 | |
| 
 | |
| 
 | |
| 
 | |
| - Next, scroll down under **Permissions** and locate the **Restaurant** and **Category** Content Types
 | |
| - Click the checkbox for **find** and **findone** in the **Restaurant** Content Type
 | |
| - Click the checkbox for **find** and **findone** in the **Category** Content Type
 | |
| 
 | |
| 
 | |
| 
 | |
| - Scroll back to the top, and click the **Save** button
 | |
| 
 | |
| 
 | |
| 
 | |
| You have now opened the API and are ready to consume your content.
 | |
| 
 | |
| ## 8. Consume the Content Type API
 | |
| 
 | |
| Each of your **Content Types** are accessible by following their automatically generated routes.
 | |
| 
 | |
| Both your **Restaurant** and **Category** Content Types can now be accessed:
 | |
| 
 | |
| - In your browser, follow `http://localhost:1337/restaurants` to return the data for the allowed **Find** value of your **Restaurant** Content Type
 | |
| 
 | |
| 
 | |
| 
 | |
| - In your browser, follow `http://localhost:1337/categories` to return the data for the allowed **Find** value of your **Category** Content Type
 | |
| 
 | |
| 
 | |
| 
 | |
| ::: tip NOTE
 | |
| 
 | |
| If you have incorrectly or not set permissions to your content type, you get a **"403"** permission error. See the below example.
 | |
| 
 | |
| Forbidden Access Looks like this:
 | |
| 
 | |
| 
 | |
| :::
 | |
| 
 | |
| ::: tip NOTE
 | |
| 
 | |
| If you would like to see the route of any specific **Content Type**, you need to navigate to the **Content Type** under the **Roles and Permissions** plugin and click the ⚙️ next to the value. On the right, you see the route:
 | |
| 
 | |
| 
 | |
| 
 | |
| :::
 | |
| 
 | |
| ::: tip CONGRATULATIONS
 | |
| 👏 Congratulations, you have now completed the **Strapi Getting Started Tutorial**. Where to go next?
 | |
| 
 | |
| - Learn how to use Strapi with React ([Gatsby](https://blog.strapi.io/building-a-static-website-using-gatsby-and-strapi) or [Next.js](https://blog.strapi.io/strapi-next-setup/)) or Vue.js ([Nuxt.js](https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-setup-part-1-7/)).
 | |
| - Read the **concepts** to deep dive into Strapi
 | |
| - Get help on [StackOverflow](https://stackoverflow.com/questions/tagged/strapi)
 | |
| - Read the [source code](https://github.com/strapi/strapi), [contribute](https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md) or [give a star](https://github.com/strapi/strapi) on GitHub
 | |
| - Follow us on [Twitter](https://twitter.com/strapijs) to get the latest news
 | |
| - [Join the vibrant and active Strapi community](https://slack.strapi.io) on Slack
 | |
|   :::
 | 
