[Feat] distinguish dev and prod in server and client

snap-client/src/app.tsx

@@ -4,12 +4,13 @@ import { ControlBar, Editor, Frame, Panel } from "./components";
 import { useConfig, useEvent } from "./hooks";
 import { toPng, toBlob } from "html-to-image";
 import download from "downloadjs";
+import { getWebsocketHost } from "./utils";
 
 const CODE_EMPTY_PLACEHOLDER = `print "Hello, CodeSnap.nvim!"`;
 const WATER_MARK_PLACEHOLDER = "CodeSnap.nvim";
 
 function App() {
-  const [socketUrl] = useState(`ws://${window.location.host}/ws`);
+  const [socketUrl] = useState(`ws://${getWebsocketHost()}/ws`);
   const { sendMessage, lastMessage, readyState } = useWebSocket(socketUrl);
   const event = useEvent(lastMessage);
   const config = useConfig(event?.config_setup);

snap-client/src/utils/addr.ts

@@ -0,0 +1,4 @@
+export const getWebsocketHost = () =>
+  process.env.NODE_ENV === "development"
+    ? "localhost:8080"
+    : window.location.host;

snap-client/src/utils/index.ts

@@ -0,0 +1 @@
+export * from "./addr";

snap-server/src/port.rs

@@ -1,6 +1,14 @@
 use std::net::TcpListener;
 
 pub fn get_available_port() -> Option<u16> {
+    if cfg!(debug_assertions) {
+        Some(8080)
+    } else {
+        find_available_port()
+    }
+}
+
+fn find_available_port() -> Option<u16> {
     (8000..10000).find(|port| port_is_available(*port))
 }