How to connect local development environment to builder.io

[handerson]

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

I was able to successfully complete the Using Builder Devtools for Automated Integration - Builder.io section, and I get a shiny Next.js page. When I try to add a builder page, it takes me to a gallery of builder.io pages on builder.io’s public website. This brings up the question of how to connect the local environment at localhost:3000 to builder.io?

next.js (1).png

Thanks in advance.

Wondering how to connect builder.io to localhost:3000 or what the connection is?

Screenshots or video link
next.js (1).png

Code stack you are integrating Builder with
Next.js

Reproducible code example
If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!

[sheema]

Hey @handerson after running your server successfully you need to set your preview URL to the http://localhost:3000/. I would recommend following our guide here.

[handerson]

Thank you for your response. @sheema . I am unable to follow those instructions.

The preview URL is set as you requested,

but when I surf to localhost:3000, I still just get the Next.js logo page.

I am able to edit the above logo page src/pages/index.js in VS Code.
However, I don’t know how to get to the Visual Editor.

[sheema]

Hey @handerson you can access your Builder.io content at Builder.io: Visual Development Platform. You can create a new page by clicking on the “New Entry” button.

You can also check out our guide for setting the preview URL for a step by step guide.

[handerson]

@sheema Thank you, that was helpful. When I clicked on one of the documents in that list, it complained that my server localhost:3000 wasn’t running, so I started it in VS Code, and now the Content panel in builder.io seems to be connected to localhost:3000 and VS Code. So the next order of business is just reading the docs. Thanks.