Integration with monorepo

Technical Questions
1

What are you trying to accomplish
Just trying to get up and running for now, but eventually I want to integrate builder to build a shopfront in my app

I think the issue is that my project root is a monorepo with 2 apps. Each app has a separate api folder. This is the folder structure of my project.

Root
-----Apps
---------App(A)-web
--------------pages
------------------[…page].jsx
------------------shop.js (this is the page I want to create with builder.io)
---------App(A)-api
---------App(B)-web
---------App(B)-api
-----Shared components

Here is the what I see on the content page:

It’s successfully showing the correct page in my app, but throwing an error.

Code stack you are integrating Builder with
NextJS, MongoDB, Apollo and GraphQL

Any help much appreciated!

2

Hey @danc222 , it’s difficult to tell what is happening with out seeing your code or the page. Can you share your dynamic page template [...page].jsx and static shop.js files as well as a link to the page in Builder (https://www.builder.io/content/{content_id})? A minimal reproduction with Github or Codesandbox would be even better. Thanks!

3

I do have the same problem with builder.io’s Authorize access window appearing after setup. On first authorize it created an .env file with the API_KEY in my monorepo client app and that worked. But if I delete that .env file and reload - I’ll get the authorize window again. How can I tell it explicitly to use the monorepo root .env file?

4

Hello @romatou

If you’re in a monorepo and Builder.io keeps asking you to “Authorize access” after deleting the .env in your app’s package folder, here’s what’s going on:

  • The Builder.io SDK/CLI looks for process.env.BUILDER_API_KEY at runtime.

  • When you authorize in the UI, it creates a .env file in the current working directory (usually your package folder like apps/client).

  • If that .env is deleted, the API key is gone from the environment, so the authorize window appears again.

  • It doesn’t automatically check your monorepo root .env unless you explicitly load it.

Solution: Load the root .env from inside your app

In your app’s config file (next.config.js, nuxt.config.ts, vite.config.ts, etc.), load the monorepo root .env using dotenv:

import path from 'path';
import dotenv from 'dotenv';

// Load the monorepo root .env file
dotenv.config({ path: path.resolve(__dirname, '../../.env') });

export default {
  env: {
    BUILDER_API_KEY: process.env.BUILDER_API_KEY,
  },
};

This way:

  • You only keep one .env in the monorepo root.

  • The client app can still access the API key.

  • The Builder.io editor won’t trigger the authorization flow again just because the local .env is missing.

Alternative Approaches

  1. Symlink the .env from the root into the app’s folder:

    ln -sf ../../.env apps/client/.env

  2. Set the key as a global env var in your local shell or hosting provider:

    export BUILDER_API_KEY=your_api_key_here

    In Fly.io:

    fly secrets set BUILDER_API_KEY=your_api_key_here

TL;DR:
Builder.io writes .env where it’s run, not in your root. If you want it to always use the monorepo root .env, load it explicitly in your app with dotenv or symlink it. This avoids repeated “Authorize access” prompts.