Prismic multi environment repo won't preview in the second environment

Prismic for Content Creators
1

Hi there,
We recently added the environments feature to our repo. I created a new Dev environment, which I thought was working at first. When I click preview on an unedited page, the page renders just fine. But when I make any edits to the document, save and try to preview again, it crashes. This behavior doesn't exist on our production repo, which previews just fine.
I've been following along with some of these items but haven't resolved the issue. I'm not sure there's much documentation for previews for multiple environments.

I'm struggling to understand why the preview would work initially but crash when updates are made to the document. Has anyone run into this before?
Any help would be hugely appreciated.
Thanks

This is my preview/index.js file

import { prismicClient } from 'lib/prismic/api';
import { linkResolver } from 'lib/prismic/link-resolver';

const preview = async (req, res) => {
  const { token: ref, documentId } = req.query;
  const redirectUrl = await prismicClient
    .getPreviewResolver(ref, documentId)
    .resolve(linkResolver, '/');

  if (!redirectUrl) {
    return res.status(401).json({ message: 'Invalid token' });
  }

  res.setPreviewData(
    { ref },
    {
      maxAge: 60 * 60, // The preview mode cookies expire in 1 hour
    }
  );
  res.writeHead(302, { Location: `${redirectUrl}` });
  res.end();
};

export default preview;

link-resolver/index.js

import { routes } from '../routes';
import { errorHandler } from './utils';

export function resolveRoutes(routes) {
  return (doc) => {
    errorHandler(routes, doc);

    const route = routes[doc.type];

    return resolveUID(doc, route);
  };
}

export function resolveUID(doc, route) {
  const { uid } = doc;
  const { href, indexUid } = route;

  if (indexUid && uid === indexUid) {
    return href;
  }

  if (uid) {
    return href.endsWith('/') ? href.concat(uid) : href.concat(`/${uid}`);
  }

  return href;
}

export default resolveRoutes(routes);
2

Hey @dan.parker!

Environments work as "clones" of your production repository. So each environment needs to have its own preview configuration—both in the repository and in the code.

Which technology are you using in your project?
Are you adding the correct repository name to the Prismic client when using the dev environment?

4

Hi Paulina,

Thank you for your reply. For some reason, it didn't occur to me that that the endpoint changed, and that I subsequently needed to generate a new token, and set up the preview config with that. I tested out by swapping out the endpoint and token in my code, and the dev preview works. I now just need to set it up to work along side with prod. Will update if I have any further questions. Thank you again.

5

Ok, thanks for sharing that.

Let us know if anything else comes up

6

This thread has been closed due to inactivity. Flag to reopen.