From e56940562ba6f3e45d44f85785fecc5d8c9a06f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Samard=C5=BEija?= <74252988+isamardzija@users.noreply.github.com> Date: Thu, 9 Mar 2023 22:35:36 +0100 Subject: [PATCH 01/18] Update payload.mdx Expand the stub with instructions how to make a new PayloadCMS collection, fetch it and build an Astro blog with it. --- src/content/docs/en/guides/cms/payload.mdx | 217 ++++++++++++++++++++- 1 file changed, 216 insertions(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index f98570744b865..b7fd1ceb5ce42 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -6,7 +6,222 @@ stub: true service: Payload CMS --- -[Payload](https://payloadcms.com/) is a headless CMS and application framework. +[PayloadCMS](https://payloadcms.com/) is a headless open-source content management system that can be used to provide content for your Astro project. + +## Integrating with Astro + +## Prerequisites + +To get started, you will need to have the following: + +1. **An Astro project** - If you don't have an Astro project yet, our [Installation guide](/en/install/auto/) will get you up and running in no time. +2. **A MongoDB database** - PayloadCMS will ask you for a MongoDB connection string when creating a new project. You can set one up locally or use [MongoDBAtlas](https://www.mongodb.com/) to host a database on the web for free. +3. **A PayloadCMS REST API** - Create a [PayloadCMS](https://payloadcms.com/) project and connect it to your MongoDB database during the setup. + +### Installing PayloadCMS + +Follow the [PayloadCMS Installation docs](https://payloadcms.com/docs/getting-started/installation) in order to install a fresh PayloadCMS app. During the PayloadCMS installation, you will be asked if you want to use a template. + +If you pick one of the available templates (such as 'blog'), additional collections will be generated for you. You can then skip the following section, because you already have a collection other than "Users" that you can use. + +If you don't pick any templates, only a single collection called "Users" will be generated. + +If you start the PayloadCMS server using `npm run dev`, you can go to `http://localhost:3000/admin` to enter your PayloadCMS Dashboard for the first time. Create the initial administrator account and enter the Dashboard. You should now see that the "Users" collection contains just the administrator account. + +#### Creating a PayloadCMS Collection + +You can create a new Collection called `Posts.ts` in `src/collections`. + +```astro title="src/collections" +import { CollectionConfig } from "payload/types"; + +const Posts: CollectionConfig = { + slug: "posts", + admin: { + useAsTitle: "title", + }, + access: { + read: () => true, + }, + + fields: [ + { + name: "title", + type: "text", + required: true, + }, + { + name: "content", + type: "text", + required: true, + }, + { + name: "slug", + type: "text", + required: true, + }, + ], +}; + +export default Posts; +``` + +This creates a "Posts" collection which requires the following : `title`, `content`, `slug`. You will use this collection to manage your blog posts. The colllection is publicly available, so you shouldn't put any sensitive info inside. + +You then need to import and add it to the available collections in the `payload.config.ts` file. + +```astro title="src/payload.config.ts" +import { buildConfig } from "payload/config"; +import path from "path"; + +import Users from "./collections/Users"; +import Posts from "./collections/Posts"; + +export default buildConfig({ + serverURL: "http://localhost:3000", + admin: { + user: Users.slug, + }, + collections: [Users, Posts], + typescript: { + outputFile: path.resolve(__dirname, "payload-types.ts"), + }, + graphQL: { + schemaOutputFile: path.resolve(__dirname, "generated-schema.graphql"), + }, +}); +``` + +If you then go into the PayloadCMS Dashboard, you should see a new collection called "Posts" appear next to the "Users" collection. Enter the "Posts" collection and create a new post. After saving it, you will notice the API URL appear in the bottom right corner. + +If not already running, start the server using `npm run dev` again. + +Open `http://localhost:3000/api/posts` in your browser. You should see a JSON file containing the post you have created as an object. + +:::tip +By default, both Astro and PayloadCMS will use the port 3000. You might want to change the PayloadCMS port in the `src/server.ts` file. Don't forget to update the `serverURL` in `src/payload.config.ts` as well. +::: + +```astro title="http://localhost:3000/api/posts" +{ + "docs":[ + { + "id":"64098b16483b0f06a7e20ed4", + "title":"Astro & PayloadCMS Title 🚀", + "content":"Astro & PayloadCMS Content", + "slug":"astro-payloadcms-slug", + "createdAt":"2023-03-09T07:30:30.837Z", + "updatedAt":"2023-03-09T07:30:30.837Z" + } + ], + "totalDocs":1, + "limit":10, + "totalPages":1, + "page":1, + "pagingCounter":1, + "hasPrevPage":false, + "hasNextPage":false, + "prevPage":null, + "nextPage":null +} +``` + +### Fetching Data + +Fetch your PayloadCMS data through your site's unique REST API URL and the route for your content. (By default, PayloadCMS will mount all routes through `/api`.) Then, you can render your data properties using Astro's `set:html=""` directive. + +Together with your post, PayloadCMS will return some top-level metadata. The actual documents are nested within the `docs` array. + +For example, to display a list of post titles and their content: + +```astro title="src/pages/index.astro" +--- +import HomeLayout from "../layouts/HomeLayout.astro"; + +const res = await fetch("http://localhost:5000/api/posts") // https://localhost:3000/api/posts by default +const posts = await res.json() +--- + + + { + posts.docs.map((post) => ( +

+

+ )) + } + +``` + +## Building a blog with PayloadCMS and Astro + +The page `src/pages/index.astro` lists each of your posts with a link to its own page. + +Fetching via the API an array of objects (posts) that include, among others, the following properties: + +- `title` +- `content` +- `slug` + +```astro title="src/pages/index.astro" +--- +import HomeLayout from "../layouts/HomeLayout.astro"; + +const res = await fetch("http://localhost:5000/api/posts") // https://localhost:3000/api/posts by default +const posts = await res.json() +--- + + +

Astro + PayloadCMS 🚀

+

Blog posts list:

+ + +``` + +### Using the PayloadCMS API to generate pages + +The page `src/pages/posts/[slug].astro` [dynamically generates a page](/en/core-concepts/routing/#dynamic-routes) for each post. + +```astro title="src/pages/posts/[slug].astro" +--- +import PostLayout from "../../layouts/PostLayout.astro" + +const {title, content} = Astro.props + +// The getStaticPaths() is required for static Astro sites. +// If using SSR, you will not need this function. +export async function getStaticPaths() { + let data = await fetch("http://localhost:5000/api/posts") + let posts = await data.json() + + return posts.docs.map((post) => { + return { + params: {slug: post.slug}, + props: {title: post.title, content: post.content}, + }; + }); +} +--- + +
+

+

+

+ +``` + +### Publishing your site + +To deploy your site visit our [deployment guide](/en/guides/deploy/) and follow the instructions for your preferred hosting provider. + ## Community Resources From 977964906af5c029aec79f30df77dbeb2da282f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Samard=C5=BEija?= <74252988+isamardzija@users.noreply.github.com> Date: Tue, 21 Mar 2023 19:00:36 +0100 Subject: [PATCH 02/18] Update src/content/docs/en/guides/cms/payload.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/cms/payload.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index b7fd1ceb5ce42..104bf1494c8fb 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -32,7 +32,7 @@ If you start the PayloadCMS server using `npm run dev`, you can go to `http://lo You can create a new Collection called `Posts.ts` in `src/collections`. -```astro title="src/collections" +```astro title="src/collections/Posts.ts" import { CollectionConfig } from "payload/types"; const Posts: CollectionConfig = { From 1a89ecb3064ca87e25bc04fbacf72f7976b2ab81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Samard=C5=BEija?= <74252988+isamardzija@users.noreply.github.com> Date: Tue, 21 Mar 2023 19:01:52 +0100 Subject: [PATCH 03/18] Update src/content/docs/en/guides/cms/payload.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/cms/payload.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index 104bf1494c8fb..f83122ec3d237 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -188,7 +188,7 @@ const posts = await res.json() ### Using the PayloadCMS API to generate pages -The page `src/pages/posts/[slug].astro` [dynamically generates a page](/en/core-concepts/routing/#dynamic-routes) for each post. +Create a page `src/pages/posts/[slug].astro` to [dynamically generate a page](/en/core-concepts/routing/#dynamic-routes) for each post. ```astro title="src/pages/posts/[slug].astro" --- From 0bbddaf02b9d52b6232570826453096c365f78e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Samard=C5=BEija?= <74252988+isamardzija@users.noreply.github.com> Date: Tue, 21 Mar 2023 19:02:12 +0100 Subject: [PATCH 04/18] Update src/content/docs/en/guides/cms/payload.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/cms/payload.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index f83122ec3d237..19f0a12ef71d4 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -154,7 +154,7 @@ const posts = await res.json() ## Building a blog with PayloadCMS and Astro -The page `src/pages/index.astro` lists each of your posts with a link to its own page. +Create a blog index page `src/pages/index.astro` to list each of your posts with a link to its own page. Fetching via the API an array of objects (posts) that include, among others, the following properties: From b1cecc8f16940e77c58ea71b0e64315f5507339c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Samard=C5=BEija?= <74252988+isamardzija@users.noreply.github.com> Date: Tue, 21 Mar 2023 19:02:31 +0100 Subject: [PATCH 05/18] Update src/content/docs/en/guides/cms/payload.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/cms/payload.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index 19f0a12ef71d4..eb2aa32fb9079 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -156,7 +156,7 @@ const posts = await res.json() Create a blog index page `src/pages/index.astro` to list each of your posts with a link to its own page. -Fetching via the API an array of objects (posts) that include, among others, the following properties: +Fetching via the API returns an array of objects (posts) that include, among others, the following properties: - `title` - `content` From de7828071c9c8b1c6f10884cd199e7de228ad51e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Samard=C5=BEija?= <74252988+isamardzija@users.noreply.github.com> Date: Thu, 6 Apr 2023 11:27:30 +0200 Subject: [PATCH 06/18] Update src/content/docs/en/guides/cms/payload.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/cms/payload.mdx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index 143e98988593a..27009388ab9c4 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -21,13 +21,19 @@ To get started, you will need to have the following: ### Installing PayloadCMS -Follow the [PayloadCMS Installation docs](https://payloadcms.com/docs/getting-started/installation) in order to install a fresh PayloadCMS app. During the PayloadCMS installation, you will be asked if you want to use a template. +1. Follow the [PayloadCMS Installation docs](https://payloadcms.com/docs/getting-started/installation) in order to install a fresh PayloadCMS app. -If you pick one of the available templates (such as 'blog'), additional collections will be generated for you. You can then skip the following section, because you already have a collection other than "Users" that you can use. +:::note[Choosing a template] +During the PayloadCMS installation, you will be asked if you want to use a template. -If you don't pick any templates, only a single collection called "Users" will be generated. +If you do not choose a template, only a single collection called "Users" will be generated and you will have to [define a PayloadCMS collection manually](#creating-a-payload-cms-collection) in Astro to use for your content. -If you start the PayloadCMS server using `npm run dev`, you can go to `http://localhost:3000/admin` to enter your PayloadCMS Dashboard for the first time. Create the initial administrator account and enter the Dashboard. You should now see that the "Users" collection contains just the administrator account. +Choosing any of the available templates at this step (such as 'blog') automatically generates additional collections for you to use. +::: + +2. Start the PayloadCMS server using `npm run dev` and visit `http://localhost:3000/admin` to enter your PayloadCMS Dashboard for the first time. + +3. Using the Dashboard, create an initial administrator account, which should now be visible as the only entry in your "Users" collection. #### Creating a PayloadCMS Collection From 891cb29233bfc6062f7a9144cf49ac27fc068cc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Samard=C5=BEija?= <74252988+isamardzija@users.noreply.github.com> Date: Thu, 6 Apr 2023 11:28:41 +0200 Subject: [PATCH 07/18] Update src/content/docs/en/guides/cms/payload.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/cms/payload.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index 27009388ab9c4..7e650791f6c61 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -37,7 +37,7 @@ Choosing any of the available templates at this step (such as 'blog') automatica #### Creating a PayloadCMS Collection -You can create a new Collection called `Posts.ts` in `src/collections`. +If you did not choose a template during installation that created a content collection for you, create a new Payload CMS Collection by adding a configuration file in `src/collections/` called `Posts.ts`. ```astro title="src/collections/Posts.ts" import { CollectionConfig } from "payload/types"; From 76e5e5acaf863a83660e414756c09224cdb87d36 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Fri, 7 Apr 2023 08:23:39 -0300 Subject: [PATCH 08/18] fix header link --- src/content/docs/en/guides/cms/payload.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index 7e650791f6c61..9a647693ec710 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -26,7 +26,7 @@ To get started, you will need to have the following: :::note[Choosing a template] During the PayloadCMS installation, you will be asked if you want to use a template. -If you do not choose a template, only a single collection called "Users" will be generated and you will have to [define a PayloadCMS collection manually](#creating-a-payload-cms-collection) in Astro to use for your content. +If you do not choose a template, only a single collection called "Users" will be generated and you will have to [define a PayloadCMS collection manually](#creating-a-payloadcms-collection) in Astro to use for your content. Choosing any of the available templates at this step (such as 'blog') automatically generates additional collections for you to use. ::: From 8e19a2839096aa10d546c0505b609f2b50d8af28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Samard=C5=BEija?= <74252988+isamardzija@users.noreply.github.com> Date: Fri, 14 Apr 2023 10:18:24 +0200 Subject: [PATCH 09/18] Update src/content/docs/en/guides/cms/payload.mdx Co-authored-by: Sarah Rainsberger --- src/content/docs/en/guides/cms/payload.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index 9a647693ec710..ec1abfedcf047 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -145,7 +145,7 @@ For example, to display a list of post titles and their content: --- import HomeLayout from "../layouts/HomeLayout.astro"; -const res = await fetch("http://localhost:5000/api/posts") // https://localhost:3000/api/posts by default +const res = await fetch("https://localhost:5000/api/posts") // https://localhost:3000/api/posts by default const posts = await res.json() --- From 101108859dbe9b35860b232ae707aa8cdf020a39 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Tue, 2 May 2023 10:25:22 -0300 Subject: [PATCH 10/18] Apply suggestions from code review --- src/content/docs/en/guides/cms/payload.mdx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index ec1abfedcf047..8cf261fc77bb7 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -19,16 +19,14 @@ To get started, you will need to have the following: 2. **A MongoDB database** - PayloadCMS will ask you for a MongoDB connection string when creating a new project. You can set one up locally or use [MongoDBAtlas](https://www.mongodb.com/) to host a database on the web for free. 3. **A PayloadCMS REST API** - Create a [PayloadCMS](https://payloadcms.com/) project and connect it to your MongoDB database during the setup. -### Installing PayloadCMS -1. Follow the [PayloadCMS Installation docs](https://payloadcms.com/docs/getting-started/installation) in order to install a fresh PayloadCMS app. :::note[Choosing a template] During the PayloadCMS installation, you will be asked if you want to use a template. If you do not choose a template, only a single collection called "Users" will be generated and you will have to [define a PayloadCMS collection manually](#creating-a-payloadcms-collection) in Astro to use for your content. -Choosing any of the available templates at this step (such as 'blog') automatically generates additional collections for you to use. +Choosing any of the available templates at this step (such as 'blog') automatically generates additional collections for you to use. Otherwise, you will need to (manually create your PayloadCMS collections)[]. ::: 2. Start the PayloadCMS server using `npm run dev` and visit `http://localhost:3000/admin` to enter your PayloadCMS Dashboard for the first time. From 0d9ef8837eb21bc591f735cd10d057d2ad2b7be6 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Tue, 2 May 2023 10:26:11 -0300 Subject: [PATCH 11/18] remove blank lines --- src/content/docs/en/guides/cms/payload.mdx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index 8cf261fc77bb7..e4a05ed86e414 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -19,8 +19,6 @@ To get started, you will need to have the following: 2. **A MongoDB database** - PayloadCMS will ask you for a MongoDB connection string when creating a new project. You can set one up locally or use [MongoDBAtlas](https://www.mongodb.com/) to host a database on the web for free. 3. **A PayloadCMS REST API** - Create a [PayloadCMS](https://payloadcms.com/) project and connect it to your MongoDB database during the setup. - - :::note[Choosing a template] During the PayloadCMS installation, you will be asked if you want to use a template. From 0eadcc9e0e3a7dff31715c28affb3d1b8ddcd0d5 Mon Sep 17 00:00:00 2001 From: Sarah Rainsberger Date: Tue, 2 May 2023 10:46:10 -0300 Subject: [PATCH 12/18] Sarah simplify whether or not used a template --- src/content/docs/en/guides/cms/payload.mdx | 33 ++++++++-------------- 1 file changed, 12 insertions(+), 21 deletions(-) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index e4a05ed86e414..439fc63816385 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -22,18 +22,13 @@ To get started, you will need to have the following: :::note[Choosing a template] During the PayloadCMS installation, you will be asked if you want to use a template. -If you do not choose a template, only a single collection called "Users" will be generated and you will have to [define a PayloadCMS collection manually](#creating-a-payloadcms-collection) in Astro to use for your content. - -Choosing any of the available templates at this step (such as 'blog') automatically generates additional collections for you to use. Otherwise, you will need to (manually create your PayloadCMS collections)[]. +Choosing any of the available templates at this step (such as 'blog') automatically generates additional collections for you to use. Otherwise, you will need to manually create your PayloadCMS collections. ::: -2. Start the PayloadCMS server using `npm run dev` and visit `http://localhost:3000/admin` to enter your PayloadCMS Dashboard for the first time. - -3. Using the Dashboard, create an initial administrator account, which should now be visible as the only entry in your "Users" collection. +### Configuring Astro for your PayloadCMS collection -#### Creating a PayloadCMS Collection +Your Payload project template will contain a file called Posts.ts in ``src/collections/. If you did not choose a template during installation that created a content collection for you, you can create a new Payload CMS Collection by adding this configuration file manually. The example below shows this file for a collection called `posts` that requires `title`, `content`, and `slug` fields: -If you did not choose a template during installation that created a content collection for you, create a new Payload CMS Collection by adding a configuration file in `src/collections/` called `Posts.ts`. ```astro title="src/collections/Posts.ts" import { CollectionConfig } from "payload/types"; @@ -68,12 +63,9 @@ const Posts: CollectionConfig = { export default Posts; ``` +1. Import and add both `Users` (available in all PayloadCMS projects) and any other collections (e.g. `Posts`) to the available collections in the `payload.config.ts` file. -This creates a "Posts" collection which requires the following : `title`, `content`, `slug`. You will use this collection to manage your blog posts. The colllection is publicly available, so you shouldn't put any sensitive info inside. - -You then need to import and add it to the available collections in the `payload.config.ts` file. - -```astro title="src/payload.config.ts" +```astro title="src/payload.config.ts" ins={4, 5, 12} import { buildConfig } from "payload/config"; import path from "path"; @@ -95,17 +87,13 @@ export default buildConfig({ }); ``` -If you then go into the PayloadCMS Dashboard, you should see a new collection called "Posts" appear next to the "Users" collection. Enter the "Posts" collection and create a new post. After saving it, you will notice the API URL appear in the bottom right corner. +This will make a new collection called "Posts" appear in your PayloadCMS Dashboard next to the "Users" collection. -If not already running, start the server using `npm run dev` again. +2. Enter the "Posts" collection and create a new post. After saving it, you will notice the API URL appear in the bottom right corner. -Open `http://localhost:3000/api/posts` in your browser. You should see a JSON file containing the post you have created as an object. +3. With the dev server running, open `http://localhost:3000/api/posts` in your browser. You should see a JSON file containing the post you have created as an object. -:::tip -By default, both Astro and PayloadCMS will use the port 3000. You might want to change the PayloadCMS port in the `src/server.ts` file. Don't forget to update the `serverURL` in `src/payload.config.ts` as well. -::: - -```astro title="http://localhost:3000/api/posts" +```json { "docs":[ { @@ -128,6 +116,9 @@ By default, both Astro and PayloadCMS will use the port 3000. You might want to "nextPage":null } ``` +:::tip +By default, both Astro and PayloadCMS will use port 3000. You might want to change the PayloadCMS port in the `src/server.ts` file. Don't forget to update the `serverURL` in `src/payload.config.ts` as well. +::: ### Fetching Data From 8ca5203647130bab67f9cd492a469f21d660d935 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Samard=C5=BEija?= <74252988+isamardzija@users.noreply.github.com> Date: Wed, 3 May 2023 10:38:54 +0200 Subject: [PATCH 13/18] Update src/content/docs/en/guides/cms/payload.mdx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Elian ☕️ --- src/content/docs/en/guides/cms/payload.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index 439fc63816385..be8376d422e68 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -175,7 +175,6 @@ const posts = await res.json() )) } - ``` From dc3a0f7e10c1d49da400f2dc694b8ad2a2078c85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Samard=C5=BEija?= <74252988+isamardzija@users.noreply.github.com> Date: Wed, 3 May 2023 10:39:05 +0200 Subject: [PATCH 14/18] Update src/content/docs/en/guides/cms/payload.mdx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Elian ☕️ --- src/content/docs/en/guides/cms/payload.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index be8376d422e68..d2c0a34f7a43c 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -116,6 +116,7 @@ This will make a new collection called "Posts" appear in your PayloadCMS Dashboa "nextPage":null } ``` + :::tip By default, both Astro and PayloadCMS will use port 3000. You might want to change the PayloadCMS port in the `src/server.ts` file. Don't forget to update the `serverURL` in `src/payload.config.ts` as well. ::: From 6b7ed051f0452865f3bfbadee46fd7f74d4080ad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Samard=C5=BEija?= <74252988+isamardzija@users.noreply.github.com> Date: Wed, 3 May 2023 10:39:32 +0200 Subject: [PATCH 15/18] Update src/content/docs/en/guides/cms/payload.mdx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Elian ☕️ --- src/content/docs/en/guides/cms/payload.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index d2c0a34f7a43c..2fac018472db6 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -63,6 +63,7 @@ const Posts: CollectionConfig = { export default Posts; ``` + 1. Import and add both `Users` (available in all PayloadCMS projects) and any other collections (e.g. `Posts`) to the available collections in the `payload.config.ts` file. ```astro title="src/payload.config.ts" ins={4, 5, 12} From 66603a8ecaf4fc5577ea566c37d190c92704c46b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Samard=C5=BEija?= <74252988+isamardzija@users.noreply.github.com> Date: Wed, 3 May 2023 10:40:07 +0200 Subject: [PATCH 16/18] Update src/content/docs/en/guides/cms/payload.mdx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Elian ☕️ --- src/content/docs/en/guides/cms/payload.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index 2fac018472db6..94117e2fea4cf 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -27,7 +27,7 @@ Choosing any of the available templates at this step (such as 'blog') automatica ### Configuring Astro for your PayloadCMS collection -Your Payload project template will contain a file called Posts.ts in ``src/collections/. If you did not choose a template during installation that created a content collection for you, you can create a new Payload CMS Collection by adding this configuration file manually. The example below shows this file for a collection called `posts` that requires `title`, `content`, and `slug` fields: +Your Payload project template will contain a file called Posts.ts in `src/collections/`. If you did not choose a template during installation that created a content collection for you, you can create a new Payload CMS Collection by adding this configuration file manually. The example below shows this file for a collection called `posts` that requires `title`, `content`, and `slug` fields: ```astro title="src/collections/Posts.ts" From 1679d1beed43504e32726a6db3395ba73c67ff07 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Samard=C5=BEija?= <74252988+isamardzija@users.noreply.github.com> Date: Wed, 3 May 2023 10:41:02 +0200 Subject: [PATCH 17/18] Update src/content/docs/en/guides/cms/payload.mdx MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Elian ☕️ --- src/content/docs/en/guides/cms/payload.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index 94117e2fea4cf..b4d9f91884d70 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -13,7 +13,6 @@ i18nReady: false ## Prerequisites -To get started, you will need to have the following: 1. **An Astro project** - If you don't have an Astro project yet, our [Installation guide](/en/install/auto/) will get you up and running in no time. 2. **A MongoDB database** - PayloadCMS will ask you for a MongoDB connection string when creating a new project. You can set one up locally or use [MongoDBAtlas](https://www.mongodb.com/) to host a database on the web for free. From a88f207734bb183d7d997d0f18a3f4b1ea06c81e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Samard=C5=BEija?= <74252988+isamardzija@users.noreply.github.com> Date: Wed, 3 May 2023 10:55:08 +0200 Subject: [PATCH 18/18] Update payload.mdx --- src/content/docs/en/guides/cms/payload.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/en/guides/cms/payload.mdx b/src/content/docs/en/guides/cms/payload.mdx index b4d9f91884d70..08f01f4b5412e 100644 --- a/src/content/docs/en/guides/cms/payload.mdx +++ b/src/content/docs/en/guides/cms/payload.mdx @@ -11,7 +11,7 @@ i18nReady: false ## Integrating with Astro -## Prerequisites +### Prerequisites 1. **An Astro project** - If you don't have an Astro project yet, our [Installation guide](/en/install/auto/) will get you up and running in no time.