Enable Hot-reload for CLI (#659)

* add vite-node for hot reload

add precheck script to check all the ports are running are not

* skip the service start when service is already started

* introduce a cli-dev mode in dev

* refactor: streamline port conflict checking in precheck

Author: thesujai

cli/package.json

@@ -9,7 +9,8 @@
   "type": "module",
   "scripts": {
     "build": "tsc",
-    "dev": "tsc --watch",
+    "predev": "[ -e ../.env ] && set -a && . ../.env; vite-node source/precheck.ts",
+    "dev": "vite-node --watch source/cli.tsx",
     "test": "yarn link-fix && ava",
     "lint": "eslint source/**/*.{js,ts,tsx}",
     "lint-fix": "eslint --fix --ignore-pattern 'node_modules/*' 'source/**/*.{js,ts,tsx}'",
@@ -49,7 +50,8 @@
     "ink-testing-library": "^3.0.0",
     "prettier": "^3.0.3",
     "ts-node": "^10.9.1",
-    "typescript": "5.3.3"
+    "typescript": "5.3.3",
+    "vite-node": "^3.1.3"
   },
   "ava": {
     "extensions": {
@@ -59,5 +61,6 @@
     "nodeArguments": [
       "--loader=ts-node/esm"
     ]
-  }
+  },
+  "packageManager": "[email protected]"
 }

cli/source/app.tsx

@@ -55,6 +55,7 @@ const CliUi = () => {
   const db_pass = process.env['DB_PASS'];
   const redis_port = process.env['REDIS_PORT'];
   const redis_host = process.env['REDIS_HOST'];
+  const services_started = process.env['SERVICES_STARTED'];
 
   const preCheck = usePreCheck({
     db: Number(db_port),
@@ -106,21 +107,22 @@ const CliUi = () => {
       exit();
     }
     await dispatch(appSlice.actions.setAppState(AppStates.TEARDOWN));
-    setTimeout(() => {
-      if (!processRef.current) return;
-
+    if (processRef.current) {
       processRef.current.kill();
       processRef.current.stdout.destroy();
       processRef.current.stderr.destroy();
+      await new Promise((r) => setTimeout(r, 50));
+    }
+    // dont depend on processRef.current here, as it might be null
+    // so always do a docker compose down irrespective of processRef.current
+    try {
+      await runCommand('docker', ['compose', 'down'], runCommandOpts).promise;
+    } catch {
+      await runCommand('docker-compose', ['down'], runCommandOpts).promise;
+    }
 
-      runCommand('docker', ['compose', 'down'], runCommandOpts)
-        .promise.catch(async (err: any) => {
-          await runCommand('docker-compose', ['down']).promise;
-        })
-        .finally(async () => {
-          await dispatch(appSlice.actions.setAppState(AppStates.TERMINATED));
-        });
-    }, 200);
+    await dispatch(appSlice.actions.setAppState(AppStates.TERMINATED));
+    exit();
   }, [appState, dispatch, runCommandOpts]);
 
   const handleVersionUpdates = useCallback(async () => {
@@ -169,11 +171,32 @@ const CliUi = () => {
   useEffect(() => {
     if (Object.values(preCheck).includes(PreCheckStates.RUNNING)) {
       return;
-    } else {
-      if (Object.values(preCheck).includes(PreCheckStates.FAILED)) {
-        handleExit();
-        return;
-      }
+    }
+    /*
+    just a reminder that we make the ports check for optimizing hot reloading
+    so a FAILED port check shall imply that some ports are already in use
+    if the ports are already in use, we will not start the services
+    FAILING the ports check will not stop the app from starting, because the assumption is that
+    the user has already started the services and they are running
+    */
+
+    if (
+      preCheck.ports === PreCheckStates.FAILED &&
+      services_started === 'true'
+    ) {
+      dispatch(appSlice.actions.setAppState(AppStates.DOCKER_READY));
+      dispatch(appSlice.actions.updateReadyServices(LogSource.WebServer));
+      dispatch(appSlice.actions.updateReadyServices(LogSource.ApiServer));
+      dispatch(appSlice.actions.updateReadyServices(LogSource.SyncServer));
+      dispatch(appSlice.actions.updateReadyServices(LogSource.Postgres));
+      dispatch(appSlice.actions.updateReadyServices(LogSource.InitDb));
+      dispatch(appSlice.actions.updateReadyServices(LogSource.Redis));
+      return;
+    }
+
+    if (Object.values(preCheck).includes(PreCheckStates.FAILED)) {
+      handleExit();
+      return;
     }
 
     dispatch(appSlice.actions.setAppState(AppStates.INIT));
@@ -197,6 +220,8 @@ const CliUi = () => {
             })
           );
         });
+        // set the env variable APP_STARTED to true
+        globalThis.process.env['SERVICES_STARTED'] = 'true';
       })
       .catch(async (err: any) => {
         await runCommand('docker-compose', ['down']).promise;
@@ -406,13 +431,6 @@ const CliUi = () => {
                         'Docker daemon is not running, please ensure it is running. To check if your docker daemon is running, use the command: \ndocker info'
                       }
                     />
-                    <PreCheckDisplayElement
-                      value={preCheck.ports}
-                      property={PreCheckProperties.PORTS}
-                      errHelp={
-                        'One of the ports is not free. Please ensure that all the specified ports in dockerfile.dev are free.'
-                      }
-                    />
                     <PreCheckDisplayElement
                       value={preCheck.composeFile}
                       property={PreCheckProperties.COMPOSE_FILE}

cli/source/precheck.ts

@@ -0,0 +1,43 @@
+import { isFreePort } from 'find-free-ports';
+
+async function run(): Promise<void> {
+  const { DB_PORT, REDIS_PORT, PORT, SYNC_SERVER_PORT, ANALYTICS_SERVER_PORT } =
+    process.env;
+
+  const rawPorts = [
+    DB_PORT,
+    REDIS_PORT,
+    PORT,
+    SYNC_SERVER_PORT,
+    ANALYTICS_SERVER_PORT
+  ];
+  const ports: number[] = rawPorts.map((p, i) => {
+    const num = Number(p);
+    if (typeof p !== 'string' || Number.isNaN(num)) {
+      console.error(`❌  Invalid or missing port value at index ${i}:`, p);
+      process.exit(1);
+    }
+    return num;
+  });
+
+  try {
+    const results = await Promise.allSettled(ports.map(isFreePort));
+    results.forEach((result, i) => {
+      const port = ports[i];
+      if (result.status === 'rejected') {
+        console.error(`❌  Failed to check port ${port}:`, result.reason);
+        process.exit(1);
+      } else if (!result.value) {
+        console.error(`❌  Port ${port} is already in use.`);
+        process.exit(1);
+      }
+    });
+
+    console.log('✅  All ports are free; starting app...');
+  } catch (err) {
+    console.error('❌  Error checking ports:', err);
+    process.exit(1);
+  }
+}
+
+run();