From ea26742f63f2b75e79f5829050e7a8cc664877a0 Mon Sep 17 00:00:00 2001
From: johnny0120 <15564476+johnny0120@users.noreply.github.com>
Date: Sat, 10 May 2025 15:29:17 +0800
Subject: [PATCH] fix: use NextJS basePath and WEB_PREFIX to support custom
 prefix

---
 web/.env.example                              |  2 ++
 web/README.md                                 |  2 ++
 web/app/(commonLayout)/apps/AppCard.tsx       |  4 ++--
 .../datasets/NewDatasetCard.tsx               | 10 +++++-----
 .../components/app/app-publisher/index.tsx    |  6 +++---
 .../dataset-config/select-dataset/index.tsx   |  3 +--
 .../components/app/create-app-modal/index.tsx | 10 +++++-----
 web/app/components/app/log/index.tsx          |  3 +--
 web/app/components/app/overview/appCard.tsx   |  3 +--
 .../app/overview/embedded/index.tsx           |  9 ++++-----
 web/app/components/app/workflow-log/index.tsx |  3 +--
 .../base/logo/logo-embedded-chat-avatar.tsx   |  4 ++--
 .../base/logo/logo-embedded-chat-header.tsx   |  4 ++--
 web/app/components/base/logo/logo-site.tsx    |  4 ++--
 .../workplace-selector/index.tsx              |  4 ++--
 .../edit-workspace-modal/index.tsx            |  3 ++-
 .../invited-modal/invitation-link.tsx         |  6 +++---
 .../provider-icon/index.tsx                   |  3 +--
 .../components/header/dataset-nav/index.tsx   |  3 +--
 .../components/tools/add-tool-modal/tools.tsx |  4 ++--
 web/app/components/tools/provider/detail.tsx  |  6 +++---
 .../components/editor/code-editor/index.tsx   |  3 ++-
 .../forgot-password/ChangePasswordForm.tsx    |  4 ++--
 .../forgot-password/ForgotPasswordForm.tsx    |  4 ++--
 web/app/init/InitPasswordPopup.tsx            |  4 ++--
 web/app/install/installForm.tsx               |  5 ++---
 web/app/layout.tsx                            |  2 ++
 web/config/index.ts                           | 19 ++++++++++++++++++-
 web/docker/entrypoint.sh                      |  2 ++
 web/service/base.ts                           | 13 ++++++-------
 web/service/fetch.ts                          |  4 ++--
 31 files changed, 87 insertions(+), 69 deletions(-)

diff --git a/web/.env.example b/web/.env.example
index 51631c2437..e501df92b5 100644
--- a/web/.env.example
+++ b/web/.env.example
@@ -6,10 +6,12 @@ NEXT_PUBLIC_EDITION=SELF_HOSTED
 # different from api or web app domain.
 # example: http://cloud.dify.ai/console/api
 NEXT_PUBLIC_API_PREFIX=http://localhost:5001/console/api
+NEXT_PUBLIC_WEB_PREFIX=http://localhost:3000
 # The URL for Web APP, refers to the Web App base URL of WEB service if web app domain is different from
 # console or api domain.
 # example: http://udify.app/api
 NEXT_PUBLIC_PUBLIC_API_PREFIX=http://localhost:5001/api
+NEXT_PUBLIC_PUBLIC_WEB_PREFIX=http://localhost:3000
 # The API PREFIX for MARKETPLACE
 NEXT_PUBLIC_MARKETPLACE_API_PREFIX=https://marketplace.dify.ai/api/v1
 # The URL for MARKETPLACE
diff --git a/web/README.md b/web/README.md
index 3d9fd2de87..ddb1155264 100644
--- a/web/README.md
+++ b/web/README.md
@@ -31,10 +31,12 @@ NEXT_PUBLIC_EDITION=SELF_HOSTED
 # different from api or web app domain.
 # example: http://cloud.dify.ai/console/api
 NEXT_PUBLIC_API_PREFIX=http://localhost:5001/console/api
+NEXT_PUBLIC_WEB_PREFIX=http://localhost:3000
 # The URL for Web APP, refers to the Web App base URL of WEB service if web app domain is different from
 # console or api domain.
 # example: http://udify.app/api
 NEXT_PUBLIC_PUBLIC_API_PREFIX=http://localhost:5001/api
+NEXT_PUBLIC_PUBLIC_WEB_PREFIX=http://localhost:3000
 
 # SENTRY
 NEXT_PUBLIC_SENTRY_DSN=
diff --git a/web/app/(commonLayout)/apps/AppCard.tsx b/web/app/(commonLayout)/apps/AppCard.tsx
index 3f8c180c1a..c2ad1f1283 100644
--- a/web/app/(commonLayout)/apps/AppCard.tsx
+++ b/web/app/(commonLayout)/apps/AppCard.tsx
@@ -16,7 +16,7 @@ import AppsContext, { useAppContext } from '@/context/app-context'
 import type { HtmlContentProps } from '@/app/components/base/popover'
 import CustomPopover from '@/app/components/base/popover'
 import Divider from '@/app/components/base/divider'
-import { basePath } from '@/utils/var'
+import { WEB_PREFIX } from '@/config'
 import { getRedirection } from '@/utils/app-redirection'
 import { useProviderContext } from '@/context/provider-context'
 import { NEED_REFRESH_APP_LIST_KEY } from '@/config'
@@ -217,7 +217,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
       try {
         const { installed_apps }: any = await fetchInstalledAppList(app.id) || {}
         if (installed_apps?.length > 0)
-          window.open(`${basePath}/explore/installed/${installed_apps[0].id}`, '_blank')
+          window.open(`${WEB_PREFIX}/explore/installed/${installed_apps[0].id}`, '_blank')
         else
           throw new Error('No app found in Explore')
       }
diff --git a/web/app/(commonLayout)/datasets/NewDatasetCard.tsx b/web/app/(commonLayout)/datasets/NewDatasetCard.tsx
index 792d9904da..ddc48c2a6e 100644
--- a/web/app/(commonLayout)/datasets/NewDatasetCard.tsx
+++ b/web/app/(commonLayout)/datasets/NewDatasetCard.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { useTranslation } from 'react-i18next'
-import { basePath } from '@/utils/var'
+import Link from 'next/link'
 import {
   RiAddLine,
   RiArrowRightLine,
@@ -18,7 +18,7 @@ const CreateAppCard = (
     <div className='bg-background-default-dimm flex min-h-[160px] flex-col rounded-xl border-[0.5px]
       border-components-panel-border transition-all duration-200 ease-in-out'
     >
-      <a ref={ref} className='group flex grow cursor-pointer items-start p-4' href={`${basePath}/datasets/create`}>
+      <Link ref={ref} className='group flex grow cursor-pointer items-start p-4' href={'/datasets/create'}>
         <div className='flex items-center gap-3'>
           <div className='flex h-10 w-10 items-center justify-center rounded-lg border border-dashed border-divider-regular bg-background-default-lighter
             p-2 group-hover:border-solid group-hover:border-effects-highlight group-hover:bg-background-default-dodge'
@@ -27,12 +27,12 @@ const CreateAppCard = (
           </div>
           <div className='system-md-semibold text-text-secondary group-hover:text-text-accent'>{t('dataset.createDataset')}</div>
         </div>
-      </a>
+      </Link>
       <div className='system-xs-regular p-4 pt-0 text-text-tertiary'>{t('dataset.createDatasetIntro')}</div>
-      <a className='group flex cursor-pointer items-center gap-1 rounded-b-xl border-t-[0.5px] border-divider-subtle p-4' href={`${basePath}/datasets/connect`}>
+      <Link className='group flex cursor-pointer items-center gap-1 rounded-b-xl border-t-[0.5px] border-divider-subtle p-4' href={'datasets/connect'}>
         <div className='system-xs-medium text-text-tertiary group-hover:text-text-accent'>{t('dataset.connectDataset')}</div>
         <RiArrowRightLine className='h-3.5 w-3.5 text-text-tertiary group-hover:text-text-accent' />
-      </a>
+      </Link>
     </div>
   )
 }
diff --git a/web/app/components/app/app-publisher/index.tsx b/web/app/components/app/app-publisher/index.tsx
index d4357a0955..12144833e2 100644
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/web/app/components/app/app-publisher/index.tsx
@@ -24,7 +24,7 @@ import {
   PortalToFollowElemContent,
   PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import { basePath } from '@/utils/var'
+import { WEB_PREFIX } from '@/config'
 import { fetchInstalledAppList } from '@/service/explore'
 import EmbeddedModal from '@/app/components/app/overview/embedded'
 import { useStore as useAppStore } from '@/app/components/app/store'
@@ -76,7 +76,7 @@ const AppPublisher = ({
   const appDetail = useAppStore(state => state.appDetail)
   const { app_base_url: appBaseURL = '', access_token: accessToken = '' } = appDetail?.site ?? {}
   const appMode = (appDetail?.mode !== 'completion' && appDetail?.mode !== 'workflow') ? 'chat' : appDetail.mode
-  const appURL = `${appBaseURL}/${basePath}/${appMode}/${accessToken}`
+  const appURL = `${appBaseURL}/${appMode}/${accessToken}`
   const isChatApp = ['chat', 'agent-chat', 'completion'].includes(appDetail?.mode || '')
 
   const language = useGetLanguage()
@@ -121,7 +121,7 @@ const AppPublisher = ({
     try {
       const { installed_apps }: any = await fetchInstalledAppList(appDetail?.id) || {}
       if (installed_apps?.length > 0)
-        window.open(`${basePath}/explore/installed/${installed_apps[0].id}`, '_blank')
+        window.open(`${WEB_PREFIX}/explore/installed/${installed_apps[0].id}`, '_blank')
       else
         throw new Error('No app found in Explore')
     }
diff --git a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
index ffdb714f08..70f5e1edfd 100644
--- a/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/select-dataset/index.tsx
@@ -14,7 +14,6 @@ import Loading from '@/app/components/base/loading'
 import Badge from '@/app/components/base/badge'
 import { useKnowledge } from '@/hooks/use-knowledge'
 import cn from '@/utils/classnames'
-import { basePath } from '@/utils/var'
 
 export type ISelectDataSetProps = {
   isShow: boolean
@@ -112,7 +111,7 @@ const SelectDataSet: FC<ISelectDataSetProps> = ({
           }}
         >
           <span className='text-text-tertiary'>{t('appDebug.feature.dataSet.noDataSet')}</span>
-          <Link href={`${basePath}/datasets/create`} className='font-normal text-text-accent'>{t('appDebug.feature.dataSet.toCreate')}</Link>
+          <Link href={'/datasets/create'} className='font-normal text-text-accent'>{t('appDebug.feature.dataSet.toCreate')}</Link>
         </div>
       )}
 
diff --git a/web/app/components/app/create-app-modal/index.tsx b/web/app/components/app/create-app-modal/index.tsx
index 88bccc95af..4149126334 100644
--- a/web/app/components/app/create-app-modal/index.tsx
+++ b/web/app/components/app/create-app-modal/index.tsx
@@ -14,7 +14,7 @@ import type { AppIconSelection } from '../../base/app-icon-picker'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import cn from '@/utils/classnames'
-import { basePath } from '@/utils/var'
+import { WEB_PREFIX } from '@/config'
 import AppsContext, { useAppContext } from '@/context/app-context'
 import { useProviderContext } from '@/context/provider-context'
 import { ToastContext } from '@/app/components/base/toast'
@@ -353,11 +353,11 @@ function AppScreenShot({ mode, show }: { mode: AppMode; show: boolean }) {
     'workflow': 'Workflow',
   }
   return <picture>
-    <source media="(resolution: 1x)" srcSet={`${basePath}/screenshots/${theme}/${modeToImageMap[mode]}.png`} />
-    <source media="(resolution: 2x)" srcSet={`${basePath}/screenshots/${theme}/${modeToImageMap[mode]}@2x.png`} />
-    <source media="(resolution: 3x)" srcSet={`${basePath}/screenshots/${theme}/${modeToImageMap[mode]}@3x.png`} />
+    <source media="(resolution: 1x)" srcSet={`${WEB_PREFIX}/screenshots/${theme}/${modeToImageMap[mode]}.png`} />
+    <source media="(resolution: 2x)" srcSet={`${WEB_PREFIX}/screenshots/${theme}/${modeToImageMap[mode]}@2x.png`} />
+    <source media="(resolution: 3x)" srcSet={`${WEB_PREFIX}/screenshots/${theme}/${modeToImageMap[mode]}@3x.png`} />
     <Image className={show ? '' : 'hidden'}
-      src={`${basePath}/screenshots/${theme}/${modeToImageMap[mode]}.png`}
+      src={`${WEB_PREFIX}/screenshots/${theme}/${modeToImageMap[mode]}.png`}
       alt='App Screen Shot'
       width={664} height={448} />
   </picture>
diff --git a/web/app/components/app/log/index.tsx b/web/app/components/app/log/index.tsx
index 13be294bef..8e523b7cf8 100644
--- a/web/app/components/app/log/index.tsx
+++ b/web/app/components/app/log/index.tsx
@@ -7,7 +7,6 @@ import { usePathname } from 'next/navigation'
 import { useDebounce } from 'ahooks'
 import { omit } from 'lodash-es'
 import dayjs from 'dayjs'
-import { basePath } from '@/utils/var'
 import { Trans, useTranslation } from 'react-i18next'
 import List from './list'
 import Filter, { TIME_PERIOD_MAPPING } from './filter'
@@ -110,7 +109,7 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
           ? <Loading type='app' />
           : total > 0
             ? <List logs={isChatMode ? chatConversations : completionConversations} appDetail={appDetail} onRefresh={isChatMode ? mutateChatList : mutateCompletionList} />
-            : <EmptyElement appUrl={`${appDetail.site.app_base_url}${basePath}/${getWebAppType(appDetail.mode)}/${appDetail.site.access_token}`} />
+            : <EmptyElement appUrl={`${appDetail.site.app_base_url}/${getWebAppType(appDetail.mode)}/${appDetail.site.access_token}`} />
         }
         {/* Show Pagination only if the total is more than the limit */}
         {(total && total > APP_PAGE_LIMIT)
diff --git a/web/app/components/app/overview/appCard.tsx b/web/app/components/app/overview/appCard.tsx
index 7c12f1edee..04fc8f20d5 100644
--- a/web/app/components/app/overview/appCard.tsx
+++ b/web/app/components/app/overview/appCard.tsx
@@ -17,7 +17,6 @@ import type { ConfigParams } from './settings'
 import Tooltip from '@/app/components/base/tooltip'
 import AppBasic from '@/app/components/app-sidebar/basic'
 import { asyncRunSafe, randomString } from '@/utils'
-import { basePath } from '@/utils/var'
 import Button from '@/app/components/base/button'
 import Switch from '@/app/components/base/switch'
 import Divider from '@/app/components/base/divider'
@@ -89,7 +88,7 @@ function AppCard({
   const runningStatus = isApp ? appInfo.enable_site : appInfo.enable_api
   const { app_base_url, access_token } = appInfo.site ?? {}
   const appMode = (appInfo.mode !== 'completion' && appInfo.mode !== 'workflow') ? 'chat' : appInfo.mode
-  const appUrl = `${app_base_url}${basePath}/${appMode}/${access_token}`
+  const appUrl = `${app_base_url}/${appMode}/${access_token}`
   const apiUrl = appInfo?.api_base_url
 
   const genClickFuncByName = (opName: string) => {
diff --git a/web/app/components/app/overview/embedded/index.tsx b/web/app/components/app/overview/embedded/index.tsx
index 691b727b8e..e047b4f145 100644
--- a/web/app/components/app/overview/embedded/index.tsx
+++ b/web/app/components/app/overview/embedded/index.tsx
@@ -13,7 +13,6 @@ import { IS_CE_EDITION } from '@/config'
 import type { SiteInfo } from '@/models/share'
 import { useThemeContext } from '@/app/components/base/chat/embedded-chatbot/theme/theme-context'
 import ActionButton from '@/app/components/base/action-button'
-import { basePath } from '@/utils/var'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -29,7 +28,7 @@ const OPTION_MAP = {
   iframe: {
     getContent: (url: string, token: string) =>
       `<iframe
- src="${url}${basePath}/chatbot/${token}"
+ src="${url}/chatbot/${token}"
  style="width: 100%; height: 100%; min-height: 700px"
  frameborder="0"
  allow="microphone">
@@ -44,7 +43,7 @@ const OPTION_MAP = {
   isDev: true`
         : ''}${IS_CE_EDITION
           ? `,
-  baseUrl: '${url}${basePath}'`
+  baseUrl: '${url}'`
           : ''},
   systemVariables: {
     // user_id: 'YOU CAN DEFINE USER ID HERE',
@@ -53,7 +52,7 @@ const OPTION_MAP = {
  }
 </script>
 <script
- src="${url}${basePath}/embed.min.js"
+ src="${url}/embed.min.js"
  id="${token}"
  defer>
 </script>
@@ -68,7 +67,7 @@ const OPTION_MAP = {
 </style>`,
   },
   chromePlugin: {
-    getContent: (url: string, token: string) => `ChatBot URL: ${url}${basePath}/chatbot/${token}`,
+    getContent: (url: string, token: string) => `ChatBot URL: ${url}/chatbot/${token}`,
   },
 }
 const prefixEmbedded = 'appOverview.overview.appInfo.embedded'
diff --git a/web/app/components/app/workflow-log/index.tsx b/web/app/components/app/workflow-log/index.tsx
index f58d387d68..c350a8b3a7 100644
--- a/web/app/components/app/workflow-log/index.tsx
+++ b/web/app/components/app/workflow-log/index.tsx
@@ -11,7 +11,6 @@ import timezone from 'dayjs/plugin/timezone'
 import { Trans, useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import List from './list'
-import { basePath } from '@/utils/var'
 import Filter, { TIME_PERIOD_MAPPING } from './filter'
 import Pagination from '@/app/components/base/pagination'
 import Loading from '@/app/components/base/loading'
@@ -101,7 +100,7 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
           ? <Loading type='app' />
           : total > 0
             ? <List logs={workflowLogs} appDetail={appDetail} onRefresh={mutate} />
-            : <EmptyElement appUrl={`${appDetail.site.app_base_url}${basePath}/${getWebAppType(appDetail.mode)}/${appDetail.site.access_token}`} />
+            : <EmptyElement appUrl={`${appDetail.site.app_base_url}/${getWebAppType(appDetail.mode)}/${appDetail.site.access_token}`} />
         }
         {/* Show Pagination only if the total is more than the limit */}
         {(total && total > APP_PAGE_LIMIT)
diff --git a/web/app/components/base/logo/logo-embedded-chat-avatar.tsx b/web/app/components/base/logo/logo-embedded-chat-avatar.tsx
index f09a6a03ed..170a23bd4d 100644
--- a/web/app/components/base/logo/logo-embedded-chat-avatar.tsx
+++ b/web/app/components/base/logo/logo-embedded-chat-avatar.tsx
@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { basePath } from '@/utils/var'
+import { WEB_PREFIX } from '@/config'
 
 type LogoEmbeddedChatAvatarProps = {
   className?: string
@@ -9,7 +9,7 @@ const LogoEmbeddedChatAvatar: FC<LogoEmbeddedChatAvatarProps> = ({
 }) => {
   return (
     <img
-      src={`${basePath}/logo/logo-embedded-chat-avatar.png`}
+      src={`${WEB_PREFIX}/logo/logo-embedded-chat-avatar.png`}
       className={`block h-10 w-10 ${className}`}
       alt='logo'
     />
diff --git a/web/app/components/base/logo/logo-embedded-chat-header.tsx b/web/app/components/base/logo/logo-embedded-chat-header.tsx
index 38451abc5e..012b659f38 100644
--- a/web/app/components/base/logo/logo-embedded-chat-header.tsx
+++ b/web/app/components/base/logo/logo-embedded-chat-header.tsx
@@ -1,6 +1,6 @@
 import classNames from '@/utils/classnames'
 import type { FC } from 'react'
-import { basePath } from '@/utils/var'
+import { WEB_PREFIX } from '@/config'
 
 type LogoEmbeddedChatHeaderProps = {
   className?: string
@@ -14,7 +14,7 @@ const LogoEmbeddedChatHeader: FC<LogoEmbeddedChatHeaderProps> = ({
     <source media="(resolution: 2x)" srcSet='/logo/logo-embedded-chat-header@2x.png' />
     <source media="(resolution: 3x)" srcSet='/logo/logo-embedded-chat-header@3x.png' />
     <img
-      src={`${basePath}/logo/logo-embedded-chat-header.png`}
+      src={`${WEB_PREFIX}/logo/logo-embedded-chat-header.png`}
       alt='logo'
       className={classNames('block h-6 w-auto', className)}
     />
diff --git a/web/app/components/base/logo/logo-site.tsx b/web/app/components/base/logo/logo-site.tsx
index 0a93fae87d..3a0141cbc6 100644
--- a/web/app/components/base/logo/logo-site.tsx
+++ b/web/app/components/base/logo/logo-site.tsx
@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import { basePath } from '@/utils/var'
+import { WEB_PREFIX } from '@/config'
 import classNames from '@/utils/classnames'
 
 type LogoSiteProps = {
@@ -12,7 +12,7 @@ const LogoSite: FC<LogoSiteProps> = ({
 }) => {
   return (
     <img
-      src={`${basePath}/logo/logo.png`}
+      src={`${WEB_PREFIX}/logo/logo.png`}
       className={classNames('block w-[22.651px] h-[24.5px]', className)}
       alt='logo'
     />
diff --git a/web/app/components/header/account-dropdown/workplace-selector/index.tsx b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
index da3f8bae6d..ca95d92f37 100644
--- a/web/app/components/header/account-dropdown/workplace-selector/index.tsx
+++ b/web/app/components/header/account-dropdown/workplace-selector/index.tsx
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next'
 import { Menu, MenuButton, MenuItems, Transition } from '@headlessui/react'
 import { RiArrowDownSLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
-import { basePath } from '@/utils/var'
+import { WEB_PREFIX } from '@/config'
 import PlanBadge from '@/app/components/header/plan-badge'
 import { switchWorkspace } from '@/service/common'
 import { useWorkspacesContext } from '@/context/workspace-context'
@@ -23,7 +23,7 @@ const WorkplaceSelector = () => {
         return
       await switchWorkspace({ url: '/workspaces/switch', body: { tenant_id } })
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
-      location.assign(`${location.origin}${basePath}`)
+      location.assign(WEB_PREFIX)
     }
     catch {
       notify({ type: 'error', message: t('common.provider.saveFailed') })
diff --git a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
index 6d5b2b1ba0..2c11c36a67 100644
--- a/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
+++ b/web/app/components/header/account-setting/members-page/edit-workspace-modal/index.tsx
@@ -2,6 +2,7 @@
 import cn from '@/utils/classnames'
 import Modal from '@/app/components/base/modal'
 import Input from '@/app/components/base/input'
+import { WEB_PREFIX } from '@/config'
 import { useTranslation } from 'react-i18next'
 import { useState } from 'react'
 import { useContext } from 'use-context-selector'
@@ -33,7 +34,7 @@ const EditWorkspaceModal = ({
         },
       })
       notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
-      location.assign(`${location.origin}`)
+      location.assign(WEB_PREFIX)
     }
     catch {
       notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
diff --git a/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx b/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
index 0ef1b14569..028fb76779 100644
--- a/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
+++ b/web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx
@@ -1,6 +1,6 @@
 'use client'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { basePath } from '@/utils/var'
+import { WEB_PREFIX } from '@/config'
 import { t } from 'i18next'
 import copy from 'copy-to-clipboard'
 import s from './index.module.css'
@@ -19,7 +19,7 @@ const InvitationLink = ({
   const selector = useRef(`invite-link-${randomString(4)}`)
 
   const copyHandle = useCallback(() => {
-    copy(`${!value.url.startsWith('http') ? window.location.origin : ''}${basePath}${value.url}`)
+    copy(`${!value.url.startsWith('http') ? WEB_PREFIX : ''}${value.url}`)
     setIsCopied(true)
   }, [value])
 
@@ -42,7 +42,7 @@ const InvitationLink = ({
           <Tooltip
             popupContent={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
           >
-            <div className='r-0 absolute left-0 top-0 w-full cursor-pointer truncate pl-2 pr-2' onClick={copyHandle}>{basePath + value.url}</div>
+            <div className='r-0 absolute left-0 top-0 w-full cursor-pointer truncate pl-2 pr-2' onClick={copyHandle}>{value.url}</div>
           </Tooltip>
         </div>
         <div className="h-4 shrink-0 border bg-divider-regular" />
diff --git a/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx b/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
index 9dd4af468d..253269d920 100644
--- a/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/provider-icon/index.tsx
@@ -1,6 +1,5 @@
 import type { FC } from 'react'
 import type { ModelProvider } from '../declarations'
-import { basePath } from '@/utils/var'
 import { useLanguage } from '../hooks'
 import { Openai } from '@/app/components/base/icons/src/vender/other'
 import { AnthropicDark, AnthropicLight } from '@/app/components/base/icons/src/public/llm'
@@ -41,7 +40,7 @@ const ProviderIcon: FC<ProviderIconProps> = ({
     <div className={cn('inline-flex items-center gap-2', className)}>
       <img
         alt='provider-icon'
-        src={basePath + renderI18nObject(provider.icon_small, language)}
+        src={renderI18nObject(provider.icon_small, language)}
         className='h-6 w-6'
       />
       <div className='system-md-semibold text-text-primary'>
diff --git a/web/app/components/header/dataset-nav/index.tsx b/web/app/components/header/dataset-nav/index.tsx
index 4894a62484..8c997f2115 100644
--- a/web/app/components/header/dataset-nav/index.tsx
+++ b/web/app/components/header/dataset-nav/index.tsx
@@ -14,7 +14,6 @@ import Nav from '../nav'
 import type { NavItem } from '../nav/nav-selector'
 import { fetchDatasetDetail, fetchDatasets } from '@/service/datasets'
 import type { DataSetListResponse } from '@/models/datasets'
-import { basePath } from '@/utils/var'
 
 const getKey = (pageIndex: number, previousPageData: DataSetListResponse) => {
   if (!pageIndex || previousPageData.has_more)
@@ -57,7 +56,7 @@ const DatasetNav = () => {
         icon_background: dataset.icon_background,
       })) as NavItem[]}
       createText={t('common.menus.newDataset')}
-      onCreate={() => router.push(`${basePath}/datasets/create`)}
+      onCreate={() => router.push('/datasets/create')}
       onLoadmore={handleLoadmore}
     />
   )
diff --git a/web/app/components/tools/add-tool-modal/tools.tsx b/web/app/components/tools/add-tool-modal/tools.tsx
index 17a3df8357..4cf0fb750b 100644
--- a/web/app/components/tools/add-tool-modal/tools.tsx
+++ b/web/app/components/tools/add-tool-modal/tools.tsx
@@ -2,7 +2,7 @@ import {
   memo,
   useCallback,
 } from 'react'
-import { basePath } from '@/utils/var'
+import Link from 'next/link'
 import { useTranslation } from 'react-i18next'
 import {
   RiAddLine,
@@ -54,7 +54,7 @@ const Blocks = ({
       >
         <div className='flex h-[22px] w-full items-center justify-between pl-3 pr-1 text-xs font-medium text-gray-500'>
           {toolWithProvider.label[language]}
-          <a className='hidden cursor-pointer items-center group-hover:flex' href={`${basePath}/tools?category=${toolWithProvider.type}`} target='_blank'>{t('tools.addToolModal.manageInTools')}<ArrowUpRight className='ml-0.5 h-3 w-3' /></a>
+          <Link className='hidden cursor-pointer items-center group-hover:flex' href={`/tools?category=${toolWithProvider.type}`} target='_blank'>{t('tools.addToolModal.manageInTools')}<ArrowUpRight className='ml-0.5 h-3 w-3' /></Link>
         </div>
         {list.map((tool) => {
           const labelContent = (() => {
diff --git a/web/app/components/tools/provider/detail.tsx b/web/app/components/tools/provider/detail.tsx
index 20c7017ded..045d6f1e73 100644
--- a/web/app/components/tools/provider/detail.tsx
+++ b/web/app/components/tools/provider/detail.tsx
@@ -6,7 +6,7 @@ import {
   RiCloseLine,
 } from '@remixicon/react'
 import { AuthHeaderPrefix, AuthType, CollectionType } from '../types'
-import { basePath } from '@/utils/var'
+import Link from 'next/link'
 import type { Collection, CustomCollectionBackend, Tool, WorkflowToolProviderRequest, WorkflowToolProviderResponse } from '../types'
 import ToolItem from './tool-item'
 import cn from '@/utils/classnames'
@@ -279,10 +279,10 @@ const ProviderDetail = ({
                 variant='primary'
                 className={cn('my-3 w-[183px] shrink-0')}
               >
-                <a className='flex items-center' href={`${basePath}/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
+                <Link className='flex items-center' href={`/app/${(customCollection as WorkflowToolProviderResponse).workflow_app_id}/workflow`} rel='noreferrer' target='_blank'>
                   <div className='system-sm-medium'>{t('tools.openInStudio')}</div>
                   <LinkExternal02 className='ml-1 h-4 w-4' />
-                </a>
+                </Link>
               </Button>
               <Button
                 className={cn('my-3 w-[183px] shrink-0')}
diff --git a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
index a185f16e2e..1fac467e36 100644
--- a/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
+++ b/web/app/components/workflow/nodes/_base/components/editor/code-editor/index.tsx
@@ -3,6 +3,7 @@ import type { FC } from 'react'
 import Editor, { loader } from '@monaco-editor/react'
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import Base from '../base'
+import { WEB_PREFIX } from '@/config'
 import cn from '@/utils/classnames'
 import { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import {
@@ -14,7 +15,7 @@ import './style.css'
 import { noop } from 'lodash-es'
 
 // load file from local instead of cdn https://github.com/suren-atoyan/monaco-react/issues/482
-loader.config({ paths: { vs: '/vs' } })
+loader.config({ paths: { vs: `${WEB_PREFIX}/vs` } })
 
 const CODE_EDITOR_LINE_HEIGHT = 18
 
diff --git a/web/app/forgot-password/ChangePasswordForm.tsx b/web/app/forgot-password/ChangePasswordForm.tsx
index 1ab56102f7..8342cb0bb9 100644
--- a/web/app/forgot-password/ChangePasswordForm.tsx
+++ b/web/app/forgot-password/ChangePasswordForm.tsx
@@ -3,7 +3,7 @@ import { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
 import { useSearchParams } from 'next/navigation'
-import { basePath } from '@/utils/var'
+import Link from 'next/link'
 import cn from 'classnames'
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
 import Input from '../components/base/input'
@@ -164,7 +164,7 @@ const ChangePasswordForm = () => {
           </div>
           <div className="mx-auto mt-6 w-full">
             <Button variant='primary' className='w-full'>
-              <a href={`${basePath}/signin`}>{t('login.passwordChanged')}</a>
+              <Link href={'/signin'}>{t('login.passwordChanged')}</Link>
             </Button>
           </div>
         </div>
diff --git a/web/app/forgot-password/ForgotPasswordForm.tsx b/web/app/forgot-password/ForgotPasswordForm.tsx
index 37e6de7d5d..377ca2bb26 100644
--- a/web/app/forgot-password/ForgotPasswordForm.tsx
+++ b/web/app/forgot-password/ForgotPasswordForm.tsx
@@ -10,7 +10,7 @@ import { zodResolver } from '@hookform/resolvers/zod'
 import Loading from '../components/base/loading'
 import Input from '../components/base/input'
 import Button from '@/app/components/base/button'
-import { basePath } from '@/utils/var'
+import { WEB_PREFIX } from '@/config'
 
 import {
   fetchInitValidateStatus,
@@ -71,7 +71,7 @@ const ForgotPasswordForm = () => {
     fetchSetupStatus().then(() => {
       fetchInitValidateStatus().then((res: InitValidateStatusResponse) => {
         if (res.status === 'not_started')
-          window.location.href = `${basePath}/init`
+          window.location.href = `${WEB_PREFIX}/init`
       })
 
       setLoading(false)
diff --git a/web/app/init/InitPasswordPopup.tsx b/web/app/init/InitPasswordPopup.tsx
index 464da9edea..694a45e324 100644
--- a/web/app/init/InitPasswordPopup.tsx
+++ b/web/app/init/InitPasswordPopup.tsx
@@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation'
 import Toast from '../components/base/toast'
 import Loading from '../components/base/loading'
 import Button from '@/app/components/base/button'
-import { basePath } from '@/utils/var'
+import { WEB_PREFIX } from '@/config'
 import { fetchInitValidateStatus, initValidate } from '@/service/common'
 import type { InitValidateStatusResponse } from '@/models/common'
 
@@ -42,7 +42,7 @@ const InitPasswordPopup = () => {
   useEffect(() => {
     fetchInitValidateStatus().then((res: InitValidateStatusResponse) => {
       if (res.status === 'finished')
-        window.location.href = `${basePath}/install`
+        window.location.href = `${WEB_PREFIX}/install`
       else
         setLoading(false)
     })
diff --git a/web/app/install/installForm.tsx b/web/app/install/installForm.tsx
index 99f2ec6b77..c01be722c0 100644
--- a/web/app/install/installForm.tsx
+++ b/web/app/install/installForm.tsx
@@ -16,7 +16,6 @@ import Button from '@/app/components/base/button'
 
 import { fetchInitValidateStatus, fetchSetupStatus, setup } from '@/service/common'
 import type { InitValidateStatusResponse, SetupStatusResponse } from '@/models/common'
-import { basePath } from '@/utils/var'
 
 const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
 
@@ -81,12 +80,12 @@ const InstallForm = () => {
     fetchSetupStatus().then((res: SetupStatusResponse) => {
       if (res.step === 'finished') {
         localStorage.setItem('setup_status', 'finished')
-        router.push(`${basePath}/signin`)
+        router.push('/signin')
       }
       else {
         fetchInitValidateStatus().then((res: InitValidateStatusResponse) => {
           if (res.status === 'not_started')
-            router.push(`${basePath}/init`)
+            router.push('/init')
         })
       }
       setLoading(false)
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index 438f56d363..8bfa41d787 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -39,7 +39,9 @@ const LocaleLayout = async ({
       <body
         className="color-scheme h-full select-auto"
         data-api-prefix={process.env.NEXT_PUBLIC_API_PREFIX}
+        data-web-prefix={process.env.NEXT_PUBLIC_WEB_PREFIX}
         data-pubic-api-prefix={process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX}
+        data-pubic-web-prefix={process.env.NEXT_PUBLIC_PUBLIC_WEB_PREFIX}
         data-marketplace-api-prefix={process.env.NEXT_PUBLIC_MARKETPLACE_API_PREFIX}
         data-marketplace-url-prefix={process.env.NEXT_PUBLIC_MARKETPLACE_URL_PREFIX}
         data-public-edition={process.env.NEXT_PUBLIC_EDITION}
diff --git a/web/config/index.ts b/web/config/index.ts
index af4da76835..d1bd34843a 100644
--- a/web/config/index.ts
+++ b/web/config/index.ts
@@ -3,29 +3,44 @@ import { AgentStrategy } from '@/types/app'
 import { PromptRole } from '@/models/debug'
 
 export let apiPrefix = ''
+export let webPrefix = ''
 export let publicApiPrefix = ''
+export let publicWebPrefix = ''
 export let marketplaceApiPrefix = ''
 export let marketplaceUrlPrefix = ''
 
 // NEXT_PUBLIC_API_PREFIX=/console/api NEXT_PUBLIC_PUBLIC_API_PREFIX=/api npm run start
-if (process.env.NEXT_PUBLIC_API_PREFIX && process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX) {
+if (
+  process.env.NEXT_PUBLIC_API_PREFIX
+  && process.env.NEXT_PUBLIC_WEB_PREFIX
+  && process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX
+  && process.env.NEXT_PUBLIC_PUBLIC_WEB_PREFIX
+) {
   apiPrefix = process.env.NEXT_PUBLIC_API_PREFIX
+  webPrefix = process.env.NEXT_PUBLIC_WEB_PREFIX
   publicApiPrefix = process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX
+  publicWebPrefix = process.env.NEXT_PUBLIC_PUBLIC_WEB_PREFIX
 }
 else if (
   globalThis.document?.body?.getAttribute('data-api-prefix')
+  && globalThis.document?.body?.getAttribute('data-web-prefix')
   && globalThis.document?.body?.getAttribute('data-pubic-api-prefix')
+  && globalThis.document?.body?.getAttribute('data-pubic-web-prefix')
 ) {
   // Not build can not get env from process.env.NEXT_PUBLIC_ in browser https://nextjs.org/docs/basic-features/environment-variables#exposing-environment-variables-to-the-browser
   apiPrefix = globalThis.document.body.getAttribute('data-api-prefix') as string
+  webPrefix = globalThis.document.body.getAttribute('data-web-prefix') as string
   publicApiPrefix = globalThis.document.body.getAttribute('data-pubic-api-prefix') as string
+  publicWebPrefix = globalThis.document.body.getAttribute('data-pubic-web-prefix') as string
 }
 else {
   // const domainParts = globalThis.location?.host?.split('.');
   // in production env, the host is dify.app . In other env, the host is [dev].dify.app
   // const env = domainParts.length === 2 ? 'ai' : domainParts?.[0];
   apiPrefix = 'http://localhost:5001/console/api'
+  webPrefix = 'http://localhost:3000'
   publicApiPrefix = 'http://localhost:5001/api' // avoid browser private mode api cross origin
+  publicWebPrefix = 'http://localhost:3000'
   marketplaceApiPrefix = 'http://localhost:5002/api'
 }
 
@@ -39,7 +54,9 @@ else {
 }
 
 export const API_PREFIX: string = apiPrefix
+export const WEB_PREFIX: string = webPrefix
 export const PUBLIC_API_PREFIX: string = publicApiPrefix
+export const PUBLIC_WEB_PREFIX: string = publicWebPrefix
 export const MARKETPLACE_API_PREFIX: string = marketplaceApiPrefix
 export const MARKETPLACE_URL_PREFIX: string = marketplaceUrlPrefix
 
diff --git a/web/docker/entrypoint.sh b/web/docker/entrypoint.sh
index adb1d7d3af..72306c7671 100755
--- a/web/docker/entrypoint.sh
+++ b/web/docker/entrypoint.sh
@@ -15,7 +15,9 @@ set -e
 export NEXT_PUBLIC_DEPLOY_ENV=${DEPLOY_ENV}
 export NEXT_PUBLIC_EDITION=${EDITION}
 export NEXT_PUBLIC_API_PREFIX=${CONSOLE_API_URL}/console/api
+export NEXT_PUBLIC_WEB_PREFIX=${CONSOLE_WEB_URL}
 export NEXT_PUBLIC_PUBLIC_API_PREFIX=${APP_API_URL}/api
+export NEXT_PUBLIC_PUBLIC_WEB_PREFIX=${APP_WEB_URL}
 export NEXT_PUBLIC_MARKETPLACE_API_PREFIX=${MARKETPLACE_API_URL}/api/v1
 export NEXT_PUBLIC_MARKETPLACE_URL_PREFIX=${MARKETPLACE_URL}
 
diff --git a/web/service/base.ts b/web/service/base.ts
index e3d1dc0ca2..43e65f8235 100644
--- a/web/service/base.ts
+++ b/web/service/base.ts
@@ -1,7 +1,6 @@
-import { API_PREFIX, IS_CE_EDITION, PUBLIC_API_PREFIX } from '@/config'
+import { API_PREFIX, IS_CE_EDITION, PUBLIC_API_PREFIX, PUBLIC_WEB_PREFIX, WEB_PREFIX } from '@/config'
 import { refreshAccessTokenOrRelogin } from './refresh-token'
 import Toast from '@/app/components/base/toast'
-import { basePath } from '@/utils/var'
 import type { AnnotationReply, MessageEnd, MessageReplace, ThoughtItem } from '@/app/components/base/chat/chat/type'
 import type { VisionFile } from '@/types/app'
 import type {
@@ -109,7 +108,7 @@ function unicodeToChar(text: string) {
 }
 
 function requiredWebSSOLogin() {
-  globalThis.location.href = `/webapp-signin?redirect_url=${globalThis.location.pathname}`
+  globalThis.location.href = `${PUBLIC_WEB_PREFIX}/webapp-signin?redirect_url=${globalThis.location.pathname}`
 }
 
 export function format(text: string) {
@@ -467,7 +466,7 @@ export const request = async<T>(url: string, options = {}, otherOptions?: IOther
     const errResp: Response = err as any
     if (errResp.status === 401) {
       const [parseErr, errRespData] = await asyncRunSafe<ResponseError>(errResp.json())
-      const loginUrl = `${globalThis.location.origin}${basePath}/signin`
+      const loginUrl = `${WEB_PREFIX}/signin`
       if (parseErr) {
         globalThis.location.href = loginUrl
         return Promise.reject(err)
@@ -499,11 +498,11 @@ export const request = async<T>(url: string, options = {}, otherOptions?: IOther
         return Promise.reject(err)
       }
       if (code === 'not_init_validated' && IS_CE_EDITION) {
-        globalThis.location.href = `${globalThis.location.origin}${basePath}/init`
+        globalThis.location.href = `${WEB_PREFIX}/init`
         return Promise.reject(err)
       }
       if (code === 'not_setup' && IS_CE_EDITION) {
-        globalThis.location.href = `${globalThis.location.origin}${basePath}/install`
+        globalThis.location.href = `${WEB_PREFIX}/install`
         return Promise.reject(err)
       }
 
@@ -511,7 +510,7 @@ export const request = async<T>(url: string, options = {}, otherOptions?: IOther
       const [refreshErr] = await asyncRunSafe(refreshAccessTokenOrRelogin(TIME_OUT))
       if (refreshErr === null)
         return baseFetch<T>(url, options, otherOptionsForBaseFetch)
-      if (location.pathname !== `${basePath}/signin` || !IS_CE_EDITION) {
+      if (!location.pathname.includes('/signin') || !IS_CE_EDITION) {
         globalThis.location.href = loginUrl
         return Promise.reject(err)
       }
diff --git a/web/service/fetch.ts b/web/service/fetch.ts
index 5d09256f1d..05d39c6b3e 100644
--- a/web/service/fetch.ts
+++ b/web/service/fetch.ts
@@ -2,7 +2,7 @@ import type { AfterResponseHook, BeforeErrorHook, BeforeRequestHook, Hooks } fro
 import ky from 'ky'
 import type { IOtherOptions } from './base'
 import Toast from '@/app/components/base/toast'
-import { API_PREFIX, MARKETPLACE_API_PREFIX, PUBLIC_API_PREFIX } from '@/config'
+import { API_PREFIX, MARKETPLACE_API_PREFIX, PUBLIC_API_PREFIX, WEB_PREFIX } from '@/config'
 import { getInitialTokenV2, isTokenV1 } from '@/app/components/share/utils'
 import { getProcessedSystemVariablesFromUrlParams } from '@/app/components/base/chat/utils'
 
@@ -44,7 +44,7 @@ const afterResponseErrorCode = (otherOptions: IOtherOptions): AfterResponseHook
             if (!otherOptions.silent)
               Toast.notify({ type: 'error', message: data.message })
             if (data.code === 'already_setup')
-              globalThis.location.href = `${globalThis.location.origin}/signin`
+              globalThis.location.href = `${WEB_PREFIX}/signin`
           })
           break
         case 401: