Deploy builder.io to vercel

FAQs
1

Is there a way to deploy directly from Builder.io to Vercel without having to download the code? I’m facing issues when generating the code; it’s not as I expected, and it leads to many errors as well as failure to retrieve the data and interface as I designed on Builder.io.

2

Hello @Kenz,

Deploying directly from Builder.io to Vercel without downloading the code isn’t currently available as a one-click solution. However, you can set up a smooth integration between Builder.io and Vercel by following these steps:

  1. Integrate Builder.io with your codebase:

    • Create or use an existing Next.js app and integrate Builder.io with it. Begin by registering components and setting up your pages.
    • Use the Builder SDK to render your components dynamically. For instance, create a file like pages/[...page].jsx and add code to fetch and render content from Builder, as shown:
      import React from 'react';
import { useRouter } from 'next/router';
import { BuilderComponent, builder, useIsPreviewing } from '@builder.io/react';
import DefaultErrorPage from 'next/error';
import Head from 'next/head';

// Replace with your Builder.io API Key
builder.init(YOUR_API_KEY);

// Allow us to fetch page contents server side
export async function getStaticProps({ params }) {
  const page = await builder
    .get('page', {
      userAttributes: { urlPath: '/' + (params?.page?.join('/') || '') },
    }).toPromise();

  return {
    props: { page: page || null },
    revalidate: 5,
    fallback: 'blocking'
  };
}

export default function Page({ page }) {
  const router = useRouter();
  const isPreviewing = useIsPreviewing();

  // Show 404 for any non existent page
  if (!page && !isPreviewing) {
    return <DefaultErrorPage statusCode={404} />
  }

  return (
    <>
      <Head>
        <title>{page?.data.title}</title>
      </Head>
      {/* Render the Builder content */}
      <BuilderComponent model="page" content={page} />
    </>
  );
}

  2. Deploy to Vercel:

    • After integrating and testing your Builder components locally, deploy your Next.js application to Vercel. When doing so, set up a preview URL in Builder matching your Vercel preview environment, such as https://your-project-name.vercel.app.

  3. Content Link Integration:

    • Enable Vercel Content Link in Builder.io to allow easy navigation between Builder UI and your Vercel-deployed site. This feature allows you to click on a link within your Vercel preview deployment to directly edit the content in Builder.io.
      import { builder } from "@builder.io/react";
builder.init('YOUR_BUILDER_PUBLIC_API_KEY');
builder.apiVersion = "v3";

const content = await builder.getAll("YOUR_MODEL_NAME", {
    options: {
      vercelPreview: process.env.VERCEL_ENV === 'preview',
    },
});

By following these steps, you can effectively connect and manage your Builder.io content directly with Vercel, ensuring a streamlined and integrated workflow.

1 Like
3

Hi. Thanks but i can that. i using builder.io gen UI and database then npm run build → vercel and done :smiley: