Bulk loading of pages into builder.io

Technical Questions
,
1

I am using builder.io with Next.js 14. We are porting our site to use builder.io as the CMS.

I have a component vocabulary that I have re-created with builder.io’s custom components. Is there a way to bulk load my pages (I have 100+ of them) from my .js files as entries into builder so that my team can edit them using the visual editor?

2

Hello @naren,

To bulk load your pages from .js files into Builder, you can use Builder’s Write API to programmatically create content entries. Below are the high-level steps involved:

  1. Prepare Your Content: Convert your pages from .js files into the JSON format that Builder expects. This involves extracting the relevant metadata, components, and content.

  2. Write a Migration Script: Create a script in Node.js to iterate through your prepared JSON content and use Builder’s Write API to create content entries.

  3. Run the Migration Script: Execute the script to populate your Builder space with your pages.

Here’s a basic example of how you can accomplish this:

Step 1: Prepare Your Content

Assume you have your page content in a JSON file named content.json. The structure could look something like this:

{
  "title": "Page Title",
  "url": "/page-url",
  "metaTags": {...},
  "blocks": [...]
}

Step 2: Write the Migration Script

Create a script migrate-pages.js:

const axios = require('axios');
const contentJson = require('./content.json'); // Your JSON content

async function postData(body) {
  const res = await axios({
    method: 'post',
    url: 'https://builder.io/api/v1/write/page',
    headers: {
      'Authorization': 'Your Private API Key Here',
      'Content-Type': 'application/json',
    },
    data: body,
  });
  return res;
}

async function main() {
  console.log('Starting migration for:', contentJson.title);

  // Convert your components to Builder blocks format
  const blocks = contentJson.blocks.map(block => {
    return {
      "@type": "@builder.io/sdk:Element",
      "@version": 2,
      component: {
        name: block.layoutType,
        options: block.props,
      }
    };
  });

  const res = await postData({
    name: contentJson.url.replaceAll('/', ''),
    query: [
      {
        "property": "urlPath",
        "operator": "is",
        "value": contentJson.url
      }
    ],
    data: {
      title: contentJson.title,
      url: contentJson.url,
      metaTags: contentJson.metaTags,
      blocks: blocks,
    }
  });

  console.log('New entry added:', res.status, res.statusText);
}

main().catch(err => {
  console.error(err);
});

Step 3: Run the Migration Script

Run your script using Node.js:

node migrate-pages.js

Additional Considerations

  • Ensure your JSON structure matches the requirements for your specific page models in Builder.
  • Handle any authentication or API rate limiting based on your usage.
  • Test with a smaller subset of pages before migrating all 100+ pages.

This approach allows you to programmatically create content entries in Builder and make them available for editing in the Visual Editor. For more detailed instructions on integrating pages and handling bulk actions, refer to the official documentation and the section on bulk actions.

3

Thank you @manish-sharma for the pointers - will explore further.