feat: update the docs in forking applications (#1491)

web/app/components/app/overview/appCard.tsx

@@ -247,6 +247,7 @@ function AppCard({
               linkUrl=""
               onClose={() => setShowCustomizeModal(false)}
               appId={appInfo.id}
+              api_base_url={appInfo.api_base_url}
               mode={appInfo.mode}
             />
           </>

web/app/components/app/overview/customize/index.tsx

@@ -14,6 +14,7 @@ type IShareLinkProps = {
   isShow: boolean
   onClose: () => void
   linkUrl: string
+  api_base_url: string
   appId: string
   mode: AppMode
 }
@@ -37,6 +38,7 @@ const CustomizeModal: FC<IShareLinkProps> = ({
   isShow,
   onClose,
   appId,
+  api_base_url,
   mode,
 }) => {
   const { t } = useTranslation()
@@ -64,30 +66,32 @@ const CustomizeModal: FC<IShareLinkProps> = ({
           </a>
         </div>
       </div>
-      <div className='flex py-4'>
-        <StepNum>2</StepNum>
-        <div className='flex flex-col w-full'>
-          <div className='text-gray-900'>{t(`${prefixCustomize}.way1.step2`)}</div>
-          <div className='text-gray-500 text-xs mt-1 mb-2'>{t(`${prefixCustomize}.way1.step2Tip`)}</div>
-          <pre className='box-border py-3 px-4 bg-gray-100 text-xs font-medium rounded-lg select-text'>
-            export const APP_ID = '{appId}'<br />
-            export const API_KEY = {'\'<Web API Key From Dify>\''}
-          </pre>
-        </div>
-      </div>
       <div className='flex pt-4'>
-        <StepNum>3</StepNum>
+        <StepNum>2</StepNum>
         <div className='flex flex-col'>
           <div className='text-gray-900'>{t(`${prefixCustomize}.way1.step3`)}</div>
-          <div className='text-gray-500 text-xs mt-1 mb-2'>{t(`${prefixCustomize}.way1.step3Tip`)}</div>
+          <div className='text-gray-500 text-xs mt-1 mb-2'>{t(`${prefixCustomize}.way1.step2Tip`)}</div>
           <a href="https://vercel.com/docs/concepts/deployments/git/vercel-for-github" target='_blank'>
             <Button className='text-gray-800 text-sm w-fit'>
               <div className='mr-1.5 border-solid border-t-0 border-r-[7px] border-l-[7px] border-b-[12px] border-r-transparent border-b-black border-l-transparent border-t-transparent'></div>
-              <span>{t(`${prefixCustomize}.way1.step3Operation`)}</span>
+              <span>{t(`${prefixCustomize}.way1.step2Operation`)}</span>
             </Button>
           </a>
         </div>
       </div>
+      <div className='flex py-4'>
+        <StepNum>3</StepNum>
+        <div className='flex flex-col w-full'>
+          <div className='text-gray-900'>{t(`${prefixCustomize}.way1.step3`)}</div>
+          <div className='text-gray-500 text-xs mt-1 mb-2'>{t(`${prefixCustomize}.way1.step3Tip`)}</div>
+          <pre className='box-border py-3 px-4 bg-gray-100 text-xs font-medium rounded-lg select-text'>
+            NEXT_PUBLIC_APP_ID={`'${appId}'`} <br />
+            NEXT_PUBLIC_APP_KEY={'\'<Web API Key From Dify>\''} <br />
+            NEXT_PUBLIC_API_URL={`'${api_base_url}'`}
+          </pre>
+        </div>
+      </div>
+
     </div>
     <div className='w-full mt-4 px-6 py-5 border-gray-200 rounded-lg border-[0.5px]'>
       <Tag bordered={true} hideBg={true} className='text-primary-600 border-primary-600 uppercase'>{t(`${prefixCustomize}.way`)} 2</Tag>

web/i18n/lang/app-overview.en.ts

@@ -77,11 +77,11 @@ const translation = {
           step1: 'Fork the client code and modify it',
           step1Tip: 'Click here to fork the source code into your GitHub account and modify the code',
           step1Operation: 'Dify-WebClient',
-          step2: 'Configure the Web',
-          step2Tip: 'Copy the Web API and APP ID,then paste them into the client code config/index.ts',
-          step3: 'Deploy to Vercel',
-          step3Tip: 'Click here to import the repository into Vercel and deploy',
-          step3Operation: 'Import repository',
+          step2: 'Deploy to Vercel',
+          step2Tip: 'Click here to import the repository into Vercel and deploy',
+          step2Operation: 'Import repository',
+          step3: 'Configure environment variables',
+          step3Tip: 'Add the following environment variables in Vercel',
         },
         way2: {
           name: 'Write client-side code to call the API and deploy it to a server',

web/i18n/lang/app-overview.zh.ts

@@ -77,11 +77,11 @@ const translation = {
           step1: 'Fork 客户端代码并修改',
           step1Tip: '点击此处 Fork 源码到你的 GitHub 中，然后修改代码',
           step1Operation: 'Dify-WebClient',
-          step2: '配置 Web APP',
-          step2Tip: '复制 Web API 秘钥 和 APP ID 拷贝到客户端代码 config/index.ts 中',
-          step3: '部署到 Vercel 中',
-          step3Tip: '点击此处将仓库导入到 Vercel 中部署',
-          step3Operation: '导入仓库',
+          step2: '部署到 Vercel 中',
+          step2Tip: '点击此处将仓库导入到 Vercel 中部署',
+          step2Operation: '导入仓库',
+          step3: '配置环境变量',
+          step3Tip: '在 Vecel 环境变量中添加以下环境变量',
         },
         way2: {
           name: '编写客户端调用 API 并部署到服务器中',