2019-05-06 16:17:16 +02:00
# Quick Start Guide
2019-09-09 17:42:39 +02:00
Get ready to get Strapi up and running in **less than 5 minutes** 🚀.
2019-05-06 16:17:16 +02:00
< div class = "video-container" >
2019-09-11 10:19:48 +02:00
< iframe width = "853" height = "480" src = "https://www.youtube.com/embed/4m1wKzzfs-M" frameborder = "0" allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen > < / iframe >
2019-05-06 16:17:16 +02:00
< / div >
2019-10-23 10:11:53 +02:00
_For a step-by-step guide, please take a look at the [detailed tutorial ](quick-start-tutorial.md )._
2019-05-06 16:17:16 +02:00
2019-10-23 10:11:53 +02:00
(Before continuing, please make sure [Node.js and npm are properly installed ](install-requirements.md ) on your machine. You can [install the Yarn v1.2.0+ package here ](https://yarnpkg.com/en/ ).)
2019-05-06 16:17:16 +02:00
2019-09-09 17:42:39 +02:00
## 1. Install Strapi and Create a new project
2019-05-06 16:17:16 +02:00
2019-11-22 15:03:20 +01:00
:::: tabs
::: tab yarn
2019-05-06 16:17:16 +02:00
```bash
2019-09-09 17:42:39 +02:00
yarn create strapi-app my-project --quickstart
2019-05-06 16:17:16 +02:00
```
2019-11-22 15:03:20 +01:00
:::
2019-09-09 17:42:39 +02:00
2019-11-22 15:03:20 +01:00
::: tab npx
2019-05-06 16:17:16 +02:00
```bash
2019-09-09 17:42:39 +02:00
npx create-strapi-app my-project --quickstart
2019-05-06 16:17:16 +02:00
```
2019-11-22 15:03:20 +01:00
:::
::::
2019-09-09 17:42:39 +02:00
## 2. Create an Administrator user
2019-05-06 16:17:16 +02:00
Navigate to [**http://localhost:1337/admin** ](http://localhost:1337/admin ).
2019-09-09 17:42:39 +02:00
- Complete the form to create the first **Administrator** user.
2019-05-06 16:17:16 +02:00
- Click **Ready to start** .
2020-04-06 11:49:49 -04:00
## 3. Create a Restaurant Collection Type
2019-05-06 16:17:16 +02:00
2019-06-14 14:47:18 +02:00
Navigate to [**PLUGINS** - **Content Type Builder** ](http://localhost:1337/admin/plugins/content-type-builder ), in the left-hand menu.
2019-05-06 16:17:16 +02:00
2020-03-27 23:21:43 -04:00
- Click the ** "+ Create new collection type"** link
- Enter `restaurant` , and click `Continue`
2019-09-09 17:42:39 +02:00
- A window opens with fields options:
2020-02-05 13:14:27 +00:00
- Click the **Text** field
2019-09-09 17:42:39 +02:00
- Type `name` in the **Name** field
- Click over to the **ADVANCED SETTINGS** tab, and check the `Required field` and the `Unique field`
2020-02-05 13:14:27 +00:00
- Click the ** "+ Add another Field"** button
2019-09-09 17:42:39 +02:00
- Click the **Rich Text** field
- Type `description` under the **BASE SETTINGS** tab, in the **Name** field
2020-02-05 13:14:27 +00:00
- Click `Finish`
2019-09-09 17:42:39 +02:00
- Click the **Save** button and wait for Strapi to restart
2020-04-06 11:49:49 -04:00
## 4. Create a Category Collection type
2019-06-14 14:47:18 +02:00
Navigate back to [**PLUGINS** - **Content Type Builder** ](http://localhost:1337/admin/plugins/content-type-builder ), in the left-hand menu.
2020-03-27 23:21:43 -04:00
- Click the ** "+ Create new collection type"** link
2020-02-05 13:14:27 +00:00
- Enter `category` , and click `Continue`
2019-06-19 18:54:23 +02:00
- A window opens with fields options:
2020-02-05 13:14:27 +00:00
- Click the **Text** field
2019-09-09 17:42:39 +02:00
- 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`
2020-02-05 13:14:27 +00:00
- Click the ** "+ Add another field"** button
2019-09-09 17:42:39 +02:00
- Click the **Relation** field
2020-02-05 13:14:27 +00:00
- On the right side, click the **Category** dropdown and select, `Restaurant`
2019-09-11 10:34:16 +02:00
- In the center, select the icon that represents `many-to-many` . The text should read, `Categories has and belongs to many Restaurants`
2020-02-05 13:14:27 +00:00
- Click `Finish`
2019-09-09 17:42:39 +02:00
- Click the **Save** button and wait for Strapi to restart
2020-04-06 11:49:49 -04:00
## 5. Add content to "Restaurant" Collection Type
2019-09-09 17:42:39 +02:00
2020-03-27 23:21:43 -04:00
Navigate to [**COLLECTION TYPES** - **Restaurants** ](http://localhost:1337/admin/plugins/content-manager/restaurant?source=content-manager ), in the left-hand menu.
2019-09-09 17:42:39 +02:00
- Click on ** + Add New Restaurant** button. Type `Biscotte Restaurant` in the **Restaurant** field. Type `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.` into the **Description** field.
2019-05-06 16:17:16 +02:00
- Click **Save** .
You will see your restaurant listed in the entries.
2020-04-06 11:49:49 -04:00
## 6. Add categories to the "Category" Collection Type
2019-06-14 14:47:18 +02:00
2020-03-27 23:21:43 -04:00
Navigate to [**COLLECTION TYPES** - **Categories** ](http://localhost:1337/admin/plugins/content-manager/category?source=content-manager ).
2019-06-14 14:47:18 +02:00
2020-02-02 14:38:51 +01:00
- Click on ** + Add New Category** button. Type `French Food` in the **Category** field. Select `Biscotte Restaurant` , on the right from **Restaurant (0)** .
2019-06-14 14:47:18 +02:00
- Click **Save** .
2019-09-22 09:34:46 +03:00
You will see the **French Food** category listed in the entries.
2019-06-14 14:47:18 +02:00
2019-09-09 17:42:39 +02:00
- Click on ** + Add New Category** button. Type `Brunch` in the **Category** field. **DO NOT ADD IT HERE** to `Biscotte Restaurant` .
2019-06-14 14:47:18 +02:00
- Click **Save** .
2019-09-09 17:42:39 +02:00
You will see the **Brunch** category listed in the entries.
2019-06-14 14:47:18 +02:00
2020-03-27 23:21:43 -04:00
Navigate back to [**COLLECTION TYPES** - **Restaurants** ](http://localhost:1337/admin/plugins/content-manager/restaurant?source=content-manager ).
2019-06-14 14:47:18 +02:00
2020-02-02 14:38:51 +01:00
- Click on `Biscotte Restaurant` .
2019-09-09 17:42:39 +02:00
- 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.
2019-06-14 14:47:18 +02:00
2019-09-09 17:42:39 +02:00
You have now seen **two different ways** to use the **relation** field type to add and connect relations between Content Types.
2019-06-14 14:47:18 +02:00
2019-09-09 17:42:39 +02:00
## 7. Set Roles and Permissions
2019-05-06 16:17:16 +02:00
2019-06-14 14:47:18 +02:00
Navigate to [**PLUGINS** - **Roles & Permissions** ](http://localhost:1337/admin/plugins/users-permissions/roles ).
2019-05-06 16:17:16 +02:00
2019-06-14 14:47:18 +02:00
- Click the **Public** Role.
- Scroll down under **Permissions** , find **Restaurant** . Click the checkbox next to **find** and **findone** .
2019-09-09 17:42:39 +02:00
- Repeat and find **Category** . Click the checkbox next to **find** and **findone** .
2019-05-06 16:17:16 +02:00
- Click **Save** .
2020-04-06 11:49:49 -04:00
## 8. Consume the Collection Type's API
2019-05-06 16:17:16 +02:00
Here we are! The list of **restaurants** is accessible at [`http://localhost:1337/restaurants` ](http://localhost:1337/restaurants ).
::: tip CONGRATULATIONS
2019-09-09 17:42:39 +02:00
👏 Congratulations, you have now completed the **Strapi Quick Start** . Where to go next?
2019-05-06 16:17:16 +02:00
- 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/ )).
2019-10-23 10:11:53 +02:00
- Read the **concepts** and do the [Tutorial ](quick-start-tutorial.md ) to deep dive into Strapi.
2020-04-17 01:58:01 -07:00
- Get help on [Github Discussions ](https://github.com/strapi/strapi/discussions ).
2019-05-06 16:17:16 +02:00
- 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.
:::