From fcb874b5e499f8f620f98947c9809f22180bada5 Mon Sep 17 00:00:00 2001 From: Pierre Burgy Date: Wed, 13 Mar 2019 18:31:02 +0100 Subject: [PATCH] Quick start improvements --- docs/.vuepress/config.js | 3 +- docs/.vuepress/theme/NavLinks.vue | 24 +++ docs/.vuepress/theme/styles/theme.styl | 15 ++ docs/3.x.x/articles/README.md | 2 +- docs/3.x.x/community.md | 25 --- .../getting-started/quick-start-tutorial.md | 27 ++-- docs/3.x.x/getting-started/quick-start.md | 145 ++++-------------- docs/package-lock.json | 41 ++--- 8 files changed, 102 insertions(+), 180 deletions(-) delete mode 100644 docs/3.x.x/community.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 23d99d9db8..7fa945dec7 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -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', ], }, ], diff --git a/docs/.vuepress/theme/NavLinks.vue b/docs/.vuepress/theme/NavLinks.vue index 38dcfd773f..0bb2d63fe4 100644 --- a/docs/.vuepress/theme/NavLinks.vue +++ b/docs/.vuepress/theme/NavLinks.vue @@ -17,6 +17,22 @@ Website + + Blog + + + + Slack + + - +
+ +
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. ::: diff --git a/docs/3.x.x/getting-started/quick-start.md b/docs/3.x.x/getting-started/quick-start.md index dfd93f235b..ab9310272c 100644 --- a/docs/3.x.x/getting-started/quick-start.md +++ b/docs/3.x.x/getting-started/quick-start.md @@ -1,159 +1,78 @@ # Quick Start Guide - +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).) +
+ +
-___ +*For a step-by-step guide, please take a look at the [detailed tutorial](quick-start-tutorial.html).* ## 1. Install Strapi globally - - -(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 - - ```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 - +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 - - -### 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 - +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 - +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 - - -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. ::: diff --git a/docs/package-lock.json b/docs/package-lock.json index 57684c6e13..698fb2c3b9 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -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 } } },