Theo's Typesafe Cult•14mo ago

Need Help Implementing Builder.io

Hello! I am not the best at coding, so please forgive me if I am having an easy issue. I am currently trying to implement Builder.io with the t3 template provided by Theo, but I seem to be having an issue successfully connecting. I constantly receive a "404 This page could not be found." issue. I utilized the automatic integration code that the website provides:

 
npx @builder.io/cli@latest integrate --model page --apiKey 615d9ca18922400a9882696727a79c7f  --content 4123438dd1e74b35afb54c5c74cc0514

 
npx @builder.io/cli@latest integrate --model page --apiKey 615d9ca18922400a9882696727a79c7f  --content 4123438dd1e74b35afb54c5c74cc0514

From what I have gathered so far, I think the issue has something to do with the t3 template using process.env syntax in the env.mjs file, but I am not sure how to fix this. I have already verified that the integration works on a new project that does not use the t3 stack, so I think I just need to modify something with the template. Would appreciate any help I can get on this!

8 Replies

jdsl•14mo ago

Hey I can definitely help out. I have builder.io integrated into a T3 project. ~~First, if that API key you posted above in the description is real. Revoke it and generate a new one.~~ (disregard) Your catch-all route will look like this: https://github.com/BuilderIO/builder/blob/main/examples/next-js-simple/pages/%5B%5B...page%5D%5D.tsx Actually just realized the API key is public, so never mind (brain is use to keeping all keys private) Next you are going to add your client public API key to .env and then update the env.mjs like you said. Update these two areas inside env.mjs after adding the key to .env

const client = z.object({
  NEXT_PUBLIC_ENV: z.enum(['development', 'test', 'production']),
  NEXT_PUBLIC_BUILDER_IO_KEY: z.string().min(1),
});

const processEnv = {
  // Node
  NODE_ENV: process.env.NODE_ENV,
  NEXT_PUBLIC_ENV: process.env.NODE_ENV,
  // Builder.io
  NEXT_PUBLIC_BUILDER_IO_KEY: process.env.NEXT_PUBLIC_BUILDER_IO_KEY,
};

const client = z.object({
  NEXT_PUBLIC_ENV: z.enum(['development', 'test', 'production']),
  NEXT_PUBLIC_BUILDER_IO_KEY: z.string().min(1),
});

const processEnv = {
  // Node
  NODE_ENV: process.env.NODE_ENV,
  NEXT_PUBLIC_ENV: process.env.NODE_ENV,
  // Builder.io
  NEXT_PUBLIC_BUILDER_IO_KEY: process.env.NEXT_PUBLIC_BUILDER_IO_KEY,
};

Then update the API key in catch-all route:

import { env } from '~/env.mjs';

builder.init(env.NEXT_PUBLIC_BUILDER_IO_KEY);

import { env } from '~/env.mjs';

builder.init(env.NEXT_PUBLIC_BUILDER_IO_KEY);

Also make sure your project has @builder.io/react package installed. Let me know if you run into any issues after getting it fired up.

beepboopquack•14mo ago

Thank you so much for helping! Hmm, there still appears to be some issue with the code that is causing the 404 to appear. My .env file has the following (secret key hidden with *):

DATABASE_URL="file:./db.sqlite"

NEXT_PUBLIC_BUILDER_IO_KEY=615d9ca18922400a9882696727a79c7f

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_bGliZXJhbC1zcGFuaWVsLTY5LmNsZXJrLmFjY291bnRzLmRldiQ

CLERK_SECRET_KEY=******

DATABASE_URL="file:./db.sqlite"

NEXT_PUBLIC_BUILDER_IO_KEY=615d9ca18922400a9882696727a79c7f

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_bGliZXJhbC1zcGFuaWVsLTY5LmNsZXJrLmFjY291bnRzLmRldiQ

CLERK_SECRET_KEY=******

The catch-all route ([[...page]].tsx) has everything that the example page linked on Github does, aside from the top section:

import { env } from '~/env.mjs';

builder.init(env.NEXT_PUBLIC_BUILDER_IO_KEY);

import { env } from '~/env.mjs';

builder.init(env.NEXT_PUBLIC_BUILDER_IO_KEY);

Finally, the env.mjs file has the same changes as suggested:

const client = z.object({
  NEXT_PUBLIC_ENV: z.enum(['development', 'test', 'production']),
  NEXT_PUBLIC_BUILDER_IO_KEY: z.string().min(1),
});

const processEnv = {
  DATABASE_URL: process.env.DATABASE_URL,
  NODE_ENV: process.env.NODE_ENV,
  NEXT_PUBLIC_ENV: process.env.NODE_ENV,
  NEXT_PUBLIC_BUILDER_IO_KEY: process.env.NEXT_PUBLIC_BUILDER_IO_KEY,
};

const client = z.object({
  NEXT_PUBLIC_ENV: z.enum(['development', 'test', 'production']),
  NEXT_PUBLIC_BUILDER_IO_KEY: z.string().min(1),
});

const processEnv = {
  DATABASE_URL: process.env.DATABASE_URL,
  NODE_ENV: process.env.NODE_ENV,
  NEXT_PUBLIC_ENV: process.env.NODE_ENV,
  NEXT_PUBLIC_BUILDER_IO_KEY: process.env.NEXT_PUBLIC_BUILDER_IO_KEY,
};

Is something wrong with how I currently have my .env file? Or would I have to do something with routing? Sorry for all this trouble! I also made sure to run the following

npm install "@builder.io/react"

npm install "@builder.io/react"

jdsl•14mo ago

Is this a repo you could share by any chance? I could take a look. If not, I would try to get some logs going from your catch-all route. /pages/[[...page]].tsx Try logging your env key to make sure it's setup properly and that you are actually hitting the catch-all. If that's working, I would move to logging the pages variable in getStaticPaths to see if you are connecting and getting all available pages from Builder.io

beepboopquack•14mo ago

https://github.com/npinedajr/T3BuilderInteg/tree/main/frontend Here is a repo! Thank you again for your help!

GitHub

T3BuilderInteg/frontend at main · npinedajr/T3BuilderInteg

Contribute to npinedajr/T3BuilderInteg development by creating an account on GitHub.

beepboopquack•14mo ago

I included all the relevant keys in the .env.example file, but blocked out the private key!

jdsl•14mo ago

So it actually looks like it's working. When I build and look at the path content from your builder.io I see:

PATHS: [ '/test-page' ]

PATHS: [ '/test-page' ]

So it's connecting and getting a single test page as published content. If you hit it http://localhost:3000/test-page then I get a blank page. If you want something from Builder.io to be your index page, I think you need to publish a / path and that should work Try adding some content to your builder.io account and a few more test pages. They should show up. Note: on your github the latest commit is missing @builder.io/react from packages. That's the only thing I had to add. ENV is setup correctly

jdsl•14mo ago

Looks good 👍

beepboopquack•14mo ago

Huh. it actually works now! It must have been something weird I did on Builder.io since my code was exactly the same and it still was not working. Anyways, I greatly appreciate your help on this, thank you!

Gaming

Programming

Need Help Implementing Builder.io