How the preview url works

Technical Questions CMS
,
1

I’m having a hard time understanding how the preview url works, I use gatsby, and I read in the documentation that you need to create the page manually,
Would I have to create a page like this: “pages /builder_editing.js”? what would be the content of this page?
and my url that I would put in the model, would it be localhost: 8000 /builder_editing?

2

TLDR
Use `@builder.io/gatsby or the gatsby-starter-builder and it should automatically override the custom 404 development page to allow developing in the editor on pages that are yet to be published. Please read on if you want more customizations, or don’t want to use the provided plugin.

The preview URL inside the editor is a way for Builder.io to load your site and add ability to drag and drop components to it, it does that by targeting the <BuilderComponent ... /> on the page and matching it with the content based on current URL, this is usually done in any other web server technology by :

  1. Overriding the 404 handler
  2. Checking with Builder.io if there’s a page match, if so render , otherwise return 404

But since Gatsby is static site generator and there’s no server to really handle the 404, you’d want to override the 404 handling depending on your needs, here you have multiple options:

Override the custom 404 development
This is essential for local development with Builder.io and is done by default using the @Builder.io/gatsby plugin to allow editing/ dragging and dropping on localhost:8000 (or whatever your development environment port was)

2878×1139 38.5 KB

you can do that by adding a hook in gatsby-node.js

exports.onCreatePage = ({ page, actions }, options) => {
  const { deletePage, createPage } = actions;
  if (page.path === '/dev-404-page/') {
      deletePage(page);
      createPage({
        ...page,
        component: path.resolve('..path to my custom 404'),
      });
    }
}

Override the production 404 development
I’d refer to the docs for latest information on doing that Adding a 404 Page | Gatsby, at this time it’s by just adding a src/pages/404.jsx

What a sample 404.jsx look like?


import * as React from 'react';
import { BuilderComponent, builder } from '@builder.io/react';
import '@builder.io/widgets';
// TODO: enter your public API key
builder.init('YOUR_API_KEY');

const  FourOhFour = () => {
  const [ notFound, setNotFound ] = React.useState(false);
  // modelName is page by default
  return notFound ? (
    <NotFound /> // Your 404 content
  ) : (
    <BuilderComponent
      model="page" 
      contentLoaded={content => {
        if (!content) {
          setNotFound(true);
        }
      }}
    >
      <div className="loading">No matching page generated, checking Builder.io ...</div>
    </BuilderComponent>
  )
}

const NotFound = () => <h1>No page found for this URL, did you publish it?</h1>;

export default FourOhFour;
3

For anyone landing on this topic we have an updated guide with helpful info for troubleshooting preview issues now here Enabling on-site previewing and editing in Builder.io | Builder.io

2 Likes