live preview globals disabled page

_nadiem

4 weeks ago

6

• 

  Zephury

  4 weeks ago

  "Within my collections I can edit anything with live preview. "

  
  

  do you mean without live-preview you can edit it...?

  
  
  

  Please, share your Postspage collection file, and perhaps your payload.config

• 

  _nadiem

  4 weeks ago

  Thanks for your reply!

  
  

  Additionally I have added a posts collection. Within this collection the live preview functionality is working.

  
  
  

  The postspage is a globals file, since I'm testing out the globals^^. The problem occurs with a globals file, not with the collection file:)

  
  
  

  Current payload.config:

  
  
  

  import path from "path";
  
  import { payloadCloud } from "@payloadcms/plugin-cloud";
  import { postgresAdapter } from "@payloadcms/db-postgres";
  import { webpackBundler } from "@payloadcms/bundler-webpack";
  import { slateEditor } from "@payloadcms/richtext-slate";
  import { buildConfig } from "payload/config";
  
  import Users from "./collections/Users";
  import Posts from "./collections/Posts";
  import Pages from "./collections/Pages";
  import PostsPage from "./globals/PostsPage";
  
  export default buildConfig({
    admin: {
      user: Users.slug,
      bundler: webpackBundler(),
      livePreview: {
        url: (doc) => {
          // document info contains the slug, for deeper nesting edit the path, also add in the locale
          if (doc.documentInfo.slug === "postspage") {
            return `http://localhost:5173/posts`;
          }
          return `http://localhost:5173/${doc.documentInfo.slug}/${doc.documentInfo.id}`;
        },
        collections: ["posts", "pages"],
        globals: ["postspage"],
      },
    },
    editor: slateEditor({}),
    collections: [Users, Posts, Pages],
    globals: [PostsPage],
    localization: {
      locales: ["en", "de"],
      defaultLocale: "en",
      fallback: true,
    },
    typescript: {
      outputFile: path.resolve(__dirname, "payload-types.ts"),
    },
    graphQL: {
      schemaOutputFile: path.resolve(__dirname, "generated-schema.graphql"),
    },
    plugins: [payloadCloud()],
    db: postgresAdapter({
      pool: {
        connectionString: process.env.DATABASE_URI,
      },
    }),
  });

• 

  Zephury

  4 weeks ago

  can you please share your PostsPage file?

• 

  _nadiem

  4 weeks ago

  Ah sorry, I'm blind 😅

  
  
  

  import { GlobalConfig } from "payload/types";
  
  const PostsPage: GlobalConfig = {
    slug: "postspage",
    access: { read: () => true },
    fields: [
      {
        name: "title",
        label: "Title",
        type: "text",
        required: true,
      },
      {
        name: "subtitle",
        label: "Subtitle",
        type: "text",
      },
      {
        name: "text",
        label: "Text Content",
        type: "richText",
      },
      {
        name: "items",
        type: "array",
        required: true,
        maxRows: 8,
        fields: [
          {
            name: "post",
            type: "relationship",
            relationTo: "posts",
            required: true,
          },
        ],
      },
    ],
  };
  
  export default PostsPage;

• 

  Zephury

  4 weeks ago

  looks like it

  should

  work to me.

  
  
  

  are you sure you're on the latest version?

• 

  _nadiem

  3 weeks ago

  Hmmm, not sure how I wasn't. But I ran:

  
  
  

  - npm i -g npm-check-updates

  
  

  - ncu -u

  
  

  - npm install

  
  
  

  Now it's working, thanks for the help!