Step 1: Run the installation script and create a Strapi Cloud account​

1. Run the following command in a terminal:

   npx create-strapi@latest my-strapi-project
   

2. The terminal will prompt you to log in or sign up. Once you do, a 30-day trial of theGrowthThe CMS Growth plan includes the Live Preview, Releases, and Content History features. plan will be automatically applied to your project. EnsureLogin/Sign up is selected in the terminal, or use arrow keys to select it, and press Enter.

3. In the new browser tab that opens, ensure the confirmation code is the same as in the terminal and clickConfirm.

4. Still in the browser tab, clickContinue with GitHub. If you are not already logged in into GitHub with your current browser session, you might be redirected to a GitHub login page.

5. Once logged in, the browser will display a "Congratulations, you're all set!" message and you can safely close the browser tab and get back to the terminal.

   

6. The terminal will now ask you a few questions. PressEnter to accept the default answer to all questions.

   

As you will see in the terminal, your project is now building locally.

Step 2: Register the first local administrator user​

Once the installation is complete, you need to start the server. In the terminal, typecd my-strapi-project && yarn develop and your browser automatically opens a new tab.

By completing the form, you create your own account. Once done, you become the first administrator user of this Strapi application. Welcome aboard, commander!

You now have access to theadmin panel:

Step 1: Create a "Restaurant" collection type​

Your restaurants directory will eventually include many restaurants, so we need to create a "Restaurant" collection type. Then we can describe the fields to display when adding a new restaurant entry:

1. Click on theCreate your first Content type button.
   If it's not showing up, go toContent-Type Builder in the main navigation.
2. Click onCreate new collection type.
3. TypeRestaurant for theDisplay name, and clickContinue.
4. Click the Text field.
5. TypeName in theName field.
6. Switch to theAdvanced Settings tab, and check theRequired field and theUnique field settings.
7. Click onAdd another field.
8. Choose the Rich text (Blocks) field in the list.
9. TypeDescription under theName field, then clickFinish.
10. Finally, clickSave and wait for Strapi to restart.

Once Strapi has restarted, "Restaurant" is listed underContent Manager > Collection types in the navigation. Wow, you have just created your very first content-type! It was so cool — let's create another one right now, just for pleasure.

Step 2: Create a "Category" collection type​

It would help getting a bit more organized if our restaurants directory had some categories. Let's create a "Category" collection type:

1. Go toContent-type Builder in the main navigation.
2. Click onCreate new collection type.
3. TypeCategory for theDisplay name, and clickContinue.
4. Click the Text field.
5. TypeName in theName field.
6. Switch to theAdvanced Settings tab, and check theRequired field and theUnique field settings.
7. Click onAdd another field.
8. Choose the Relation field.
9. In the center, select the icon that represents "many-to-many". The text should readCategories has and belongs to many Restaurants.

11. Finally, clickFinish, then theSave button, and wait for Strapi to restart.

Step 1: Log in to the admin panel of your new Strapi Cloud project​

Now that your Strapi Cloud project is created, let's log in into the project:

1. From yourStrapi Cloud dashboard, click themy-strapi-project project.
2. Click theVisit app button.
3. In the new page that opens, complete the form to create the first administrator user of this Strapi Cloud project.

Logged in into our first Strapi Cloud project, we will now add data from there.

Step 2: Create an entry for the "Restaurant" collection type​

1. Go toContent Manager > Collection types - Restaurant in the navigation.
2. Click onCreate new entry.
3. Type the name of your favorite local restaurant in theName field. Let's say it'sBiscotte Restaurant.
4. In theDescription field, write a few words about it. If you're lacking some inspiration, you can useWelcome to Biscotte restaurant! Restaurant Biscotte offers a cuisine based on fresh, quality products, often local, organic when possible, and always produced by passionate producers.
5. ClickSave.

The restaurant is now listed in theCollection types - Restaurant view of theContent Manager.

Step 3: Add Categories​

Let's go toContent Manager > Collection types - Category and create 2 categories:

1. Click onCreate new entry.
2. TypeFrench Food in theName field.
3. ClickSave.
4. Go back toCollection types - Category, then click again onCreate new entry.
5. TypeBrunch in theName field, then clickSave.

The "French Food" and "Brunch" categories are now listed in theCollection types - Category view of theContent Manager.

Now, we will add a category to a restaurant:

1. Go toContent Manager > Collection types - Restaurant in the navigation, and click on "Biscotte Restaurant".
2. In theCategories drop-down list at the bottom of the page, select "French Food". Scroll back to the top of the page and clickSave.

Step 4: Set Roles & Permissions​

We have just added a restaurant and 2 categories. We now have enough content to consume (pun intended). But first, we need to make sure that the content is publicly accessible through the API:

1. Click on Settings at the bottom of the main navigation.
2. UnderUsers & Permissions Plugin, chooseRoles.
3. Click thePublic role.
4. Scroll down underPermissions.
5. In thePermissions tab, findRestaurant and click on it.
6. Click the checkboxes next tofind andfindOne.
7. Repeat withCategory: click the checkboxes next tofind andfindOne.
8. Finally, clickSave.

Step 5: Publish the content​

By default, any content you create is saved as a draft. Let's publish our categories and restaurant.

First, navigate toContent Manager > Collection types - Category. From there:

1. Click the "Brunch" entry.
2. On the next screen, clickPublish.
3. In theConfirmation window, clickYes, publish.

Then, go back to the Categories list and repeat for the "French Food" category.

Finally, to publish your favorite restaurant, go toContent Manager > Collection types - Restaurant, click the "Biscotte Restaurant" entry, andPublish it.

Step 6: Use the API​

OK dear gourmet, we have just finished creating our content and making it accessible through the API. You can give yourself a pat on the back — but you have yet to see the final result of your hard work.

There you are: the list of restaurants should be accessible by visting the/api/restaurants path of your Strapi Cloud project URL (e.g.,https://beautiful-first-strapi-project.strapiapp.com/api/restaurants).

Try it now! The result should be similar to the example response below 👇.

{
"data":[
{
"id":3,
"documentId":"wf7m1n3g8g22yr5k50hsryhk",
"Name":"Biscotte Restaurant",
"Description":[
{
"type":"paragraph",
"children":[
{
"type":"text",
"text":"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."
}
]
}
],
"createdAt":"2024-09-10T12:49:32.350Z",
"updatedAt":"2024-09-10T13:14:18.275Z",
"publishedAt":"2024-09-10T13:14:18.280Z",
"locale":null
}
],
"meta":{
"pagination":{
"page":1,
"pageSize":25,
"pageCount":1,
"total":1
}
}
}