strapi/docs/3.x.x/getting-started/quick-start.md

286 lines
8.7 KiB
Markdown
Raw Normal View History

2017-10-10 11:15:24 +02:00
# Quick start
This section explains how to handle Strapi for the first time, ([check out our video tutorial](https://www.youtube.com/watch?v=yMl5IcFHA74)).
2017-10-10 11:15:24 +02:00
**Table of contents:**
2018-10-28 08:15:31 +01:00
- [1. Create your first project](#_1-create-a-project)
- [2. Create your first user](#_2-register-the-first-user)
- [3. Create your first Content Type](#_3-create-a-content-type)
- [Files structure](#files-structure)
- [4. Manage your data](#_4-add-content)
- [5. Consume your API](#_5-consume-the-api)
- [List entries (GET)](#list-entries-get)
- [Get a specific entry (GET)](#get-a-specific-entry-get)
- [Create data (POST)](#create-data-post)
- [Update data (PUT)](#update-data-put)
- [Delete data (DELETE)](#delete-data-delete)
2017-10-10 11:15:24 +02:00
***
2018-10-28 08:15:31 +01:00
## 1. Create a project
2017-10-10 11:15:24 +02:00
Creating your first project with Strapi is easy:
**#1 — Open your terminal**
2017-10-10 11:15:24 +02:00
Open your terminal in the directory you want to create your application in.
2017-10-10 11:15:24 +02:00
**#2 — Run the following command line in your terminal:**
2017-10-10 11:15:24 +02:00
```bash
strapi new my-project
```
2017-10-10 11:15:24 +02:00
![Generate a Strapi project](../assets/terminal_new.png)
2017-10-10 11:15:24 +02:00
2018-10-28 08:15:31 +01:00
::: note
The CLI will ask you to choose your database: select MongoDB, Postgres or MySQL. Then, fill the database information in. The default values should work if you correctly installed the database system on your machine.
:::
This action creates a new folder named `my-project` with the entire [files structure](../concepts/concepts.md#files-structure) of a Strapi application.
2017-10-10 11:15:24 +02:00
2018-12-21 19:03:54 +03:30
::: note
2018-12-22 15:21:22 +03:30
Unfortunately, there is an issue on Windows, you will probably be stuck and unable to enter your `Database name` to continue. Using a VM is one of the solutions. See [the issue](https://github.com/strapi/strapi/issues/1281).
2018-12-21 19:03:54 +03:30
:::
**#3 — Go to your project and launch the server:**
2017-10-10 11:15:24 +02:00
In your terminal run the following commands:
2017-10-10 11:15:24 +02:00
```bash
cd my-project
strapi start
```
![Start Strapi](../assets/terminal_start.png)
2017-10-10 11:15:24 +02:00
2018-10-28 08:15:31 +01:00
Now that your app is running let's see how to [create your first user](#_2-register-the-first-user).
2017-10-10 11:15:24 +02:00
***
2018-10-28 08:15:31 +01:00
## 2. Register the first user
2017-12-13 13:24:46 +01:00
2018-10-28 08:15:31 +01:00
In order to use the admin panel and to consume your API you first need to register your first user. This process only happens once and is made to create the `admin user` who has all the permissions granted.
2017-12-13 13:24:46 +01:00
2018-10-28 08:15:31 +01:00
To create your first user, start your server (`strapi start`) and go to [http://localhost:1337/admin](http://localhost:1337/admin).
2017-12-13 13:24:46 +01:00
![Register View](../assets/getting-started_register.png)
2018-10-28 08:15:31 +01:00
Now that your first user is registered let's see how to [create your first Content Type](#_3-create-a-content-type).
2017-12-13 13:24:46 +01:00
***
2017-10-10 11:15:24 +02:00
2018-10-28 08:15:31 +01:00
## 3. Create a Content Type
2017-10-10 11:15:24 +02:00
2018-10-28 08:15:31 +01:00
At this point, your project is empty. To create your first Content Type, you are going to use the **Content Type Builder** plugin: a powerful UI to help defining your Content Type's structure within a few clicks. Let's take the example of blog, which manages posts.
2017-10-10 11:15:24 +02:00
**#1 —** Go to the **Content Type Builder** plugin.
2017-10-10 11:15:24 +02:00
2017-12-13 13:24:46 +01:00
![Content Type Builder - Home](../assets/getting-started_no_content_type.png)
2017-10-10 11:15:24 +02:00
2018-10-28 08:15:31 +01:00
**#2 —** Create a Content Type named `Post` and submit the form.
2017-10-10 11:15:24 +02:00
2017-12-13 13:24:46 +01:00
![Content Type Builder - Create a new Content Type](../assets/getting-started_create_content_type.png)
2017-10-10 11:15:24 +02:00
**#3 —** Add three fields in this Content Type.
2017-10-10 11:15:24 +02:00
2018-10-28 08:15:31 +01:00
- A `string` field named `title`.
- A `text` field named `content` (tick the `Display as WYSIWYG` in the `Advanced Settings` tab).
- A `media` field named `cover`.
2017-10-12 16:01:25 +02:00
2018-10-28 08:15:31 +01:00
![Content Type Builder - List fields in Post](../assets/getting-started_list_fields.png)
2017-10-12 16:01:25 +02:00
**#4 —** Save. That's it!
2017-10-10 11:15:24 +02:00
::: note
See the [CLI documentation](../cli/CLI.md#strapi-generateapi) for more information on how to do it the hacker way.
:::
2017-10-10 11:15:24 +02:00
### Files structure
2018-10-28 08:15:31 +01:00
A new directory has been created in the `./api` folder of your application which contains all the needed stuff for your `Post` Content Type: routes, controllers, services and models. Take a look at the [API structure documentation](../concepts/concepts.md#files-structure) for more informations.
2017-10-10 11:15:24 +02:00
2018-10-28 08:15:31 +01:00
**Well done, you created your first Content Type using Strapi!**
2017-10-10 11:15:24 +02:00
***
2018-10-28 08:15:31 +01:00
## 4. Add content
2017-10-10 11:15:24 +02:00
2018-10-28 08:15:31 +01:00
After creating [your first Content Type](#_3-create-a-content-type), you probably want to create, edit or delete entries. No worries, everything is ready for you:
2017-10-10 11:15:24 +02:00
2018-10-28 08:15:31 +01:00
**#1 —** Go to the [**Post list**](http://localhost:1337/admin/plugins/content-manager/post/) by clicking on the link in the left menu (generated by the **Content Manager** plugin).
2017-10-10 11:15:24 +02:00
2017-12-13 13:24:46 +01:00
![Content Type Builder - Home](../assets/getting-started_no_entry.png)
2017-10-10 11:15:24 +02:00
2018-10-28 08:15:31 +01:00
**#2 —** Click on the button `Add New Post` and fill the form.
2017-10-10 11:15:24 +02:00
2017-12-13 13:24:46 +01:00
![Content Type Builder - Home](../assets/getting-started_add_entry.png)
2017-10-10 11:15:24 +02:00
**#3 —** Save! You can edit or delete this entry by clicking on the icons at the right of the row.
2017-10-10 11:15:24 +02:00
2017-12-13 13:24:46 +01:00
![Content Type Builder - Home](../assets/getting-started_with_entry.png)
2017-10-10 11:15:24 +02:00
***
2018-10-28 08:15:31 +01:00
## 5. Consume the API
2017-10-10 11:15:24 +02:00
2018-10-28 08:15:31 +01:00
Your API is now ready and [contains data](#_4-add-content). At this point, you'll probably want to use this data in mobile or desktop applications.
In order to do so, you'll need to allow access to other users (identified as 'Public').
2017-12-13 13:24:46 +01:00
**1 -** Go to the [**Roles & Permissions View**](http://localhost:1337/admin/plugins/users-permissions/roles) by clicking on **Roles & Permissions** link in the left menu.
2017-12-13 13:24:46 +01:00
![Auth & Permissions - Home](../assets/getting-started_manage_role_home.png)
2018-10-28 08:15:31 +01:00
**2 -** Click on the `Public` role, enable the actions related to your new Content Type and save:
2017-12-13 13:24:46 +01:00
2018-10-28 08:15:31 +01:00
![Auth & Permissions - Edit Public](../assets/getting-started_allow_access.png)
2017-12-13 13:24:46 +01:00
2018-10-28 08:15:31 +01:00
::: note
You should now be able to get the list of posts from the API: [http://localhost:1337/posts](http://localhost:1337/posts).
:::
2017-10-10 11:15:24 +02:00
2017-10-11 10:51:28 +02:00
### List entries (GET)
2017-10-10 11:15:24 +02:00
2018-10-28 08:15:31 +01:00
To retrieve the list of posts, use the `GET /posts` route.
2017-10-10 11:15:24 +02:00
2018-10-28 08:15:31 +01:00
Generated APIs provide a handy way to filter and order queries. In that way, ordering posts by price is as easy as `GET http://localhost:1337/posts?_sort=price:asc`. For more informations, read the [filters documentation](../guides/filters.md).
2017-10-10 11:15:24 +02:00
2018-10-28 08:15:31 +01:00
Here is an example using Axios:
2017-10-10 11:15:24 +02:00
```js
2018-10-28 08:15:31 +01:00
import axios from 'axios';
// Request API.
axios
.get('http://localhost:1337/posts', {
params: {
_sort: 'createdAt:desc' // Generates http://localhost:1337/posts?_sort=createdAt:desc
}
})
.then(response => {
// Handle success.
console.log('Well done, here is the list of posts: ', response.data);
})
.catch(error => {
// Handle error.
2017-10-10 11:15:24 +02:00
console.log('An error occurred:', error);
2018-10-28 08:15:31 +01:00
});
2017-10-10 11:15:24 +02:00
```
2017-10-11 10:51:28 +02:00
### Get a specific entry (GET)
2017-10-10 11:15:24 +02:00
2018-10-28 08:15:31 +01:00
If you want to get a specific entry, add the `id` of the wanted post at the end of the url.
Example with Axios:
2017-10-10 11:15:24 +02:00
```js
2018-10-28 08:15:31 +01:00
import axios from 'axios';
const postId = 'YOUR_POST_ID_HERE'; // Replace with one of your posts id.
// Request API.
axios
.get(`http://localhost:1337/posts/${postId}`)
.then(response => {
// Handle success.
console.log('Well done, here is the post: ', response.data);
})
.catch(error => {
// Handle error.
2017-10-10 11:15:24 +02:00
console.log('An error occurred:', error);
2018-10-28 08:15:31 +01:00
});
2017-10-10 11:15:24 +02:00
```
### Create data (POST)
Use the `POST` route to create a new entry.
Example with Axios:
2017-10-10 11:15:24 +02:00
```js
2018-10-28 08:15:31 +01:00
import axios from 'axios';
// Request API.
axios
.post(`http://localhost:1337/posts/`, {
title: 'My new post'
})
.then(response => {
// Handle success.
console.log(
'Well done, your post has been successfully created: ',
response.data
);
})
.catch(error => {
// Handle error.
2017-10-10 11:15:24 +02:00
console.log('An error occurred:', error);
2018-10-28 08:15:31 +01:00
});
2017-10-10 11:15:24 +02:00
```
### Update data (PUT)
Use the `PUT` route to update an existing entry.
Example with Axios:
2017-10-10 11:15:24 +02:00
```js
2018-10-28 08:15:31 +01:00
import axios from 'axios';
const postId = 'YOUR_POST_ID_HERE'; // Replace with one of your posts id.
// Request API.
axios
.put(`http://localhost:1337/posts/${postId}`, {
title: 'Updated title'
})
.then(response => {
// Handle success.
console.log(
'Well done, your post has been successfully updated: ',
response.data
);
})
.catch(error => {
// Handle error.
2017-10-10 11:15:24 +02:00
console.log('An error occurred:', error);
2018-10-28 08:15:31 +01:00
});
2017-10-10 11:15:24 +02:00
```
### Delete data (DELETE)
Use the `DELETE` route to delete an existing entry.
Example with Axios:
2017-10-10 11:15:24 +02:00
```js
2018-10-28 08:15:31 +01:00
import axios from 'axios';
const postId = 'YOUR_POST_ID_HERE'; // Replace with one of your posts id.
// Request API.
axios
.delete(`http://localhost:1337/posts/${postId}`)
.then(response => {
// Handle success.
console.log(
'Well done, your post has been successfully updated: ',
response.data
);
})
.catch(error => {
// Handle error.
2017-10-10 11:15:24 +02:00
console.log('An error occurred:', error);
2018-10-28 08:15:31 +01:00
});
2017-10-10 11:15:24 +02:00
```
***
2018-10-28 08:15:31 +01:00
#### 👏 Congratulations!
You successfully finished the Getting Started guide! Read the [concepts section](../concepts/concepts.md) to understand more deeply how to use and customize Strapi.
2017-10-10 11:15:24 +02:00
Also, feel free to join the community thanks to the different channels listed in the [community page](http://strapi.io/community): team members, contributors and developers will be happy to help you.