strapi/docs/3.0.0-beta.x/getting-started/quick-start-tutorial.md

Tutorial

This Tutorial is written for developers who prefer a more detailed step-by-step introduction. (A less detailed version can be found at Quick Start Guide.) This tutorial will take you through the beginning steps of how you could start a project like "FoodAdvisor" (Github)(Demo). You will get a good overview of many of the features that developers love about using Strapi.

[TODO: Create NEW Video]

By following this tutorial, you will install and create your first Strapi project.

::: tip NOTE

You need to have Node.js and npm installed on your system prior to following these steps. If you do not have Node.js and npm installed (or are not sure), please visit our Installation Requirements.

:::

Table of Contents

1. Install Strapi and create project
2. Create an Administrator and front-end User
3. Create a new Content Type called, "Restaurant"
4. Create a new Content Type called, "Category"
5. Create a new Group and Repeatable Field called, "Hours of Operations"
6. Manage and add content to the "Restaurant" Content Type
7. Set Roles and Permissions
8. Consume the Content Type API

1. Install Strapi and create project

• Navigate to your parent Projects/ directory from your command line.

Path: ~/Desktop/Projects/

Use only one of the following commands to create a new Strapi project:

---

• (Using yarn to install the Strapi project (recommended). Install yarn with these docs.)

yarn create strapi-app my-project --quickstart

or

• (Using npm/npx to install the Strapi project.)

npx create-strapi-app my-project --quickstart

---

The command will create a Strapi project my-project/ folder within your parent Projects/ directory.

::: tip NOTE

When you create a new Quick Start(--quickstart) project, Strapi will download 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.

:::

::: tip NOTE You can replace the my-project name with any name you want. E.g. strapi new my-foodadvisor-project --quickstart, will create a folder ./Projects/my-foodadvisor-project.

:::

You will see something like this, indicating your Strapi project is being downloaded and installed.

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 will notice the following that builds your Strapi administration panel and automatically starts up Strapi:

> 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 will install Strapi using a SQLite database. You may always leave off the --flag, but you will simply need to follow a few configuration steps for a your database. You will need to have your database choice installed and running locally, prior to creating your project.

Note: An SQLite database is an excellent database to use for prototyping and developing Strapi projects. SQLiteå is a light database that ports effortlessly to the other relational databases that Strapi supports (MySQL, PostgreSQL and MariaDB). However, if you would like to use MongoDB in production, you will need to install, run and use MongoDB on your development machine. :::

You are now ready to create a new Administrator and new front-end User.

2. Create an Adminstrator 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 will need to complete the following fields:

• Username, create a username for login access to your project, eg. paulbocuse
• Password, create a unique password for logging into your project
• Email address, this will be used for recovery
• Check Receive news, this is optional but recommended
• Click the Ready to Start button

After your Administrator registration is complete, you will see the Strapi Administration Dashboard:

[TODO: Add an image showing Adminstration 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 have the ability to add content, add plugins, upload images, etc. An Adminstrator does not author or have any relation to actual content.

B. A front-end User is someone who interacts with your project through the front-end. A front-end User is someone who authors an article, makes a purchase, has an account, leaves a review, leaves a comment, etc.

At this point, you have created an Administrator, now you will want to create a front-end User.

• 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 clicked the blue Save button (top right)

[TODO: Add an image showing entered user]

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 includes a name, a main image, and a description - at a minimum. But a restaurant could also have a category or mulitple categories, and a restaurant could perhaps need to show hoursOfOperation.

The next section of this tutorial will guide you through each of the steps needed for each of these Content Type fields.

::: tip NOTE

Additional Restaurant themed Content Types can be seen in the FoodAdvisor demo site.

:::

At this point, the only Content Type available is Users. You need to create a new Content Type for Restaurants.

The Restaurant Content Type

Go to the Content Type Builder plugin, located in the left menu: PLUGINS --> Content Type Builder.

[TODO: Add an image of the Add Content Type dashboard]

1. Complete these steps to Create a Content Type:

• Click the + Create a Content Type button to add a new Content Type
• Enter a Name for your new Content Type (call this restaurant), and you can write Restaurant Listings for the Description.
• Click the Done button

[TODO: Add an image of the entry form showing a singular NAME]

::: tip NOTE

The Content Type Name is always singular. For example, restaurant not restaurants.

:::

2. You are now at the field selection panel for adding fields to your Restaurant Content Type:

You are now ready to add your first field, a String field for the Restaurant name.

[TODO: Add an image of Add New Field form]

• Click on the String field
• In the Name field, type Restaurant. This will be the name of the restaurant.

[TODO: Add an image of Input String Field image]

• Click on the ADVANCED SETTINGS tab
• Check the Required field checkbox
• Check the Unique field checkbox
• Click the Add Another Field button

[TODO: Add an image of Input String ADVANCED SETTINGS]

You are now ready to add the second field, a Rich Text field for the Restaurant description.

[TODO: Add an image of the added Name field and to add a new RICH TEXT field]

• Click the Rich Text field

[TODO: Add an image of the add a new RICH TEXT field dialog box of fields]

• In the Name field, type Description. This will be the description of the Restaurant.
• Click the Add Another Field button

[TODO: Add an image of the add a new TEXT field to add DESCRIPTION]

You are now ready to add the third field, a Media field for the Restaurant thumbnail image.

[TODO: Add an image of the added Name field and to add a new MEDIA field]

• Click the Media field

[TODO: Add an image of the add a new MEDIA field dialog box of fields]

• In the Name field, type Image
• Click on the ADVANCED SETTINGS tab
• Check the Required field checkbox
• Click the Done button

[TODO: Add an image of the add a new TEXT field to add DESCRIPTION]

Your new Content Type called Restaurant is ready to be Saved.

• Click the Save button

[TODO: Add an image of Save Restaurant Image]

• Wait for Strapi to restart

[TODO: Add an image of the SAVING OF STRAPI wait]

After Strapi has restarted, you are ready 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.)

[TODO: Add an image of the Add Content Type Menu Item]

1. Complete these steps to add a new Content Type:

• Click the + Add Content Type button to add a new Content Type.
• Enter a Name for your new Content Type (call this category), and you can write Restaurant Categories for the Description.
• Click the Done button.

[TODO: Add an image of the Category Content Type Name and Description]*

2. Now, you are ready to add the Content Type fields:

[TODO: Add an image of Add New Field form for Category]

You are now at the screen to add fields for your Category Content Type.

• Click on the String field.
• In the Name field, type Category. This will be the name of the category.

[TODO: Add an image of Input String Field image for category]

• Click on the ADVANCED SETTINGS tab
• Check the Required field checkbox
• Check the Unique field checkbox
• Click the Add Another Field button

[TODO: Add an image of Input String ADVANCED SETTINGS]

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.

[TODO: Add an image of the added Name field and to add a new Relation field]

• Click on the Relation field.

[TODO: Add an image of the add a new TCategory Click Relation Field]

This will bring you to the Add New Relation screen.

[TODO: Add an image of the add a new Add new Relation Field screen]

• Click on right dropdown with Permission (Users-Permissions) and change it to Restaurant.

[TODO: Add an image of the add a new Change Permission 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.

[TODO: Add an image of the add a new Category Has Many To Many Relation]

• Click the Save button.

[TODO: Add an image of the add Now Save Category]

• Wait for Strapi to restart.

[TODO: Add an image of the waiting to finish saving]

After Strapi has restarted, you are ready continue to create a Group and Repeatable Field called, "Hours of Operations".

5. Create a new Group and Repeatable Field called, "Hours of Operations"

6. Manage and add content to, "Restaurant" Content Type

Files structure

A new directory has been created in the ./Projects/my-project/ folder of your application which contains all the needed files related to your restaurant and category Content Types. (You may take a look at the API structure documentation for more information.)

7. Set Roles and Permissions

8. Consume the Content Type API

Strapi is now installed globally on your computer. Type strapi -h in your command line to access available Strapi commands.

strapi -h

## You will get the following available commands
Usage: strapi [options] [command]

Options:
  -v, --version                                  output the version number
  -h, --help                                     output usage information

Commands:
  version                                        output your version of Strapi
  console                                        open the Strapi framework console
  new [options] [name]                           create a new application
  start                                          Start your Strapi application
  develop|dev [options]                          Start your Strapi application in development mode
  generate:api [options] <id> [attributes...]    generate a basic API
  generate:controller [options] <id>             generate a controller for an API
  generate:model [options] <id> [attributes...]  generate a model for an API
  generate:policy [options] <id>                 generate a policy for an API
  generate:service [options] <id>                generate a service for an API
  generate:plugin [options] <id>                 generate a basic plugin
  build                                          Builds the strapi admin app
  install [plugins...]                           install a Strapi plugin
  uninstall [options] [plugins...]               uninstall a Strapi plugin
  help                                           output the help

5. Add content to each Content Type

Now you can add content to the new Content Types.

Click on Restaurants under the CONTENT TYPES menu in order to Add New Restaurant.

Next click on the + Add New Restaurant button (in the top right corner). Go ahead and type Strapi Restaurant in the Name field, with a description saying, Strapi restaurant is a cosy restaurant delivering one of the very fastest and nicest dining experiences in the world, combining nods to tradition with fierce modernity, warmth with daring. into the Description field. Then press the Save button..

When it is saved, you will see your restaurant listed in the entries. From here you can edit it or add a new restaurant.

You have NOT yet added a Category to the Restaurant that was created. You first have to add the actual Category items to the Categories content type.

You will then assign two Categories, Convenient and Time Saving to this restaurant.

Click on Categories under the CONTENT TYPES menu on the left.

Click the + Add New Category button to add the first category Convenient. Type Convenient into the Name field. Next, you will see Restaurants (0) to the right. Select Strapi Restaurant, to add this category to the restaurant.

After selecting, Restaurants (0) to the right, it will change to Restaurants (1). And then press the Save button.

You now see the Category listed. Click the + Add New Category button to add the second category Time Saving.

Now let's add Time Saving. Type Time Saving into the Category field. Go ahead and save it WITHOUT adding it to the Strapi Restaurant field.

You return to the Category Content Type page. You see both categories listed. Both have been assigned to the Restaurant you created earlier.

::: tip NOTE

If you want to add Categories directly from the Restaurants Content Type, you simply click on the Restaurant and add, edit or change EXISTING categories. Otherwise, you can create and add new Categories from the Category Content Type as you did above.

Go ahead and add Time Saving, the Strapi Restaurant.

:::

6. 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 the Restaurant Content Type.

Locate and click on the Roles & Permissions menu item under PLUGINS on the left menu. (The Roles & Permissions plugin can accomplish many tasks related to permissions. For now, focus on the Public role.)

Next, click on the Public Role.

From here, scroll down under Permissions and find Restaurant and Category. Click the checkbox next to find and findone for each of them. Scroll back to the top, and click the Save button.

7. Consume the Content Type API

The project is accessible by following the http://localhost:1337/ link. You will see the 'Welcome' screen.

What you want is the Restaurant Content Type. The route is /restaurants. In your browser, type http://localhost:1337/restaurants.

::: tip NOTE

If you have incorrectly or not set permissions to your content type, you will get a "403" permission error. See the below example.

Forbidden Access Looks like this:

:::

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

• Learn how to use Strapi with React (Gatsby or Next.js) or Vue.js (Nuxt.js).
• Read the concepts and articles to deep dive into Strapi.
• Get help on StackOverflow.
• Read the source code, contribute or give a star on GitHub.
• Follow us on Twitter to get the latest news.
• Join the vibrant and active Strapi community on Slack. :::