Fix/server web setup (#3304)

* fix: server web setup and rebranding build * fix: add loading and env build example * fix: clean code * Delete .env.server-web.example * Update .scripts/env.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update env.ts * Update .scripts/electron-package-utils/concrete-packager/desktop-packager.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Update apps/server-web/src/locales/i18n/en/translation.json Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: Ruslan Konviser <[email protected]> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
ever-co · Nov 11, 2024 · b6185de · b6185de
1 parent f8320f1
commit b6185de
Show file tree

Hide file tree

Showing 18 changed files with 177 additions and 78 deletions.
diff --git a/...esktop-environment/concrete-environment-content/desktop-server-web-environment-content.ts b/...esktop-environment/concrete-environment-content/desktop-server-web-environment-content.ts
@@ -4,15 +4,20 @@ import { IDesktopEnvironment } from '../intefaces/i-desktop-environment';
 export class DesktopServerWebEnvironmentContent implements IContentGenerator {
     public generate(variable: Partial<IDesktopEnvironment>): string {
         return `
-            NAME: '${variable.DESKTOP_SERVER_WEB_APP_NAME || variable.NAME}',
-            DESCRIPTION: '${variable.DESKTOP_SERVER_WEB_APP_DESCRIPTION || variable.DESCRIPTION}',
-            APP_ID: '${variable.DESKTOP_SERVER_WEB_APP_ID || variable.APP_ID}',
-            REPO_NAME: '${variable.DESKTOP_SERVER_WEB_APP_REPO_NAME || variable.REPO_NAME}',
-            REPO_OWNER: '${variable.DESKTOP_SERVER_WEB_APP_REPO_OWNER || variable.REPO_OWNER}',
-            WELCOME_TITLE: '${variable.DESKTOP_SERVER_WEB_APP_WELCOME_TITLE || variable.WELCOME_TITLE}',
-            WELCOME_CONTENT: '${variable.DESKTOP_SERVER_WEB_APP_WELCOME_CONTENT || variable.WELCOME_CONTENT}',
+            NAME: '${variable.DESKTOP_WEB_SERVER_APP_NAME || variable.NAME}',
+            DESCRIPTION: '${variable.DESKTOP_WEB_SERVER_APP_DESCRIPTION || variable.DESCRIPTION}',
+            APP_ID: '${variable.DESKTOP_WEB_SERVER_APP_ID || variable.APP_ID}',
+            REPO_NAME: '${variable.DESKTOP_WEB_SERVER_APP_REPO_NAME || variable.REPO_NAME}',
+            REPO_OWNER: '${variable.DESKTOP_WEB_SERVER_APP_REPO_OWNER || variable.REPO_OWNER}',
+            WELCOME_TITLE: '${variable.DESKTOP_WEB_SERVER_APP_WELCOME_TITLE || variable.WELCOME_TITLE}',
+            WELCOME_CONTENT: '${variable.DESKTOP_WEB_SERVER_APP_WELCOME_CONTENT || variable.WELCOME_CONTENT}',
             PLATFORM_LOGO: '${variable.PLATFORM_LOGO}',
-            DESKTOP_SERVER_WEB_APP_DESKTOP_APP_LOGO_512X512: '${variable.DESKTOP_SERVER_WEB_APP_DESKTOP_APP_LOGO_512X512}',
+            GAUZY_DESKTOP_LOGO_512X512: '${variable.GAUZY_DESKTOP_LOGO_512X512}',
+            DESKTOP_WEB_SERVER_APP_DEFAULT_API_URL: '${variable.GAUZY_API_SERVER_URL}',
+            DESKTOP_WEB_SERVER_APP_DEFAULT_PORT: '${variable.DESKTOP_WEB_SERVER_APP_DEFAULT_PORT}',
+            GAUZY_API_SERVER_URL: '${variable.GAUZY_API_SERVER_URL}',
+            NEXT_PUBLIC_GAUZY_API_SERVER_URL: '${variable.NEXT_PUBLIC_GAUZY_API_SERVER_URL}',
+            DESKTOP_WEB_SERVER_HOSTNAME: '${variable.DESKTOP_WEB_SERVER_HOSTNAME}',
         `;
     }
 }
diff --git a/.scripts/electron-desktop-environment/intefaces/i-desktop-environment.ts b/.scripts/electron-desktop-environment/intefaces/i-desktop-environment.ts
@@ -9,5 +9,8 @@ export interface IDesktopEnvironment extends Env {
     WELCOME_TITLE: string;
     WELCOME_CONTENT: string;
     PLATFORM_LOGO: string;
-    DESKTOP_SERVER_WEB_APP_DESKTOP_APP_LOGO_512X512: string;
+    GAUZY_DESKTOP_LOGO_512X512: string;
+    GAUZY_API_SERVER_URL: string;
+    NEXT_PUBLIC_GAUZY_API_SERVER_URL: string;
+    DESKTOP_WEB_SERVER_HOSTNAME: string;
 }
diff --git a/.scripts/electron-package-utils/concrete-packager/desktop-packager.ts b/.scripts/electron-package-utils/concrete-packager/desktop-packager.ts
@@ -5,21 +5,21 @@ import { env } from '../../env';
 
 export class DesktopPackager implements IPackager {
 	public prepare(pkg: IPackage): IPackage {
-		pkg.name = env.DESKTOP_SERVER_WEB_APP_NAME || pkg.name;
-		pkg.productName = env.DESKTOP_SERVER_WEB_APP_DESCRIPTION || pkg.productName;
-		pkg.description = env.DESKTOP_SERVER_WEB_APP_DESCRIPTION || pkg.description;
+		pkg.name = env.DESKTOP_WEB_SERVER_APP_NAME || pkg.name;
+		pkg.productName = env.DESKTOP_WEB_SERVER_APP_NAME || pkg.productName;
+		pkg.description = env.DESKTOP_WEB_SERVER_APP_DESCRIPTION || pkg.description;
 		pkg.homepage = env.COMPANY_SITE_LINK || pkg.homepage;
-		pkg.build.appId = env.DESKTOP_SERVER_WEB_APP_ID || pkg.build.appId;
+		pkg.build.appId = env.DESKTOP_WEB_SERVER_APP_ID || pkg.build.appId;
 		pkg.build.productName =
-			env.DESKTOP_SERVER_WEB_APP_DESCRIPTION || pkg.build.productName;
+			env.DESKTOP_WEB_SERVER_APP_DESCRIPTION || pkg.build.productName;
 		pkg.build.linux.executableName =
-			env.DESKTOP_SERVER_WEB_APP_NAME || pkg.build.linux.executableName;
+			env.DESKTOP_WEB_SERVER_APP_NAME || pkg.build.linux.executableName;
 		return pkg;
 	}
 
 	public prepareBuild(pkg: IPackageBuild): IPackageBuild {
-		pkg.description = env.DESKTOP_SERVER_WEB_APP_DESCRIPTION || pkg.description;
-		pkg.name = env.DESKTOP_SERVER_WEB_APP_NAME || pkg.name;
+		pkg.description = env.DESKTOP_WEB_SERVER_APP_DESCRIPTION || pkg.description;
+		pkg.name = env.DESKTOP_WEB_SERVER_APP_NAME || pkg.name;
 		return pkg;
 	}
 }
diff --git a/.scripts/env.ts b/.scripts/env.ts
@@ -5,22 +5,24 @@ import {
 
 export type Env = Readonly<{
     PLATFORM_LOGO: string;
-    DESKTOP_SERVER_WEB_APP_NAME: string;
-    DESKTOP_SERVER_WEB_APP_DESCRIPTION: string;
-    DESKTOP_SERVER_WEB_APP_ID: string;
-    DESKTOP_SERVER_WEB_APP_REPO_NAME: string;
-    DESKTOP_SERVER_WEB_APP_REPO_OWNER: string;
-    DESKTOP_SERVER_WEB_APP_WELCOME_TITLE: string;
-    DESKTOP_SERVER_WEB_APP_WELCOME_CONTENT: string;
-    DESKTOP_SERVER_WEB_APP_DESKTOP_APP_LOGO_512X512: string;
-    DESKTOP_SERVER_WEB_APP_DEFAULT_PORT: number;
-    DESKTOP_SERVER_WEB_APP_DEFAULT_API_URL: string;
+    DESKTOP_WEB_SERVER_APP_NAME: string;
+    DESKTOP_WEB_SERVER_APP_DESCRIPTION: string;
+    DESKTOP_WEB_SERVER_APP_ID: string;
+    DESKTOP_WEB_SERVER_APP_REPO_NAME: string;
+    DESKTOP_WEB_SERVER_APP_REPO_OWNER: string;
+    DESKTOP_WEB_SERVER_APP_WELCOME_TITLE: string;
+    DESKTOP_WEB_SERVER_APP_WELCOME_CONTENT: string;
+    GAUZY_DESKTOP_LOGO_512X512: string;
+    DESKTOP_WEB_SERVER_APP_DEFAULT_PORT: number;
+    DESKTOP_WEB_SERVER_APP_DEFAULT_API_URL: string;
     I18N_FILES_URL: string;
     COMPANY_SITE_LINK: string;
     COMPANY_GITHUB_LINK: string;
+    GAUZY_API_SERVER_URL: string;
+    NEXT_PUBLIC_GAUZY_API_SERVER_URL: string;
+    DESKTOP_WEB_SERVER_HOSTNAME: string;
 }>
 
-
 export const env = cleanEnv(process.env, {
     COMPANY_SITE_LINK: str({
         default: 'https://ever.team/'
@@ -31,35 +33,41 @@ export const env = cleanEnv(process.env, {
     PLATFORM_LOGO: str({
         default: 'src/resources/icons/platform-logo.png'
     }),
-    DESKTOP_SERVER_WEB_APP_NAME: str({
+    DESKTOP_WEB_SERVER_APP_NAME: str({
         default: 'ever-teams-server-web'
     }),
-    DESKTOP_SERVER_WEB_APP_DESCRIPTION: str({
+    DESKTOP_WEB_SERVER_APP_DESCRIPTION: str({
         default: 'Ever Teams Server Web'
     }),
-    DESKTOP_SERVER_WEB_APP_ID: str({
+    DESKTOP_WEB_SERVER_APP_ID: str({
         default: 'com.ever.teams.serverweb'
     }),
-    DESKTOP_SERVER_WEB_APP_REPO_NAME: str({
+    DESKTOP_WEB_SERVER_APP_REPO_NAME: str({
         default: 'ever-teams-web-server'
     }),
-    DESKTOP_SERVER_WEB_APP_REPO_OWNER: str({
+    DESKTOP_WEB_SERVER_APP_REPO_OWNER: str({
         default: 'ever-co'
     }),
-    DESKTOP_SERVER_WEB_APP_WELCOME_TITLE: str({
+    DESKTOP_WEB_SERVER_APP_WELCOME_TITLE: str({
         default: 'Welcome to Ever Teams Web Server'
     }),
-    DESKTOP_SERVER_WEB_APP_WELCOME_CONTENT: str({
+    DESKTOP_WEB_SERVER_APP_WELCOME_CONTENT: str({
         default: 'Ever Teams Web Server is a web application that allows you to manage your teams and projects.'
     }),
-    DESKTOP_SERVER_WEB_APP_DESKTOP_APP_LOGO_512X512: str({
+    DESKTOP_WEB_SERVER_APP_DESKTOP_APP_LOGO_512X512: str({
         default: 'assets/icons/desktop_logo_512x512.png'
     }),
-    DESKTOP_SERVER_WEB_APP_DEFAULT_PORT: num({
+    DESKTOP_WEB_SERVER_APP_DEFAULT_PORT: num({
         default: 3333
     }),
-    DESKTOP_SERVER_WEB_APP_DEFAULT_API_URL: str({
+    DESKTOP_WEB_SERVER_APP_DEFAULT_API_URL: str({
         default: 'http://localhost:3000'
     }),
     I18N_FILES_URL: str({ default: '' }),
+    GAUZY_API_SERVER_URL: str({ default: 'http://localhost:3000' }),
+    NEXT_PUBLIC_GAUZY_API_SERVER_URL: str({ default: 'http://localhost:3000' }),
+    DESKTOP_WEB_SERVER_HOSTNAME: str({
+        default: '0.0.0.0', // let's use the same one for now for all envs
+        desc: 'WARNING: Using 0.0.0.0 binds to all network interfaces. Use with caution in production.'
+    })
 });
diff --git a/.scripts/icon-utils/concrete-generators/desktop-default-icon-generator.ts b/.scripts/icon-utils/concrete-generators/desktop-default-icon-generator.ts
@@ -33,8 +33,8 @@ export class DesktopDefaultIconGenerator implements IIconGeneratorBase {
 						reject(error);
 						return;
 					}
-					DesktopEnvironmentManager.environment.DESKTOP_SERVER_WEB_APP_DESKTOP_APP_LOGO_512X512 =
-						env.DESKTOP_SERVER_WEB_APP_DESKTOP_APP_LOGO_512X512;
+					DesktopEnvironmentManager.environment.GAUZY_DESKTOP_LOGO_512X512 =
+						env.GAUZY_DESKTOP_LOGO_512X512;
 					DesktopEnvironmentManager.environment.PLATFORM_LOGO =
 						env.PLATFORM_LOGO;
 					console.log('✔ default icons generated successfully!');

diff --git a/.scripts/icon-utils/concrete-generators/desktop-icon-generator.ts b/.scripts/icon-utils/concrete-generators/desktop-icon-generator.ts
@@ -13,7 +13,7 @@ export class DesktopIconGenerator
 	implements IDesktopIconGenerator {
 	constructor() {
 		super();
-		this.imageUrl = env.DESKTOP_SERVER_WEB_APP_DESKTOP_APP_LOGO_512X512;
+		this.imageUrl = env.GAUZY_DESKTOP_LOGO_512X512;
 		this.destination = path.join('apps', this.desktop, 'assets');
 	}
 	generateMenuIcon(originalImage: Jimp): Promise<void> {
@@ -38,7 +38,7 @@ export class DesktopIconGenerator
 					);
 					reject(error);
 				} else {
-					DesktopEnvironmentManager.environment.DESKTOP_SERVER_WEB_APP_DESKTOP_APP_LOGO_512X512 =
+					DesktopEnvironmentManager.environment.GAUZY_DESKTOP_LOGO_512X512 =
 						'./assets/icons/desktop_logo_512x512.png';
 					console.log(
 						'✔ desktop logo 512x512 icons generated successfully.'

diff --git a/apps/server-web/src/locales/i18n/bg/translation.json b/apps/server-web/src/locales/i18n/bg/translation.json
@@ -32,7 +32,8 @@
       "CANCEL": "Отказ",
       "CLOSE": "Близо",
       "START": "Започнете",
-      "STOP": "Спри се"
+      "STOP": "Спри се",
+      "LETS_GO": "Да започваме"
     },
     "LABELS": {
       "CHECKING": "Проверка",
@@ -64,7 +65,9 @@
     "UPDATE_AVAILABLE": "Налична е нова актуализация! Моля, щракнете върху бутона Изтегляне сега по-долу.",
     "EXIT_MESSAGE": "Мрежата на сървъра все още работи, сигурни ли сте, че ще излезете от приложението?",
     "UPDATE_SUCCESS": "Актуализирайте успешно",
-    "SERVER_RUN_DIALOG": "Сървърната мрежа работи в момента, искате ли да рестартирате сървъра?"
+    "SERVER_RUN_DIALOG": "Сървърната мрежа работи в момента, искате ли да рестартирате сървъра?",
+    "CONNECTION_SUCCESS": "Успешно свързване със сървъра",
+    "CONNECTION_ERROR": "Неуспешно свързване със сървъра"
   },
   "LANGUAGES": {
     "en": "Английски",

diff --git a/apps/server-web/src/locales/i18n/en/translation.json b/apps/server-web/src/locales/i18n/en/translation.json
@@ -32,7 +32,8 @@
       "CANCEL": "Cancel",
       "CLOSE": "Close",
       "START": "Start",
-      "STOP": "Stop"
+      "STOP": "Stop",
+      "LETS_GO": "Let's Go"
     },
     "LABELS": {
       "CHECKING": "Checking",
@@ -64,7 +65,9 @@
     "UPDATE_AVAILABLE": "New Update is available! Please click button Download Now below.",
     "EXIT_MESSAGE": "Server web still running, Are you sure to exit the app ?",
     "UPDATE_SUCCESS": "Update Successfully",
-    "SERVER_RUN_DIALOG": "Server web currently running, You want to restart the server ?"
+    "SERVER_RUN_DIALOG": "The web server is currently running. Do you want to restart the server?",
+    "CONNECTION_SUCCESS": "Server API success to connect",
+    "CONNECTION_ERROR": "Server API failed to connect"
   },
   "LANGUAGES": {
     "en": "English",

diff --git a/apps/server-web/src/main/helpers/interfaces/i-server.ts b/apps/server-web/src/main/helpers/interfaces/i-server.ts
@@ -11,6 +11,7 @@ interface ServerConfig {
     PORT: number;
     NEXT_PUBLIC_GAUZY_API_SERVER_URL: string;
     GAUZY_API_SERVER_URL: string;
+    DESKTOP_WEB_SERVER_HOSTNAME: string;
     [key: string]: any;
 }
 export interface WebServer {

diff --git a/apps/server-web/src/main/helpers/services/libs/desktop-store.ts b/apps/server-web/src/main/helpers/services/libs/desktop-store.ts
@@ -7,14 +7,14 @@ export const LocalStore = {
 	},
 
 	updateConfigSetting: (values: WebServer) => {
-		let config: WebServer | any = store.get('config');
+		let config: WebServer | any = store.get('config') || {};
 		Object.keys(values).forEach((key: string) => {
 			if (key === 'server') {
-				config[key] = { ...config[key], ...values.server }
+				config[key] = { ...(config[key] || {}), ...values.server }
 			}
 
 			if (key === 'general') {
-				config[key] = { ...config[key], ...values.general }
+				config[key] = { ...(config[key] || {}), ...values.general }
 			}
 		})
 		store.set({
@@ -30,7 +30,8 @@ export const LocalStore = {
 				server: {
 					PORT: 3002,
 					GAUZY_API_SERVER_URL: 'http://localhost:3000',
-					NEXT_PUBLIC_GAUZY_API_SERVER_URL: 'http://localhost:3000'
+					NEXT_PUBLIC_GAUZY_API_SERVER_URL: 'http://localhost:3000',
+					DESKTOP_WEB_SERVER_HOSTNAME: '0.0.0.0'
 				},
 				general: {
 					lang: 'en',

diff --git a/apps/server-web/src/main/main.ts b/apps/server-web/src/main/main.ts
@@ -251,7 +251,7 @@ const restartServer = async () => {
 
 const getEnvApi = () => {
   const setting: WebServer = LocalStore.getStore('config')
-  return setting.server;
+  return setting?.server;
 };
 
 const SendMessageToSettingWindow = (type: string, data: any) => {
@@ -467,10 +467,10 @@ ipcMain.on(IPC_TYPES.SETTING_PAGE, async (event, arg) => {
         diFilesPath,
         {
           before: {
-            NEXT_PUBLIC_GAUZY_API_SERVER_URL: existingConfig?.NEXT_PUBLIC_GAUZY_API_SERVER_URL
+            NEXT_PUBLIC_GAUZY_API_SERVER_URL: existingConfig?.NEXT_PUBLIC_GAUZY_API_SERVER_URL || config.NEXT_PUBLIC_GAUZY_API_SERVER_URL
           },
           after: {
-            NEXT_PUBLIC_GAUZY_API_SERVER_URL: arg.data.NEXT_PUBLIC_GAUZY_API_SERVER_URL
+            NEXT_PUBLIC_GAUZY_API_SERVER_URL: arg.data.NEXT_PUBLIC_GAUZY_API_SERVER_URL || config.NEXT_PUBLIC_GAUZY_API_SERVER_URL
           }
         }
       )
@@ -552,7 +552,7 @@ ipcMain.on(IPC_TYPES.SERVER_PAGE, (_, arg) => {
 
 ipcMain.handle('current-theme', async () => {
   const setting: WebServer = LocalStore.getStore('config');
-  return setting.general?.theme;;
+  return setting?.general?.theme;;
 })
 
 const createIntervalAutoUpdate = () => {

diff --git a/apps/server-web/src/renderer/components/Toast.tsx b/apps/server-web/src/renderer/components/Toast.tsx
@@ -9,6 +9,7 @@ export const ToastComponent = ({
   autoClose,
   timeout,
   onClose,
+  type = 'success',
 }: IToastComponent) => {
   const timerRef = React.useRef(0);
   const { t } = useTranslation();
@@ -19,18 +20,15 @@ export const ToastComponent = ({
         onClose();
       }, timeout);
     }
-  }, []);
+  }, [show]);
 
   return (
-    <Toast.Provider swipeDirection="up">
+    <Toast.Provider swipeDirection="down">
       <Toast.Root
-        className="bg-gray dark:bg-[#25272D] dark:text-white rounded-lg shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] p-[15px] grid [grid-template-areas:_'title_action'_'description_action'] grid-cols-[auto_max-content] gap-x-[15px] items-center data-[state=open]:animate-slideIn data-[state=closed]:animate-hide data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform_200ms_ease-out] data-[swipe=end]:animate-swipeOut"
+        className={`${type === 'success' ? 'bg-green-700' : 'bg-red-700'} rounded-lg shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] p-[15px] grid [grid-template-areas:_'title_action'_'description_action'] grid-cols-[auto_max-content] gap-x-[15px] items-center data-[state=open]:animate-slideIn data-[state=closed]:animate-hide data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform_200ms_ease-out] data-[swipe=end]:animate-swipeOut absolute top-0 right-0`}
         open={show}
-        duration={timeout}
+        duration={1000}
       >
-        <Toast.Title className="[grid-area:_title] mb-[5px] font-medium text-slate12 text-[15px] text-bold">
-          {t(title)}
-        </Toast.Title>
         <Toast.Description asChild>
           <span className="text-base fs-4">{t(message)}</span>
         </Toast.Description>
@@ -47,7 +45,7 @@ export const ToastComponent = ({
           </button>
         </Toast.Action>
       </Toast.Root>
-      <Toast.Viewport className="[--viewport-padding:_25px] fixed bottom-0 right-0 flex flex-col p-[var(--viewport-padding)] gap-[10px] w-[390px] max-w-[100vw] m-0 list-none z-[2147483647] outline-none" />
+      <Toast.Viewport className="[--viewport-padding:_25px] fixed bottom-0 right-0 flex flex-col p-[var(--viewport-padding)] gap-[10px] w-[390px] max-w-[100vw] m-0 list-none z-[2147483647] outline-none absolute top-1 right-1" />
     </Toast.Provider>
   );
 };
diff --git a/apps/server-web/src/renderer/libs/interfaces/i-components.ts b/apps/server-web/src/renderer/libs/interfaces/i-components.ts
@@ -6,6 +6,7 @@ type IToastComponent = {
   show: boolean;
   autoClose: boolean;
   timeout: number;
+  type?: 'error' | 'success';
   onClose: () => void;
 };
 

diff --git a/apps/server-web/src/renderer/libs/interfaces/i-setting.ts b/apps/server-web/src/renderer/libs/interfaces/i-setting.ts
@@ -29,6 +29,7 @@ interface IServerSetting {
   PORT: number;
   GAUZY_API_SERVER_URL: string;
   NEXT_PUBLIC_GAUZY_API_SERVER_URL: string;
+  DESKTOP_WEB_SERVER_HOSTNAME?: string;
 }
 
 interface IPopup {

diff --git a/apps/server-web/src/renderer/libs/utils/api.ts b/apps/server-web/src/renderer/libs/utils/api.ts
@@ -0,0 +1,13 @@
+import axios from 'axios';
+
+const instance = axios.create({
+    timeout: 5000,
+});
+
+export const get = async (baseURL: string, path: string, params?:any, timeout?: number) => {
+    instance.defaults.baseURL = baseURL;
+    if (timeout) {
+        instance.defaults.timeout = timeout;
+    }
+    return instance.get(path, params);
+}
diff --git a/apps/server-web/src/renderer/pages/Server.tsx b/apps/server-web/src/renderer/pages/Server.tsx
@@ -49,11 +49,14 @@ export function ServerPage() {
         </div>
       </div>
       <button
-        className="block rounded-lg border-4 border-transparent bg-violet-800 px-6 py-2 text-center text-base font-medium text-100 w-fit mx-auto my-5 text-gray-200"
+        className="flex block rounded-lg border-4 border-transparent items-center bg-violet-800 px-6 py-2 text-center text-base font-medium text-100 w-fit mx-auto my-5 text-gray-200"
         onClick={runServer}
         disabled={loading}
       >
-        {isRun ? t('FORM.BUTTON.STOP') : t('FORM.BUTTON.START')}
+        {loading && (
+          <div className="w-4 h-4 border-4 border-blue-500 border-dotted rounded-full animate-spin m-auto"></div>
+        )}
+        <span>{isRun ? t('FORM.BUTTON.STOP') : t('FORM.BUTTON.START')}</span>
       </button>
       <div className="grid divide-y divide-neutral-200 dark:bg-[#25272D] dark:text-white mx-auto w-10/12 rounded-lg border-2 border-gray-200 dark:border-gray-600">
         <div className="py-5 px-5">