fix(test): Enabled support for runtime NC_BACKEND_URL and integrated it with CI

packages/nc-gui/composables/useApi/index.ts

@@ -3,14 +3,16 @@ import { Api } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import type { CreateApiOptions, UseApiProps, UseApiReturn } from './types'
 import { addAxiosInterceptors } from './interceptors'
-import { BASE_URL, createEventHook, extractSdkResponseErrorMsg, ref, unref, useCounter, useGlobal, useNuxtApp } from '#imports'
+import { BASE_FALLBACK_URL, createEventHook, extractSdkResponseErrorMsg, ref, unref, useCounter, useNuxtApp } from '#imports'
 
-export function createApiInstance<SecurityDataType = any>({ baseURL = BASE_URL }: CreateApiOptions = {}): Api<SecurityDataType> {
-  const { appInfo } = $(useGlobal())
+export function createApiInstance<SecurityDataType = any>({
+  baseURL = BASE_FALLBACK_URL,
+}: CreateApiOptions = {}): Api<SecurityDataType> {
+  const config = useRuntimeConfig()
 
   return addAxiosInterceptors(
     new Api<SecurityDataType>({
-      baseURL: baseURL ?? appInfo.ncSiteUrl,
+      baseURL: config.public.ncBackendUrl || baseURL,
     }),
   )
 }

packages/nc-gui/composables/useGlobal/state.ts

@@ -1,7 +1,17 @@
 import { useStorage } from '@vueuse/core'
 import type { JwtPayload } from 'jwt-decode'
 import type { AppInfo, State, StoredState } from './types'
-import { BASE_URL, computed, ref, toRefs, useCounter, useJwt, useNuxtApp, usePreferredLanguages, useTimestamp } from '#imports'
+import {
+  BASE_FALLBACK_URL,
+  computed,
+  ref,
+  toRefs,
+  useCounter,
+  useJwt,
+  useNuxtApp,
+  usePreferredLanguages,
+  useTimestamp,
+} from '#imports'
 import type { Language, User } from '~/lib'
 
 export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
@@ -75,7 +85,7 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
   })
 
   const appInfo = ref<AppInfo>({
-    ncSiteUrl: BASE_URL,
+    ncSiteUrl: BASE_FALLBACK_URL,
     authType: 'jwt',
     connectToExternalDB: false,
     defaultLimit: 0,

packages/nc-gui/lib/constants.ts

@@ -4,7 +4,7 @@ export const NOCO = 'noco'
 
 export const SYSTEM_COLUMNS = ['id', 'title', 'created_at', 'updated_at']
 
-export const BASE_URL = import.meta.env.NC_BACKEND_URL || (process.env.NODE_ENV === 'production' ? '..' : 'http://localhost:8080')
+export const BASE_FALLBACK_URL = process.env.NODE_ENV === 'production' ? '..' : 'http://localhost:8080'
 /**
  * Each permission value means the following
  * `*` - which is wildcard, means all permissions are allowed

packages/nc-gui/nuxt.config.ts

@@ -35,6 +35,12 @@ export default defineNuxtConfig({
     '~/assets/style.scss',
   ],
 
+  runtimeConfig: {
+    public: {
+      ncBackendUrl: '',
+    },
+  },
+
   meta: {
     title: 'NocoDB',
     link: [

packages/nc-gui/package.json

@@ -28,7 +28,7 @@
     "build:copy": "npm run generate; rm -rf ../nc-lib-gui/lib/dist/; rsync -rvzh ./dist/ ../nc-lib-gui/lib/dist/",
     "build:copy:publish": "npm run generate; rm -rf ../nc-lib-gui/lib/dist/; rsync -rvzh ./dist/ ../nc-lib-gui/lib/dist/; npm publish ../nc-lib-gui",
     "postinstall": "node scripts/updateNuxtRouting.js",
-    "ci:run": "export NODE_OPTIONS=\"--max_old_space_size=16384\"; npm install; npm run build; NC_BACKEND_URL=http://localhost:8080 npm run start &"
+    "ci:run": "export NODE_OPTIONS=\"--max_old_space_size=16384\"; npm install; npm run build; NUXT_PUBLIC_NC_BACKEND_URL=http://localhost:8080 npm run start &"
   },
   "dependencies": {
     "@ckpack/vue-color": "^1.2.0",