Builder Button not showing with bare React

Technical Questions
1

Builder content link
http://localhost:3001/generic-3

Builder public api key
What? I need to post my API key to the forum?

What are you trying to accomplish
Integrate dev-tools with React prototype

Code stack you are integrating Builder with
React without a framework

I followed the tutorial example for integrating builder.io with my code base and it work file. I see the Builder button in the bottom right hand corner.

However the tutorial code is Next, but my code base is React without a framework. So I created a new prototype based on the tutorial prototype and got it (mostly) working (Using the Gen 1 SDK)

The part that is not working is the builder tools. There seems to almost no documentation on how to integrate dev-tools with base react. I used the code snippet I found on npm…

import { BuilderDevToolsPlugin } from "@builder.io/dev-tools/webpack";

module.exports = {
  plugins: [new BuilderDevToolsPlugin()],
};

This doesn’t seem promising because while my code is indeed Webpack, the prototype is a simple create-react-app project.

So what am I doing wrong? Is it even possible to have the Build Button show up on a React without a framework?

2

Hi @AQuirky,

Thanks for reaching out.

You can definitely use DevTools with React by following the instructions here:
:backhand_index_pointing_right: https://www.builder.io/c/docs/devtools
Just make sure to select “None” under the metaframework option to see the relevant documentation.

Also, could you please run the following command in your terminal:

npm init builder.io@latest

121
1211730×1148 116 KB

Let me know if you run into any issues—happy to help!

Best Regards,

Rahul Joshi

3

Did not work. Here are the steps I used. I created a new project.

$ npx create-react-app@latest landing_page_proto2 --template typescript
$ cd landing_page_proto2
$ npm init builder.io@latest

I got the following error…

Could not find a supported config file in this directory
│
│ Please cd into the root of a Next.js, Angular, Qwik or Remix project, or generate a new project to use this CLI.
│
│ Alternatively, see our docs for how to integrate with other frameworks:
│ Builder Developer Docs
│
◆ Would you like to generate a new project?
│ ● Yes, let’s generate a new project
│ ○ No, I’ll run again from another directory