Gatsby Prismic preview only working on localhost

Developing with Prismic
1

I’m having an issue getting preview to work with a live URL.

Preview works perfectly fine when running on localhost on gatsby develop (localhost:8000) and it also works perfectly fine when doing gatsby build & gatsby serve (localhost:9000), but as soon as I change the domain name to a live URL it doesn’t work.

From the looks of it when I click the preview button it redirects to /preview but never adds the preview query string to the URL which would then redirect to the correct page. I’ve also checked to see if the preview cookie is being added which it is.

The live URL which I’m pointing to is an AWS S3 bucket, is there something I need to configure on here to get it to work?

Any help would be massively appreciated.

2

Hey Rob!

Have you checked if the configuration for the production URL route is enabled? A configuration for each environment is required if you’re going to preview in each one: development, build and production,

Also, check your link Resolver and add the properties validation:

const linkResolver = (doc) => {
  const properties = doc._meta || doc;
  if (properties.type === 'page') return `/${properties.uid}`
  return '/'
}
 
export default linkResolver
3

FWIW: I"m having the exact same problem. In my case it is using AWS Amplify for hosting, but probably the same deal. I’ve tried all manner of link resolver and gatsby config adjustments, and just can’t get to seem to get it to work outside of localhost.

1 Like
4

Hi Paulina,

Thanks for replying.

I do have the different URL routes enabled and I just tried adding in the properties check inside my link resolver but still no luck.

If I click the preview button to view changes on localhost it hits the following URLs:

If I click preview to view the site on the live URL it just hits:

The only difference between the configuration is the domain name it’s pointing to.

I also set up a really quick test project and hooked it up to Netlify instead of AWS S3 for hosting and that redirected properly.

It seems like it’s either a limitation with working with AWS for hosting or there is some configuration setting that needs changing in AWS for it to work, but I have no idea what to even Google to try and find a potential resolution to the problem.

5

Following what we talked about on Twitter it appears to probably be an issue with AWS removing query string parameters if the URL doesn’t have a trailing slash :confused: let us know if you figure out something (or not) this way @robsimpson!

6

So I’ve managed to get it to work for everything except unpublished pages now.

It appears to be a trailing / issue, so by setting my linkResolver to /preview/ (in the Prismic config section) this makes preview redirect to the correct page (if it’s already published) but doesn’t redirect to the correct page if it’s an unpublished page.

I’ve tried changing the pages path (for unpublished pages) in the gatsby.config file to path: '/content-preview/' for example but that doesn’t work. It does try and redirect to the correct page in this case http://liveurl/preview/content_page but it doesn’t add the querystring in the url with the uid from the looks of it – should be http://liveurl/preview/content_page?uid=test again I’m guessing this probably another trailing / issue but no idea where or how to change that…

7

Ah! Great @robsimpson , this sounds like the core issue then, and likely explains why I’m seeing the same thing on Amplify. Following this thread with eagle eyes @lihbr @Pau let us know if you have any ideas as to how we might finally push this one to the ‘resolved’ pile (there its lots of conversation on broken Preview on the github issues page for gatsby-source-prismic-graphql too, and I’d be very curious to know how many of those folks (besides me) are using AWS for hosting.

8

I am also using AWS Amplify for hosting.

I have found that the trailing slash alone did not work for my previews.

By adding the following redirect rule to Amplify has fixed the preview issue for me, together with adding the trailing slash in the Prismic preview configuration /preview/

{
    "source": "/preview/<type>?uid=<uid>",
    "target": "/preview/<type>/?uid=<uid>",
    "status": "302",
    "condition": null
}

The main issue I am facing now is that prismic sets all my preview urls to “content_page” rather than their appropriate content type names.

Eg /preview/content_page/?uid=blog should actually be /preview/blog_page/?uid=blog

So this results in the preview being blank. If I manually change the URL, the correct preview is shown.

2 Likes
9

Note that I have created a new topic for this preview issue I am facing if anyone else is experiencing the same thing.

2 Likes
10

This issue has been closed due to inactivity.

12

We use Netlify and it works flawlessly.

14

Hello @williambell9708

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

I am glad that previews are working with Netlify flawlessly.

Let us know if you have any other questions.

Priyanka

16

We are using Amplify - so it is not working there.

17

Hey @williambell9708!

What kind of errors are you seeing in your Amplify setup?
Are they related to Prismic?

19

Yes, the Prismic preview is failing. We are using VueJS and deploying to Amplify.
We tried a bunch of things posted here, but we are still getting 403 on preview.

20

We get a 403 error when trying to preview on Amplify.

We get a Cloudfront error.

https://staging.d2o7rq4shcbi4e.amplifyapp.com/news-article/test-news112/

AccessDenied

Access Denied

MQMW701KY6V6QHBX

brgn0T7IeZEdia4IrxyOBYsUrE6b0JmI0H/CQHMPf9PF1xGPCXkuM0Ls7IfyYWgxCTSFkmqoXgw=

21

This may be due to a permission error in the Cloudfront setup. Check out this conversation I found online: