mirror of https://github.com/strapi/strapi.git synced 2025-07-19 07:02:26 +00:00

davidkartuzinski 57c3aaa1ad all remaining section except section 6 - adding content - is now complete with pictures

2019-09-02 19:44:44 +02:00

30 KiB

Raw Blame History

Tutorial

This tutorial is written for developers to teach and explain the step-by-step introduction to Strapi. (A more concise How-to version can be found in the Quick Start Guide.) This tutorial will take you through the beginning steps of how you start a project like "FoodAdvisor" (Github)(Demo). You will get a good overview of the features 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

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:

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

yarn create strapi-app my-project --quickstart

(Use 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. yarn create strapi-app my-foodadvisor-project --quickstart, will create a folder ./Projects/my-foodadvisor-project.

:::

You will see something like this. This indicates 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 (MySQL, PostgreSQL and MariaDB). It is recommended to develop with SQLite and to use another relational database (MySQL, PostgreSQL or MariaDB) in production.

Note: 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:

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.

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

Up until 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)

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.

A Content Type forms your data structure.

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

::: tip NOTE

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

:::

The Restaurant Content Type

At this point, three Content Types are available Permission, Role, and Users.

Go to the Content Type Builder plugin, located in the left menu: PLUGINS --> Content Type Builder. You are now able to see the three available Content Types.

You will need to create a new Content Type for Restaurants.

Complete these steps to Add a Content Type:

Click the + Add a Content Type button
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.

:::

You are now at the Field Selection panel:

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

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

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. This will be the description of the Restaurant.

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 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.)

Complete these steps to add a new Content Type:

Click the + Add Content Type link 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.

Now, you are ready to add fields to your Category:

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

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 will bring 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 will have a Group field named Hoursofoperation. This Group will be repeatable for displaying the Opening hours and Closing Hours of a Restaurant.)

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 hoursofoperation), and you can write Restaurant Hours of Operation for the Description.

Click the Done button

Now, you are ready to add fields to your Group:

Click on the String field
In the Name field, type day_interval. The will be to enter the Day (or Days) with Hours.

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. This will be the time the Restaurant opens.

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. This will be the time the Restaurant opens.
Click the Done button.

Click the Save button.

Wait for Strapi to restart.

After Strapi has restarted, you are ready to assign this Hoursofoperation Group to the Restaurant Content Type.

Next, you need to assign the Hoursofoperation Group to the Restaurant Content Type.

In order to access the Hoursofoperation Group from within the Restaurant Content Type, you need to edit the Restaurant Content Type in the Content Type Builder.

Click on the Restaurant Content Type, under CONTENT TYPES in the Content Type Builder.

Click the + Add Another Field button, to add the Group.

Click on the Group field

Ensure hoursofoperation is displayed in the Select a group dropdown.
Provide a name for this group in the Restaurant Content Type. E.g. RestaurantHours
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 will customize the user-interface your Restaurant Content Type.

Next you will edit the View Settings for the new Hoursofoperation Group from within the Content Manager.

You have the ability to 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.

Click on the Content Manager, under PLUGINS in the left-hand menu

Click on the Groups(1) tab

Click on Hoursofoperation to modify the View Settings

Grab the opening_hours and slide it next to closing_hour. This will rearrange the fields and make them more user friendly.

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_hour field
Edit the Label to read, Opening Hours

Click on closing_hour 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 been saved. You are ready to start inputting actual content.

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

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.

From here, scroll down to 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 for your Restaurant Content Type.

** TO DO ADD PHOTO **

In your browser, follow http://localhost:1337/categories to return the data for the allowed Find value for your Category Content Type.

::: 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 NOTE

If you would like to see the route of any specific Content Type, you will need to navigate to the Content Type under the Roles and Permissions plugin and click the ⚙️ next to the value. On the right, you will see the route:

:::

::: 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. :::

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.

:::

30 KiB Raw Blame History

Tutorial

1. Install Strapi and create project

2. Create an Adminstrator and front-end User

3. Create a new Content Type called, "Restaurant"

The Restaurant Content Type

4. Create a new Content Type called, "Category"

The Category Content Type

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

The Hours of Operation Group

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

7. Set Roles and Permissions

8. Consume the Content Type API

5. Add content to each Content Type

30 KiB

Raw Blame History