Prismic preview working in localhost but not on staging/production environments (Nuxt/Netlify)

Developing with Prismic
1

Hi all,

I was hoping someone could help me with an issue I'm having getting Prismic Previews to work. I've scoured this forum for a solution but unfortunately I wasn't able to find any that worked for me.

I am developing on Nuxt/Netlify for a client and am trying to set up Prismic Previews for them. I've left the Link resolver to "/preview" and I've installed the @nuxtjs/prismic package into my repository.

I have 2 Prismic repositories, one for development and the other is for the client. Both configurations are the same, bar the content (we still use the same content types). On our development repository, previewing content works fine; I am able to see the content I have not yet published to the document. However, on the client repository, with the same setup, whenever I click on the Preview button, page will load fine except the content does not show any of the changes I've made.

Could someone help me out? Happy to provide more information if required.

2

Hello @sog, if you're using environments, you must remember that these work as separated entities. Even if they share the same Custom Types and content, they are two different entities. If you have configured your project to set up previews only for the first one, you need to test with the second repository URL and add a new Link resolver for it, for example: /preview-staging

4

Hello @Pau thank you for your reply.

I am not using Prismic Environments, I am using the same code repository for both Prismic repositories. When I set up the Previews on both, I make sure that the link resolver is the same. In fact, on my staging site, I can get the toolbar to appear and I can check the cookie which when I query it, will return the updated document, however, on the front end, the content does not appear updated.

5

I understand. Maybe there's something missing in your preview configuration. We have a list of troubleshooting steps that you can check out here:

Also, you can share your project setup with us to see if there's something missing. For example, in next, you now need to wrap your application with a PrismicPreview component:

6

Hi @Pau,

Is it ok if I zip up my project and send it to you? I have been having no luck with this at all.

Thanks

7

Could you send us the code for your _app.js and prismicio.js files?

8

Thanks for sending over the additional info.

We'd like to know how you are querying your Prismic API with Nuxt & PHP and how you provide that data to the frontend.
If you query Prismic from the backend, this can cause issues with Previews if the cookie is only created on the frontend, not forwarded to the backend, or the other way around.

10

Hi @Pau,

We're using the Prismic PHP SDK and querying the data using the Prismic/API class.

Below is an example of the query we're using (which has been obfuscated)

$response = $this->api->getByUID(
    'xxx_page',
    $slug,
    []
 );

$result = $response;

        $parsedBody = [];
        foreach ($result->data->body as $slice) {
            $parsedBody[] = $this->contentParser->parse($slice);
        }
        $result->data->body = $parsedBody;

        $pageUrlWithCrumbs = $this->contentParser->resolvePageUrl($result, true);
        $result->url = $pageUrlWithCrumbs['url'];

        $crumbs = array_map(function ($item) {
            $output = [
                'title' => $item->data->title[0]->text,
                'path' => $item->uid,
            ];
            return $output;
        }, $pageUrlWithCrumbs['breadcrumbs']);
        $result->breadcrumbs = $crumbs;

        return $result;

We've managed to get the Previews working on another preview site that we have, but some of the content doesn't load which I suspect might be a problem with the way nuxt is generating the pages, since that is using Server Side Rendering.

12

Nuxt handles preview sessions easily on its own. So with PHP on top, it can get tricky.

You'd need to check if the preview cookie is forwarded to the API. You need to check if the result of the getPreviewRef function returns a string, not null when running a preview session. If this doesn't happen, you can try and forward the preview cookie to the API in a query.

You can use the credentials option: fetch() - Web APIs | MDN