diff --git a/.env b/.env
index fc9f6d6b..2748d4fb 100644
--- a/.env
+++ b/.env
@@ -44,5 +44,11 @@ VITE_STATIC_SUPER_ROLE=R_SUPER
 # sourcemap
 VITE_SOURCE_MAP=N
 
-# Used to differentiate storage across different domains
+# used to differentiate storage across different domains
 VITE_STORAGE_PREFIX=SOY_
+
+# the port number on which the server is running
+VITE_SERVER_PORT=9527
+
+# the port number used for previewing the application
+VITE_PREVIEW_PORT=9725
diff --git a/src/typings/env.d.ts b/src/typings/env.d.ts
index 8000a7e0..e926cc2e 100644
--- a/src/typings/env.d.ts
+++ b/src/typings/env.d.ts
@@ -103,6 +103,10 @@ declare namespace Env {
     readonly VITE_ICONIFY_URL?: string;
     /** Used to differentiate storage across different domains */
     readonly VITE_STORAGE_PREFIX?: string;
+    /** The port number on which the server is running */
+    readonly VITE_SERVER_PORT?: number;
+    /** The port number used for previewing the application */
+    readonly VITE_PREVIEW_PORT?: number;
   }
 }
 
diff --git a/vite.config.ts b/vite.config.ts
index dfc20a9b..bf27f435 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -32,7 +32,7 @@ export default defineConfig(configEnv => {
     },
     server: {
       host: '0.0.0.0',
-      port: 9527,
+      port: viteEnv.VITE_SERVER_PORT || 9527,
       open: true,
       proxy: createViteProxy(viteEnv, enableProxy),
       fs: {
@@ -40,7 +40,7 @@ export default defineConfig(configEnv => {
       }
     },
     preview: {
-      port: 9725
+      port: viteEnv.VITE_PREVIEW_PORT || 9725
     },
     build: {
       reportCompressedSize: false,