Previews with Astro

Developing with Prismic
1

Hi,
I love working with prismic. It fits exactly my need. There is only one thing I can't make it work showing the current draft preview inside an astro project.

Does anyone have an example I could use to show a simple preview inside Astro

Any help would greatly appreciated!

Thank you

3

Hello Nicolas,

Welcome to the Prismic community, and thanks for reaching out to us.

My team member has already answered here:

You can do your search in the forum about Astro if you find something.

Thanks,
Priyanka

4

Thank you @Priyanka for your message.
I already setup prismic and astro. I show my published pages without any issues.
My problem concerns the previews.
I can't make it work with astro. Also I already search on the forum for an answer but I didn't find any.

Nico

5

Hey, I can help you with that!

It's pretty simple:

  1. Create a pages/preview.astro
---
export const prerender = true;
import Layout from "../layouts/Layout.astro";

const SEO = {
  title: "Preview",
  description: "",
};
---

<script
  is:inline
  async
  defer
  src="https://static.cdn.prismic.io/prismic.js?new=true&repo={your_repo}"
></script>

<script>
  import { client } from "../lib/client";

  const init = async () => {
    const defaultUrl = "/";
    const url = await client.resolvePreviewURL({
      linkResolver: (doc) => {
        if (doc.isBroken) {
          return "/404";
        } else if (doc.type === "home") {
          return `/preview/home`;
        } 
        // add more pages (a.k.a redirects) ...
        return defaultUrl;
      },
      defaultURL: defaultUrl,
    });
    window.location.replace(url);
  };

  init();
</script>

<Layout title={SEO.title} description={SEO.description} disableIndex={true}>
  <div>loading the preview</div>
</Layout>
  1. Create preview pages like pages/preview/home.astro taking the above as an example
---
export const prerender = false; // needs to be server side rendered

const previewCookie = Astro.cookies.get("io.prismic.preview").value;

if (!previewCookie) {
  return Astro.redirect("/404");
}

const data = await client.get(..., {
 ref: previewCookie
})
---

// render with the preview data
// Note: don't allow this page to be indexable, etc.
  1. Change the astro.config.mjs 
export default defineConfig({
  output: "server", // so you can use the `export const prerender`
...
})

Note: create the redirect preview link on Prismic Repo Settings to http://localhost:3000/preview or other domain.

To add more previews just create a preview page & add a condition to preview.astro

How this works is that you're using the prismic cookie to understand what entity you're previewing. Then you can fetch data when serving pages via SSR.

There are ways you can automate this, e.g you can create a dynamic [dynamic].astro preview that does the logic above automatically when using slices. But this is more complex.

There are no built-in solutions for this, I kinda created my own!

5 Likes
6

Thank you for you feedback!
This is pretty much what I did and I found my problem.
I was logging the prismic document into the console and I'm using Brave browser. I found that I had to allow cookies as described here Troubleshooting: Previews

Now everything is working fine.
Thank you again for you answer :pray:

2 Likes
7

Thanks, @g.rosado, for the working example. I will pass this on to my dedicated team and see if we can implement documentation.
Thanks, @prismic27, for the feedback.

1 Like