Nginx issue with local server url

Visual Editor Help
, ,
1

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.

Builder content link
e.g. Builder.io: Visual Development Platform

Builder public api key
go to Builder.io: Visual Development Platform and copy your PUBLIC api key

What are you trying to accomplish
*My project is currently set up with the latest NextJS, am using Nginx to serve the local URL: (*https://local.merchant-xxx.xyz), so my authentication and all api calls are served under this Nginx.

Now I am trying to use Builder.io - Visual AI Code Editor plugin with vs-code and below is my builder.config.json file. Normally, if login in browser with this URL *(*https://local.merchant-xxx.xyz), it works fine. If the same, try to log in with preview, I’m getting the error.

{

“command”: “yarn dev”,

“serverUrl”: “http://localhost:3000”,

“authenticateProxy”: false,

“commitMode”: “commits”

}

**Error:
**
Warning: [antd: message] Static function can not consume context like dynamic theme. Please use ‘App’ component instead. Error sending OTP: Error: Invalid phone number format at Object.sendOtp [as current] (webpack-internal:///(app-pages-browser)/./src/store/services/auth.ts:15:19) at async mutateByKey (webpack-internal:///(app-pages-browser)/../../node_modules/swr/dist/_internal/config-context-client-BoS53ST9.mjs:352:20) at async eval (webpack-internal:///(app-pages-browser)/../../node_modules/swr/dist/mutation/index.mjs:119:30) at async Object.eval [as onClick] (webpack-internal:///(app-pages-browser)/./src/components/auth/Login.tsx:50:25)

**ENV config
**
const currentEnv = process.env.NEXT_PUBLIC_APP_ENV || ‘development’;

const isBuilderPreview =

typeof window !== ‘undefined’ &&

(window.location.hostname.includes(‘builder.io’) || window.location.href.includes(‘builder.io’));

// Define API base URLs for each environment

const API_BASE_URLS = {

development: isBuilderPreview

? ‘https://merchant-xxx.xyz’

: ‘https://local.merchant-xxx.xyz’,

};

**Nginx Config
**
server {

   listen 443 ssl*;*

   ssl_protocols TLSv1.2*;*

   ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH'*;*

   ssl_prefer_server_ciphers on*;*

   ssl_certificate  /Users/xxxx/certs/local.merchant-xxxx.xyz.pem*;*

   ssl_certificate_key  /Users/xxxx/certs/local.merchant-xxx.xyz-key.pem*;*

   server_name local.merchant-xxx.xyz*;*

   add_header 'Access-Control-Allow-Origin' '\*'*;*

   add_header 'Referrer-Policy' 'strict-origin-when-cross-origin'*;*

   add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT'*;*

   client_max_body_size 50M*;*

   location \~ /(auth/|bulk/) {

       proxy_pass https://merchant-xxxx.xyz*;*

       proxy_ssl_name $proxy_host*;*

       proxy_ssl_server_name on*;*

       proxy_http_version 1.1*;*

   }

   location / {

       proxy_pass http://127.0.0.1:3000*;*

       proxy_http_version 1.1*;*

       proxy_set_header Upgrade $http_upgrade*;*

       proxy_set_header Connection 'upgrade'*;*

       proxy_set_header Host $host*;*

       proxy_set_header X-Real-IP $remote_addr*;*

       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for*;*

       proxy_cache_bypass $http_upgrade*;*

   }

   error_page   500 502 503 504  /50x.html*;*

location = /50x.html {

       root   html*;*

   }

}

Screenshots or video link

Code stack you are integrating Builder with
e.g. NextJS,

Reproducible code example

2

Hello @vinzcool,

It looks like your issue is related to how the Builder.io VS Code plugin connects to your app when using a local HTTPS domain with Nginx.

By default, the Builder plugin uses http://localhost:3000 as the serverUrl, but in your setup, all authentication and API traffic are handled through the Nginx proxy at https://local.merchant-xxx.xyz. Because of that mismatch, cookies and CORS headers don’t align properly, and the authentication flow (including OTP) fails in Builder’s preview mode.

You can fix this by updating your builder.config.json to point the plugin directly to your Nginx-served domain and enable proxy authentication:

{
  "command": "yarn dev",
  "serverUrl": "https://local.merchant-xxx.xyz",
  "authenticateProxy": true,
  "commitMode": "commits"
}

Also, make sure your local SSL certificate for local.merchant-xxx.xyz is trusted by your OS/browser, and if you’re using cookies for auth, include the following headers in your API responses:

Access-Control-Allow-Origin: https://local.merchant-xxx.xyz
Access-Control-Allow-Credentials: true

This configuration ensures that Builder’s preview environment routes requests through your Nginx proxy correctly and that login and API calls work as expected.

Thanks,