Quick start improvements

This commit is contained in:
Pierre Burgy 2019-03-13 18:31:02 +01:00
parent d7e88cf676
commit fcb874b5e4
8 changed files with 102 additions and 180 deletions

View File

@ -58,6 +58,8 @@ module.exports = {
versions: [['Version 3.x.x', '/3.x.x/'], ['Version 1.x.x', '/1.x.x/']],
repo: 'strapi/strapi',
website: 'https://strapi.io',
slack: 'https://slack.strapi.io',
blog: 'https://blog.strapi.io',
docsDir: 'docs',
editLinks: true,
editLinkText: 'Improve this page',
@ -144,7 +146,6 @@ module.exports = {
],
'/3.x.x/migration-guide/',
'/3.x.x/articles/',
'/3.x.x/community',
],
},
],

View File

@ -17,6 +17,22 @@
Website
<OutboundLink/>
</a>
<a
:href="blogLink"
class="repo-link"
target="_blank"
rel="noopener noreferrer">
Blog
<OutboundLink/>
</a>
<a
:href="slackLink"
class="repo-link"
target="_blank"
rel="noopener noreferrer">
Slack
<OutboundLink/>
</a>
<a v-if="repoLink"
:href="repoLink"
class="repo-link"
@ -116,6 +132,14 @@ export default {
? slack
: `https://${slack}`
}
},
blogLink () {
const { blog } = this.$site.themeConfig
if (blog) {
return /^https?:/.test(blog)
? blog
: `https://${blog}`
}
}
}
}

View File

@ -210,6 +210,21 @@ th, td
.custom-layout
padding-top 0
.video-container
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
.video-container iframe,
.video-container object,
.video-container embed
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
@media (min-width: ($MQMobile + 1px))
.theme-container.no-sidebar
.sidebar

View File

@ -9,7 +9,7 @@ Go further with Strapi, official and community tutorials are here to help you:
### Development
- [Building a static blog using Gatsby and Strapi (official)](https://hackernoon.com/building-a-static-blog-using-gatsby-and-strapi-8b5acfc82ad8)
- [Building a static blog using Gatsby and Strapi (official)](https://blog.strapi.io/building-a-static-website-using-gatsby-and-strapi)
- [🍝 Cooking a Deliveroo clone with Nuxt (Vue.js), GraphQL, Strapi and Stripe (official)](https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-setup-part-1-7)
- [🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe](https://blog.strapi.io/strapi-next-setup)

View File

@ -1,25 +0,0 @@
# Our Strapi Community
We have a vibrant and active community. You can get help, contribute and stay informed about Strapi on the following channels.
## The Official Strapi Blog
You can discover our articles and news on the [Official Strapi Blog](https://blog.strapi.io/).
## GitHub
You can review, read and clone the [official Strapi monorepo on GitHub](https://github.com/strapi/strapi).
Our contribution guidelines and code of conduct can be located at [Strapi GitHub Contributor Guide](https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md).
## Slack
The best way to participate in the community, apart from GitHub, is through Slack. Join out [official Strapi Slack Group](https://slack.strapi.io/).
## Twitter
A popular way for you to discover news, releases and information about Strapi is to [follow Strap on Twitter](https://twitter.com/strapijs).
## Medium
Very often we publish content from our [blog](https://blog.strapi.io/) to our [Official Strapi Medium page](https://medium.com/@strapi). This is convenient for our users with Medium accounts.

View File

@ -2,12 +2,13 @@
This Tutorial is written for developers who prefer a more detailed step-by-step introduction. (A less detailed introduction can be found at [Quick Start Guide](/3.x.x/getting-started/quick-start.html).)
<iframe width="800" height="450" src="https://www.youtube.com/embed/nux0djdHmY8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="video-container">
<iframe width="800" height="450" src="https://www.youtube.com/embed/nux0djdHmY8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
By following this tutorial, we will get Strapi installed globally onto your system, and then create your first Strapi project.
::: warning NOTE
::: 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](http://localhost:8080/documentation/3.x.x/getting-started/install-requirements.html).
:::
@ -73,13 +74,13 @@ strapi new cms --quickstart
The command will automatically create a Strapi project `cms` folder within your parent `Projects/` directory.
::: warning NOTE
::: tip NOTE
When you create a new Quick Start project in Strapi, you will download all the node modules, the Strapi files necessary and the Strapi plugin files. THIS STEP CAN TAKE SEVERAL MINUTES DEPENDING ON YOUR INTERNET CONNECTION SPEED. Please wait for the process to complete before cancelling or trying to continue.
:::
::: warning NOTE
::: tip NOTE
You can replace the `/cms` project name with any name you want.
:::
@ -118,7 +119,7 @@ This will open your default browser to the Welcome page for creating an admin us
![Strapi Welcome Page for creating admin user](../assets/quick-start-detailed/strapi-welcome-screen.png 'Strapi Welcome Page for creating admin user')
::: warning NOTE
::: tip NOTE
Using the `--quickstart` flag will install Strapi using a [SQLite](https://www.sqlite.org/index.html) database. You may leave off the flag, but will need to follow the configuration steps for a different database.
:::
@ -166,7 +167,7 @@ We will create two content types. We will create a content type called `Restaura
![Create Content Type Screen](../assets/quick-start-detailed/CreateContentTypeScreen.png 'Create Content Type Screen')
::: warning NOTE
::: tip NOTE
Content Type `name` is always **singular**. For example, `restaurant` not `restaurants`. For example, `category` not `categories`.
@ -341,7 +342,7 @@ You return to the **Category** Content Type page. You see both categories listed
![Both categories listed](../assets/quick-start-detailed/categoriesListed.png 'Both categories listed')
::: warning NOTE
::: 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 we did above.
@ -382,7 +383,7 @@ What we want is the **Restaurant Content Type**. The route is `/restaurants`. In
![Successful API call to Restaurant Content Type](../assets/quick-start-detailed/successApiCall.png 'Successful API call to Restaurant Content Type')
::: warning NOTE
::: 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.
@ -393,5 +394,11 @@ Forbidden Access Looks like this:
:::
::: tip CONGRATULATIONS
👏 Congratulations, you have now completed the Tutoral showing you how to get started with Strapi. We invite you to [join our community](/3.x.x/community.html). Please continue reviewing our docs and tutorials to further learn how Strapi can solve your needs.
👏 Congratulations, you have now completed the Strapi Quick Start. Where to go next?
- Learn how to use Strapi with React ([Gatsby](https://blog.strapi.io/building-a-static-website-using-gatsby-and-strapi) or [Next.js](https://blog.strapi.io/strapi-next-setup/)) or Vue.js ([Nuxt.js](https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-setup-part-1-7/)).
- Read the [concepts](../concepts/concepts.html) and [articles](../articles/) to deep dive into Strapi.
- Get help on [StackOverflow](https://stackoverflow.com/questions/tagged/strapi).
- Read the [source code](https://github.com/strapi/strapi), [contribute](https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md) or [give a star](https://github.com/strapi/strapi) on GitHub.
- Follow us on [Twitter](https://twitter.com/strapijs) to get the latest news.
- [Join the vibrant and active Strapi community](https://slack.strapi.io) on Slack.
:::

View File

@ -1,159 +1,78 @@
# Quick Start Guide
<iframe width="800" height="450" src="https://www.youtube.com/embed/nux0djdHmY8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Get ready to make Strapi up and running in **less than 5 minutes** 🚀
(A tutorial of this Quick Start guide can be found at [Quick Start Tutorial](quick-start-tutorial.html).)
<div class="video-container">
<iframe width="800" height="450" src="https://www.youtube.com/embed/nux0djdHmY8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
___
*For a step-by-step guide, please take a look at the [detailed tutorial](quick-start-tutorial.html).*
## 1. Install Strapi globally
<iframe width="800" height="450" src="https://www.youtube.com/embed/v-vCMD2YdRk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
(These steps continue after [Node.js and npm are properly installed](install-requirements.html).)
Please make sure [Node.js and npm are properly installed](install-requirements.html) on your machine.
```bash
npm install strapi@alpha -g
```
Strapi is now installed globally on your computer.
Type `strapi -h` in your command line to access available Strapi commands.
## 2. Create a new project
<iframe width="800" height="450" src="https://www.youtube.com/embed/ZlvI4RAsIJM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
```bash
strapi new cms --quickstart
```
::: warning NOTE
Using the `--quickstart` flag will install Strapi using a [SQLite](https://www.sqlite.org/index.html) database. You may leave off the flag to follow the configuration steps for a different database.
:::
This will open your default browser to the Welcome page that creates an admin user.
## 3. Create an admin user
<iframe width="800" height="450" src="https://www.youtube.com/embed/Nfn3osX-5C4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Navigate to [**http://localhost:1337/admin**](http://localhost:1337/admin).
The first user you create is the root user for your project. This user has all privileges and access rights. You will need to fill in the form of the following fields:
- **Username**, create a username, eg. `paulbocuse`
- **Password**, create a unique password
- **Email address**, used for account recovery
- Check **Receive news**, this is optional, but recommended
- Click the **Ready to Start** button
- Fill in the form.
- Click **Ready to start**.
## 4. Create a Content Type
<iframe width="800" height="450" src="https://www.youtube.com/embed/p6klmrb1yPo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
### The Restaurant Content Type
Navigate to **PLUGINS** --> **Content Type Builder**.
The Restaurant Content Type will have a **String** field and a **Text** field (with a **WYSIWYG editor**).
1. Add a new **Content Type**:
Navigate to [**PLUGINS** - **Content Type Builder**](http://localhost:1337/admin/plugins/content-type-builder).
- Click the **"+ Add Content Type"** button.
- Enter the *singular* (never plural) "Name" for your **New Content Type** (eg. `restaurant`), and below write a "description". (eg. `Recommended Restaurants`).
- Click **Save**.
2. Add the **Name Content Type field**.
- Enter `restaurant`.
- Click **"+ Add New Field"**
- Click the **String** field.
- Type `name` under the **BASE SETTINGS** tab, in the **Name** field.
- Click **Continue**.
- Click **"+ Add New Field"**
- Click the **String** field.
- Under the **BASE SETTINGS** tab, in the **Name** field, type `name`.
- Click the **ADVANCED SETTINGS** tab, check **Required field** and **Unique field**.
- Click **Continue**.
3. Add the **Text Content Type Field**.
- Click **"+ Add New Field"**
- Click the **Text** field.
- Under the **BASE SETTINGS** tab, in the **Name** field, type `description`.
- Click the **ADVANCED SETTINGS** tab, check **Display as a WYSIWYG** and **Unique field**.
- Click **Continue**.
4. Click the **Save** button and wait for Strapi to restart.
### The Category Content Type
Navigate to **PLUGINS** --> **Content Type Builder**.
The Category Content Type will have a **String** field and a **Relation field** with a **Many to Many** relationship.
1. Add a new **Content Type**:
- Click the **"+ Add Content Type"** button.
- Enter the *singular* (never plural) "Name" for your **New Content Type** (eg. `category`), and below write a "description". (eg. `Restaurant Categories`).
- Click **Save**.
2. Add the **Name Content Type field**.
- Click **"+ Add New Field"**
- Click the **String** field.
- Under the **BASE SETTINGS** tab, in the **Name** field, type `name`.
- Click the **ADVANCED SETTINGS** tab, check **Required field** and **Unique field**.
- Click **Continue**.
3. Add the **Relation**.
- Click **"+ Add New Field"**
- Click the **Relation** field.
- On the right, ensure **Restaurant** displays in the **Content Type Category** dropdown.
- Click the **Many to Many** icon (in the middle). It should now read, **"Categories has and belongs to many Restaurants"**.
- Click **Continue**.
4. Click the **Save** button and wait for Strapi to restart.
- Click the **Text** field.
- Type `description` under the **BASE SETTINGS** tab, in the **Name** field.
- Click the **ADVANCED SETTINGS** tab, check **Display as a WYSIWYG**.
- Click **Continue**.
- Click the **Save** button and wait for Strapi to restart.
## 5. Manage and add data to Content Type
<iframe width="800" height="450" src="https://www.youtube.com/embed/0kQ_G91s5u8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Navigate to [**CONTENT TYPES** - **Restaurants**](http://localhost:1337/admin/plugins/content-manager/restaurant?source=content-manager).
### Add data to Content Type
1. Create an entry of a restaurant called, **"Strapi Restaurant"**:
- Click on **Restaurants** under the **CONTENT TYPES** menu.
- Click on **+ Add New Restaurant** button. Type `Strapi Restaurant` in the **Name** field. Type `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.
- Click **Save**.
You will see your restaurant listed in the entries.
2. Add the **Category items** to the **Categories Content Type**.
- Click **Categories** under the **CONTENT TYPES** menu on the left.
- Click **+ Add New Category** to add the category **Italian**.
- Type `Italian` into the **Name** field.
- Select **Strapi Restaurant** to assign this category. (See **Restaurants (0)** to the right.)
- Click **Save**.
- Click **+ Add New Category** to add the category **Contemporary**.
- Type `Contemporary` into the **Name** field.
- Select **Strapi Restaurant** to assign this category. (See **Restaurants (0)** to the right.)
- Click **Save**.
Both categories are listed on the **Category Content Type** page.
You will see your restaurant listed in the entries.
## 6. Set roles and permissions
<iframe width="800" height="450" src="https://www.youtube.com/embed/wYWCqeQEP6M" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Navigate to [**PLUGINS** - **Roles & Permission**](http://localhost:1337/admin/plugins/users-permissions/roles).
Give Public access to the Restaurant Content Type.
- Click the **Roles & Permission** menu item under **PLUGINS** on the left menu.
- Click the **pencil** edit icon to the right of the **Public** Role.
- Scroll down under **Permissions**, find **Restaurant**. Click the checkbox next to **find**. To the right, the URL route should say, `/restaurants`.
- Scroll down under **Permissions**, find **Restaurant**. Click the checkbox next to **find**.
- Click **Save**.
## 7. Consume the Content Type API
<iframe width="800" height="450" src="https://www.youtube.com/embed/9StcmcyBrd4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
The **Restaurant Content Type** is accessible at `http://localhost:1337/restaurants`.
Here we are! The list of **restaurants** is accessible at [`http://localhost:1337/restaurants`](http://localhost:1337/restaurants).
::: tip CONGRATULATIONS
👏 Congratulations, you have now completed the Strapi Quick Start. We invite you to [join the vibrant and active Strapi community](/3.x.x/community.html). Please continue reviewing our docs and tutorials to further learn how Strapi can solve your needs.
👏 Congratulations, you have now completed the Strapi Quick Start. Where to go next?
- Learn how to use Strapi with React ([Gatsby](https://blog.strapi.io/building-a-static-website-using-gatsby-and-strapi) or [Next.js](https://blog.strapi.io/strapi-next-setup/)) or Vue.js ([Nuxt.js](https://blog.strapi.io/cooking-a-deliveroo-clone-with-nuxt-vue-js-graphql-strapi-and-stripe-setup-part-1-7/)).
- Read the [concepts](../concepts/concepts.html) and [articles](../articles/) to deep dive into Strapi.
- Get help on [StackOverflow](https://stackoverflow.com/questions/tagged/strapi).
- Read the [source code](https://github.com/strapi/strapi), [contribute](https://github.com/strapi/strapi/blob/master/CONTRIBUTING.md) or [give a star](https://github.com/strapi/strapi) on GitHub.
- Follow us on [Twitter](https://twitter.com/strapijs) to get the latest news.
- [Join the vibrant and active Strapi community](https://slack.strapi.io) on Slack.
:::

41
docs/package-lock.json generated
View File

@ -4221,8 +4221,7 @@
},
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"optional": true
"bundled": true
},
"aproba": {
"version": "1.2.0",
@ -4240,13 +4239,11 @@
},
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"optional": true
"bundled": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -4259,18 +4256,15 @@
},
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"optional": true
"bundled": true
},
"core-util-is": {
"version": "1.0.2",
@ -4373,8 +4367,7 @@
},
"inherits": {
"version": "2.0.3",
"bundled": true,
"optional": true
"bundled": true
},
"ini": {
"version": "1.3.5",
@ -4384,7 +4377,6 @@
"is-fullwidth-code-point": {
"version": "1.0.0",
"bundled": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -4397,20 +4389,17 @@
"minimatch": {
"version": "3.0.4",
"bundled": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
},
"minimist": {
"version": "0.0.8",
"bundled": true,
"optional": true
"bundled": true
},
"minipass": {
"version": "2.3.5",
"bundled": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -4427,7 +4416,6 @@
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -4500,8 +4488,7 @@
},
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"optional": true
"bundled": true
},
"object-assign": {
"version": "4.1.1",
@ -4511,7 +4498,6 @@
"once": {
"version": "1.4.0",
"bundled": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -4587,8 +4573,7 @@
},
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"optional": true
"bundled": true
},
"safer-buffer": {
"version": "2.1.2",
@ -4618,7 +4603,6 @@
"string-width": {
"version": "1.0.2",
"bundled": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -4636,7 +4620,6 @@
"strip-ansi": {
"version": "3.0.1",
"bundled": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -4675,13 +4658,11 @@
},
"wrappy": {
"version": "1.0.2",
"bundled": true,
"optional": true
"bundled": true
},
"yallist": {
"version": "3.0.3",
"bundled": true,
"optional": true
"bundled": true
}
}
},