Skip to content

[v4] Various Misc fixes to documentation #483

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Nov 22, 2021
Merged

[v4] Various Misc fixes to documentation #483

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
cbc41d6
Minor fixes
derrickmehaffy Nov 9, 2021
8a085be
more small fixes
derrickmehaffy Nov 10, 2021
f0935e9
pr feedback
derrickmehaffy Nov 10, 2021
389c84b
fix api config defaults
derrickmehaffy Nov 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions docs/developer-docs/latest/getting-started/introduction.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ description: This documentation contains all technical documentation related to

This documentation contains all technical documentation related to the setup, deployment, update and customization of your Strapi application.

::: strapi Can't wait to start using Strapi?
::: strapi Can't wait to start using Strapi?
You can directly head to the [Quick Start](quick-start.md)! <br> If demos are more your thing, we have a [video demo](https://youtu.be/zd0_S_FPzKg), or you can request a [live demo](https://strapi.io/demo)!
:::

Expand All @@ -21,22 +21,20 @@ As it goes hand in hand with the open-source ecosystem, Strapi is open to contri

- [`strapi/strapi`](https://github.com/strapi/strapi): main repository of Strapi, which contains the core of the project. You can find the admin panel, core plugins, plugin providers, and the whole code that runs your Strapi application. Please read the [`CONTRIBUTING.md`](https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md) file to have more information about contributions to the main repository.
- [`strapi/documentation`](https://github.com/strapi/documentation): contains the whole documentation of Strapi. Please read the [contribution guide](https://github.com/strapi/documentation/blob/main/CONTRIBUTING.md) to have more information about contributions to the Strapi documentation.
- [`strapi/buffet`](https://github.com/strapi/buffet): [Buffet](https://buffetjs.io) is the component library that is used in the admin panel. It brings consistency between the different admin plugins.
- [`strapi/design-system`](https://github.com/strapi/design-system): is the design system that is used in the admin panel. It brings consistency between the different admin plugins.
- [`strapi/strapi-docker`](https://github.com/strapi/strapi-docker): contains the code used to generate the official Docker images for Strapi (available through our [Docker Hub](https://hub.docker.com/r/strapi/strapi)).
- [`strapi/awesome-strapi`](https://github.com/strapi/awesome-strapi): contains everything the community built and all managed plugins. It is used as a central place to find and submit new packages such as plugins, middlewares, hooks, and general enhancements to the core of Strapi.


## Strapi Community

Strapi is a community-oriented project with an emphasis on transparency. The Strapi team has at heart to share their vision and build the future of Strapi with the Strapi community. This is why the [roadmap](https://portal.productboard.com/strapi) is open: as all insights are very important and will help steer the project in the right direction, any community member is most welcome to share ideas and opinions there.

Community members also take great part in providing the whole community a plethora of resources about Strapi. You can find [tutorials](https://strapi.io/tutorials/) on the Strapi website, where you can also create your own. Also, as an open-source project, the technical documentation of Strapi is open to contributions (see [Open-source & Contribution](#open-source-contribution)).

::: strapi Want to join the community?
You can join [GitHub](https://github.com/strapi/strapi) and the [forum](https://forum.strapi.io/) and share your ideas and opinions with other community members and members of the Strapi team. If you're looking for news and updates about Strapi, [Twitter](https://twitter.com/strapijs) and the [blog](https://strapi.io/blog) are pretty good places to start!
You can join [GitHub](https://github.com/strapi/strapi), the [Forum](https://forum.strapi.io/), and the [Discord](https://discord.strapi.io) to share your ideas and opinions with other community members and members of the Strapi team. If you're looking for news and updates about Strapi, [Twitter](https://twitter.com/strapijs) and the [blog](https://strapi.io/blog) are pretty good places to start!
:::


## Support

Strapi is offered as free and open-source for users who wish to self-host the software. When having an issue or a question, the [forum](https://forum.strapi.io) is great first place to reach out for help. Both the Strapi community and core developers often check this platform and answer posts.
Expand Down
79 changes: 43 additions & 36 deletions docs/developer-docs/latest/getting-started/quick-start.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,15 +91,16 @@ Make sure [Node.js and npm are properly installed](/developer-docs/latest/setup-

👇 Let's get started! Using the big buttons below, please choose between:

* the **Hands-on** path for a DIY approach to run your project
* or the **Starters** path for the quickest way to spin up a fullstack application powered by a Strapi back end.
- the **Hands-on** path for a DIY approach to run your project
- or the **Starters** path for the quickest way to spin up a fullstack application powered by a Strapi back end.

:::::: tabs type:card

<!-- we need 5 colons or it will conflict with the callouts markup -->

::::: tab Hands-on

## 🚀 Part A: Create a new project with Strapi
## 🚀 Part A: Create a new project with Strapi

### Step 1: Run the installation script

Expand All @@ -109,7 +110,7 @@ Run the following command in a terminal:

<code-block title="NPM">
```bash
npx create-strapi-app my-project --quickstart
npx create-strapi-app@latest my-project --quickstart
```
</code-block>

Expand Down Expand Up @@ -157,7 +158,7 @@ Your restaurants directory will eventually include many restaurants, so we need

1. Go to [Plugins > Content-Type Builder](http://localhost:1337/admin/plugins/content-type-builder) in the main navigation.
2. Click on **Create new collection type**.
3. Type `restaurant` for the _Display name_, and click **Continue**.
3. Type `restaurant` for the _Display name_, and click **Continue**.
4. Click the Text field.
5. Type `name` in the _Name_ field.
6. Switch to the _Advanced Settings_ tab, and check the **Required field** and the **Unique field** settings.
Expand Down Expand Up @@ -192,13 +193,14 @@ It would help getting a bit more organized if our restaurants directory had some
### Step 2: Use the collection types to create new entries

Now that we have created a basic data structure with 2 collection types, "Restaurant" and "Category", let's use them to actually add content by creating new entries.

#### Create an entry for the "Restaurant" collection type

1. Go to [Collection types > Restaurants](http://localhost:1337/admin/plugins/content-manager/collectionType/application::restaurant.restaurant) in the main navigation.
2. Click on **Add New Restaurants**.
3. Type the name of your favorite local restaurant in the _Name_ field. Let's say it's `Biscotte Restaurant`.
4. In the _Description_ field, write a few words about it. If you're lacking some inspiration, you can use `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.`
5. Click **Save**.
5. Click **Save**.

![Screenshot: Biscotte Restaurant in Content Manager](../assets/quick-start-guide/qsg-handson-part2-03-restaurant.png)

Expand All @@ -210,9 +212,9 @@ Let's go to [Collection types > Categories](http://localhost:1337/admin/plugins/

1. Click on **Add New Categories**.
2. Type `French Food` in the _Name_ field.
4. Click **Save**.
5. Go back to _Collection types > Categories_, then click again on **Add New Categories**.
6. Type `Brunch` in the _Name_ field, then click **Save**.
3. Click **Save**.
4. Go back to _Collection types > Categories_, then click again on **Add New Categories**.
5. Type `Brunch` in the _Name_ field, then click **Save**.

![GIF: Add Categories](../assets/quick-start-guide/qsg-handson-categories.gif)

Expand All @@ -222,7 +224,7 @@ The "French Food" and "Brunch" categories are now listed in the [Collection type

Go to [Collection types > Restaurants](http://localhost:1337/admin/plugins/content-manager/collectionType/application::restaurant.restaurant) in the main navigation, and click on "Biscotte Restaurant".

In the right sidebar, in the **Categories** drop-down list, select "Brunch". Click **Save**.
In the right sidebar, in the **Categories** drop-down list, select "Brunch". Click **Save**.

### Step 3: Set Roles & Permissions

Expand All @@ -247,13 +249,14 @@ First, navigate to [Collection types > Categories](http://localhost:1337/admin/p

1. Click the "Brunch" entry.
2. On the next screen, click **Publish**.
3. In the _Please confirm_ window, click **Yes, publish**.
3. In the _Please confirm_ window, click **Yes, publish**.

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

Finally, to publish your favorite restaurant, go to [Collection types > Restaurants](http://localhost:1337/admin/plugins/content-manager/collectionType/application::restaurant.restaurant), click the restaurant entry, and **Publish** it.

![GIF: Publish content](../assets/quick-start-guide/qsg-handson-publish.gif)

### Step 5: 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.
Expand All @@ -267,26 +270,26 @@ Try it now! The result should be similar to the example response below 👇.
```json
[
{
"id":1,
"name":"Biscotte Restaurant",
"description":"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.",
"published_at":"2021-05-27T15:46:43.097Z",
"created_at":"2021-05-27T15:40:01.290Z",
"updated_at":"2021-05-27T15:46:43.110Z",
"categories":[
"id": 1,
"name": "Biscotte Restaurant",
"description": "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.",
"published_at": "2021-05-27T15:46:43.097Z",
"created_at": "2021-05-27T15:40:01.290Z",
"updated_at": "2021-05-27T15:46:43.110Z",
"categories": [
{
"id":1,
"name":"French Food",
"published_at":"2021-05-27T15:46:14.704Z",
"created_at":"2021-05-27T15:41:59.725Z",
"updated_at":"2021-05-27T15:46:14.725Z"
"id": 1,
"name": "French Food",
"published_at": "2021-05-27T15:46:14.704Z",
"created_at": "2021-05-27T15:41:59.725Z",
"updated_at": "2021-05-27T15:46:14.725Z"
},
{
"id":2,
"name":"Brunch",
"published_at":"2021-05-27T15:46:02.015Z",
"created_at":"2021-05-27T15:42:29.201Z",
"updated_at":"2021-05-27T15:46:02.035Z"
"id": 2,
"name": "Brunch",
"published_at": "2021-05-27T15:46:02.015Z",
"created_at": "2021-05-27T15:42:29.201Z",
"updated_at": "2021-05-27T15:46:02.035Z"
}
]
}
Expand All @@ -300,7 +303,7 @@ Now your content is created, published, and you have permissions to request it t
Keep on creating amazing content!
:::

## ⏩ What to do next?
## ⏩ What to do next?

### Consume your API

Expand Down Expand Up @@ -330,14 +333,18 @@ To create a [Gatsby](https://www.gatsbyjs.com/) blog using Strapi, run the follo

:::: tabs card
::: tab npm

```bash
npx create-strapi-starter my-project gatsby-blog
```

:::
::: tab yarn

```bash
yarn create strapi-starter my-project gatsby-blog
```

::::

During the installation, when terminal asks `Choose your installation type`: select the default `Quickstart (recommended)` option by pressing Enter. The installation then resumes — just let the magic happen!
Expand All @@ -346,15 +353,15 @@ During the installation, when terminal asks `Choose your installation type`: sel

Once the installation is complete, your browser automatically opens 2 tabs:

* The first tab ([http://localhost:1337/admin/auth/register-admin](http://localhost:1337/admin/auth/register-admin)) is the admin panel, it's for the back end of your application.
* The second tab ([http://localhost:8000](http://localhost:8000)) is for the front end of your application, and you can already see the Gatsby blog in action.
- The first tab ([http://localhost:1337/admin/auth/register-admin](http://localhost:1337/admin/auth/register-admin)) is the admin panel, it's for the back end of your application.
- The second tab ([http://localhost:8000](http://localhost:8000)) is for the front end of your application, and you can already see the Gatsby blog in action.

<img src="../assets/quick-start-guide/qsg-starters-part1-01-register.png" alt="" class="image--50" />
<img src="../assets/quick-start-guide/qsg-starters-part1-01-gatsby_fe.png" alt="" class="image--50 image--right" />

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

:::callout CONGRATULATIONS! 🥳
:::callout CONGRATULATIONS! 🥳
Your blog is ready! You can start playing with Strapi and discover the product by yourself using our [User Guide](/user-docs/latest/getting-started/introduction.md), or proceed to part B below.

Writing a blog is not your cup of tea? You can leave this guide and play with other [Starters](https://strapi.io/starters) on your own.
Expand Down Expand Up @@ -437,18 +444,18 @@ After a few moments, you should see your blog with its updated title running at
Now you know how to use Strapi to create and update your blog. Keep on creating amazing content!
:::

## ⏩ What to do next?
## ⏩ What to do next?

The beauty of using Strapi [starters](https://strapi.io/starters) is that the Strapi back end comes with a front end ready out-of-the-box. Now you probably want to show your shiny new website to the world! The next step is then to deploy both the Strapi back end and the front end on the platforms of your choice:

👉 You can deploy the Strapi back end on various services: Amazon AWS, Microsoft Azure, DigitalOcean, Google App Engine, Heroku, and many more (see our [Deployment guides](/developer-docs/latest/setup-deployment-guides/deployment.md)).

👉 Deploying the front end mostly depends on the technology it's based on. The easiest way to deploy your Gatsby blog front end is probably to [deploy on Gatsby Cloud](https://support.gatsbyjs.com/hc/en-us/articles/360052324714-Connecting-to-Strapi).

:::strapi To go further with starters
:::strapi To go further with starters

* Read more about the [starters CLI](https://strapi.io/blog/announcing-the-strapi-starter-cli) on our blog.
* Start another project! We have lots of other [Starters](https://strapi.io/starters) you can use to kickstart your blog, e-commerce, corporate website, or portfolio project.
- Read more about the [starters CLI](https://strapi.io/blog/announcing-the-strapi-starter-cli) on our blog.
- Start another project! We have lots of other [Starters](https://strapi.io/starters) you can use to kickstart your blog, e-commerce, corporate website, or portfolio project.

:::::

Expand Down
Loading