Skip to content

feat: Added Hot reloading in CLI #632

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from
Draft

feat: Added Hot reloading in CLI #632

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3de94e9
Implemented hot reload in CLI
harshit078 Mar 7, 2025
13b70ba
Updated dev scripts
harshit078 Mar 7, 2025
781a6c9
Updated package.json
harshit078 Mar 9, 2025
2690a29
Removed hot-reload logic from the codebase
harshit078 Mar 11, 2025
249936d
Improved Rebuild container logic and added app restart logic for dock…
harshit078 Mar 11, 2025
77a5a6f
Added container rebuild logic,app restart logic and integrated it wit…
harshit078 Mar 11, 2025
5f59f76
Added App_Restart and container status in pre-checka dn app states logic
harshit078 Mar 11, 2025
7a42b08
Updated and added containerstatus and container rebuild logic
harshit078 Mar 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion cli/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
"scripts": {
"build": "tsc",
"dev": "tsc --watch",
"dev:hot": "nodemon --watch source --ext ts,tsx --exec \"tsc --incremental --tsBuildInfoFile ./.cache/tsbuildinfo --project tsconfig.dev.json && node dist/cli.js\"",
"dev:fast": "ts-node-dev --respawn --transpile-only --ignore-watch node_modules --cache-directory .cache --prefer-ts-exts --project tsconfig.dev.json source/cli.ts",
"dev:watch": "concurrently \"tsc --incremental --tsBuildInfoFile ./.cache/tsbuildinfo --watch --preserveWatchOutput --project tsconfig.dev.json\" \"nodemon --watch dist --delay 1 -r source-map-support/register dist/cli.js\"",
Comment on lines +13 to +15
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The current approach doesn't implement true "hot reloading" - it's just rebuilding the entire project and restarting it when changes are detected. This means repeatedly stopping and starting containers, which doesn't solve our slow development process problem.

Genuine hot reloading would refresh only the changed files without losing application state. It might be worth exploring the hot reloading APIs provided by Vite or Webpack to see if we can implement something that works for our case.

If true hot reloading proves too complex for our CLI tool, we could simplify by finding a way to avoid container restarts during development. Even if we still need to rebuild and restart the application itself, eliminating the Docker restart overhead would significantly improve the development experience.

"test": "yarn link-fix && ava",
"lint": "eslint source/**/*.{js,ts,tsx}",
"lint-fix": "eslint --fix --ignore-pattern 'node_modules/*' 'source/**/*.{js,ts,tsx}'",
Expand All @@ -31,6 +34,7 @@
"react-redux": "^9.1.1"
},
"devDependencies": {
"@swc/core": "^1.3.100",
"@types/dockerode": "^3.3.28",
"@types/dockerode-compose": "^1.4.1",
"@types/ink-testing-library": "^1.0.4",
Expand All @@ -40,16 +44,20 @@
"@typescript-eslint/parser": "^6.10.0",
"ava": "^5.2.0",
"chalk": "^5.2.0",
"concurrently": "^8.2.2",
"eslint": "^8.40.0",
"eslint-plugin-import": "^2.29.0",
"eslint-plugin-prettier": "^5.0.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-unused-imports": "^3.1.0",
"ink-testing-library": "^3.0.0",
"nodemon": "^3.1.0",
"prettier": "^3.0.3",
"swc": "^1.0.11",
"ts-node": "^10.9.1",
"typescript": "5.3.3"
"ts-node-dev": "^2.0.0",
"typescript": "^5.3.3"
},
"ava": {
"extensions": {
Expand Down
107 changes: 105 additions & 2 deletions cli/source/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ const CliUi = () => {
if (appState === AppStates.PREREQ_CHECK) {
exit();
}
preCheck.resetContainerCache();
await dispatch(appSlice.actions.setAppState(AppStates.TEARDOWN));
setTimeout(() => {
if (!processRef.current) return;
Expand Down Expand Up @@ -261,6 +262,7 @@ const CliUi = () => {
watch_logs.includes(rdyMsg)
)
) {
await preCheck.checkContainerStatus();
await dispatch(
appSlice.actions.addLog({
type: 'default',
Expand Down Expand Up @@ -306,13 +308,26 @@ const CliUi = () => {
return () => {
globalThis.process.off('exit', handleExit);
};
}, [dispatch, exit, handleExit, runCommandOpts, retryToggle, appState]);
}, [
dispatch,
exit,
handleExit,
runCommandOpts,
retryToggle,
appState,
preCheck
]);

useEffect(() => {
preCheck.callDaemonCheck();
preCheck.callPortsCheck();
preCheck.callFilesCheck();
}, []);
}, [
preCheck.callDaemonCheck,
preCheck.callPortsCheck,
preCheck.callFilesCheck,
preCheck
]);

const logsStreamNodes = useMemo(
() => logsStream.map((l) => transformLogToNode(l)),
Expand Down Expand Up @@ -356,6 +371,73 @@ const CliUi = () => {
[preCheck]
);

useEffect(() => {
if (
appState === AppStates.INIT &&
preCheck.daemon === PreCheckStates.SUCCESS &&
preCheck.ports === PreCheckStates.SUCCESS &&
preCheck.dockerFile === PreCheckStates.SUCCESS &&
preCheck.composeFile === PreCheckStates.SUCCESS
) {
if (preCheck.containerStatus === PreCheckStates.SUCCESS) {
if (preCheck.appOnlyRestart) {
dispatch(appSlice.actions.setAppState(AppStates.APP_RESTART));
} else {
dispatch(appSlice.actions.setAppState(AppStates.DOCKER_READY));
}
} else {
const checkRebuild = async () => {
const needsRebuild = await preCheck.checkRebuildNeeded();
if (needsRebuild) {
console.log('Containers need rebuilding');
}
};
checkRebuild();
}
}
}, [appState, preCheck, dispatch]);

useEffect(() => {
return () => {
preCheck.resetContainerCache();
};
}, [preCheck]);

useEffect(() => {
if (appState === AppStates.APP_RESTART) {
const restartApp = async () => {
try {
await runCommand(
'docker',
['exec', '-it', 'middleware-dev', '/app/scripts/restart-app.sh'],
runCommandOpts
).promise;

dispatch(
appSlice.actions.addLog({
type: 'default',
line: '🚀 Application restarted 🚀',
time: new Date()
})
);

dispatch(appSlice.actions.setAppState(AppStates.DOCKER_READY));
} catch (err) {
dispatch(
appSlice.actions.addLog({
type: 'error',
line: `Application restart failed: ${err}`,
time: new Date()
})
);
dispatch(appSlice.actions.setAppState(AppStates.INIT));
}
};

restartApp();
}
}, [appState, dispatch]);

return (
<>
<Static items={logsStreamNodes} style={{ flexDirection: 'column' }}>
Expand Down Expand Up @@ -427,6 +509,13 @@ const CliUi = () => {
'Dockerfile.dev not found in the root directory. Please ensure that the file exists with the given name.'
}
/>
<PreCheckDisplayElement
value={preCheck.containerStatus}
property={PreCheckProperties.CONTAINER_STATUS}
errHelp={
'Container is not running. It will be started during initialization.'
}
/>
</Box>
);
case AppStates.INIT:
Expand Down Expand Up @@ -583,6 +672,20 @@ const CliUi = () => {
{terminatedText}
</Text>
);
case AppStates.APP_RESTART:
return (
<Box flexDirection="column">
<Text color="blue">
Status: Restarting application only... [Press X to abort]{' '}
<Text bold color="yellow">
<Spinner type="material" />
</Text>
</Text>
<Text dimColor>
Optimized restart - avoiding full container rebuild.
</Text>
</Box>
);
default:
return (
<Text color="red">
Expand Down
4 changes: 3 additions & 1 deletion cli/source/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export enum AppStates {
PREREQ_CHECK = 'PREREQ_CHECK',
INIT = 'INIT',
DOCKER_READY = 'DOCKER_READY',
APP_RESTART = 'APP_RESTART',
TEARDOWN = 'TEARDOWN',
TERMINATED = 'TERMINATED'
}
Expand All @@ -30,7 +31,8 @@ export enum PreCheckProperties {
DAEMON = 'daemon',
PORTS = 'ports',
COMPOSE_FILE = 'compose file',
DOCKER_FILE = 'docker file'
DOCKER_FILE = 'docker file',
CONTAINER_STATUS = 'container status'
}

export enum LogSource {
Expand Down
61 changes: 58 additions & 3 deletions cli/source/hooks/usePreCheck.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,28 @@ import { useCallback, useState } from 'react';
import fs from 'fs';

import { PreCheckStates } from '../constants.js';
import {
containerExistsAndRunning,
shouldRebuildContainers,
clearContainerCache,
shouldOnlyRestartApp
} from '../utils/docker-config.js';
import { runCommand } from '../utils/run-command.js';

export const usePreCheck = ({
db,
redis,
frontend,
sync_server,
analytics_server
analytics_server,
containerId = 'middleware-dev'
}: {
db: number;
redis: number;
frontend: number;
sync_server: number;
analytics_server: number;
containerId?: string;
}) => {
const [daemon, setDaemon] = useState<PreCheckStates>(PreCheckStates.RUNNING);
const [ports, setPorts] = useState<PreCheckStates>(PreCheckStates.RUNNING);
Expand All @@ -27,18 +35,59 @@ export const usePreCheck = ({
const [dockerFile, setDockerFile] = useState<PreCheckStates>(
PreCheckStates.RUNNING
);
const [containerStatus, setContainerStatus] = useState<PreCheckStates>(
PreCheckStates.RUNNING
);
const [appOnlyRestart, setAppOnlyRestart] = useState<boolean>(false);

const callDaemonCheck = useCallback(() => {
// For Docker daemon
runCommand('docker', ['info'])
.promise.then(() => {
setDaemon(PreCheckStates.SUCCESS);
checkContainerStatus();
})
.catch((err) => {
setDaemon(PreCheckStates.FAILED);
setContainerStatus(PreCheckStates.FAILED);
});
}, []);

const checkContainerStatus = useCallback(async () => {
try {
const isRunning = await containerExistsAndRunning(containerId);
if (isRunning) {
setContainerStatus(PreCheckStates.SUCCESS);
await checkOnlyRestartApp();
} else {
setContainerStatus(PreCheckStates.FAILED);
setAppOnlyRestart(false);
}
} catch (error) {
setContainerStatus(PreCheckStates.FAILED);
setAppOnlyRestart(false);
}
}, [checkOnlyRestartApp, containerId]);

const checkOnlyRestartApp = useCallback(async () => {
try {
const onlyRestartApp = await shouldOnlyRestartApp(containerId);
setAppOnlyRestart(onlyRestartApp);
return onlyRestartApp;
} catch (error) {
setAppOnlyRestart(false);
return false;
}
}, [containerId]);

const resetContainerCache = useCallback(() => {
clearContainerCache();
}, []);

const checkRebuildNeeded = useCallback(async () => {
return await shouldRebuildContainers(containerId);
}, [containerId]);

const callPortsCheck = useCallback(async () => {
// For ports
const ports_array = [db, redis, frontend, sync_server, analytics_server];
Expand All @@ -57,7 +106,7 @@ export const usePreCheck = ({
setPorts(PreCheckStates.SUCCESS);
}
}
}, []);
}, [db, redis, frontend, sync_server, analytics_server]);

const callFilesCheck = useCallback(() => {
// For files
Expand All @@ -81,8 +130,14 @@ export const usePreCheck = ({
ports,
composeFile,
dockerFile,
containerStatus,
appOnlyRestart,
callDaemonCheck,
callPortsCheck,
callFilesCheck
callFilesCheck,
checkContainerStatus,
checkOnlyRestartApp,
resetContainerCache,
checkRebuildNeeded
};
};
Loading