Articles page is getting 404 on Production but not on localhost

Developing with Prismic
1

Hi,

I'm suddenly experiencing an issue where my article is showing a 404 error on the production website: test here. However, it's functioning properly on my local environment: https:/localhost/articles/omurice.

Interestingly, some other article pages are working fine, such as:

Any idea why I am getting 404 on certain pages ?

3

Hey!

A 404 error indicates that the server was unable to find a resource so there might be a problem with your queries. Check if the doc is published and not in draft or in a release. Also, make sure to rebuild the project.

Also, empty any caches and confirm that your local environment and the live server are in sync.

Hoping you can get the site up and running shortly!

5

Hi Pau,

I wanted to let you know that the previously problematic page with the 404 error is now functioning correctly without any intervention on my part. You can access it at test here.

However, I have encountered a similar issue with a new article I created. Whenever I try to access it, it throws a 404 error. You can find the article at
https://www.810228.com/articles/sunday-ice-cream.

I'm curious as to why this consistently happens every time I create an article, and why it takes a few days for the issue to be resolved.

Looking forward your answer shortly
Thanks

Here are my code from pages/articles/[uid].js just in case,


export async function getStaticProps({ params, previewData }) {
  const client = createClient({ previewData });

  const article = await client.getByUID("article", params.uid);
  const latestArticles = await client.getAllByType("article", {
    limit: 3,
    orderings: [
      { field: "my.article.publishDate", direction: "desc" },
      { field: "document.first_publication_date", direction: "desc" },
    ],
  });
  const navigation = await client.getSingle("navigation");
  const settings = await client.getSingle("settings");

  return {
    props: {
      article,
      latestArticles,
      navigation,
      settings,
    },
  };
}

export async function getStaticPaths() {
  const client = createClient();

  const articles = await client.getAllByType("article");

  return {
    paths: articles.map((article) => prismicH.asLink(article)),
    fallback: false,
  };
}
7

How are you rebuilding the site? You might need to add webhooks so the rebuilt is done automatically. As soon as any change on your docs is detected.

8

You are correct, Pau. It requires rebuilding the site every time I publish a new post or article. Could you please explain how webhooks can help automate this process? Are there any articles or documentation available that can provide more information?

I am currently using Vercel (Overview - Vercel) to deploy my site from GitHub.

Thanks Pau. Appreciate it

9

All good Pau, I found it