Restore requirements page with Node.js version check >= v18.17.0

apps/studio/electron/main/events/index.ts

@@ -2,6 +2,7 @@ import { MainChannels } from '@onlook/models/constants';
 import { WindowCommand } from '@onlook/models/projects';
 import { BrowserWindow, ipcMain, shell } from 'electron';
 import { mainWindow } from '..';
+import { checkSystemRequirements } from '../requirements';
 import { imageStorage } from '../storage/images';
 import { updater } from '../update';
 import { listenForAnalyticsMessages } from './analytics';
@@ -42,6 +43,10 @@ function listenForGeneralMessages() {
         return mainWindow?.reload();
     });
 
+    ipcMain.handle(MainChannels.CHECK_REQUIREMENTS, () => {
+        return checkSystemRequirements();
+    });
+
     ipcMain.handle(
         MainChannels.OPEN_IN_EXPLORER,
         (e: Electron.IpcMainInvokeEvent, args: string) => {

apps/studio/electron/main/requirements/index.ts

@@ -0,0 +1,71 @@
+import type { RequirementsResponse } from '@onlook/models/requirements';
+import { execSync } from 'child_process';
+
+export function checkSystemRequirements(): RequirementsResponse {
+    return {
+        git: checkGitInstallation(),
+        node: checkNodeVersion(),
+    };
+}
+
+// Note: Test by passing empty PATH
+// execSync('git --version', { stdio: 'ignore', env: { ...process.env, PATH: '' }});
+
+function checkGitInstallation(): boolean {
+    try {
+        execSync('git --version', { stdio: 'ignore' });
+        return true;
+    } catch (error) {
+        console.error('Git check failed:', error);
+        return false;
+    }
+}
+
+function checkNodeVersion(): boolean {
+    try {
+        const versionManagerPaths = [
+            `${process.env.HOME}/.nvm/versions/node`, // Nvm
+            `${process.env.HOME}/.fnm/node-versions`, // Fnm
+            `${process.env.N_PREFIX}/bin`, // N
+            '/usr/local/n/versions/node', // N
+            `${process.env.VOLTA_HOME}/bin`, // Volta
+            `${process.env.HOME}/.volta/bin`, // Volta
+            `${process.env.HOME}/.asdf/installs/nodejs`, // ASDF
+        ].filter(Boolean);
+
+        const existingPath = process.env.PATH || '';
+        const pathSeparator = process.platform === 'win32' ? ';' : ':';
+        const enhancedPath = [...versionManagerPaths, existingPath].join(pathSeparator);
+
+        // Check if node is installed and get its version
+        const nodeVersionOutput = execSync('node --version', {
+            stdio: ['pipe', 'pipe', 'pipe'],
+            env: { ...process.env, PATH: enhancedPath },
+        })
+            .toString()
+            .trim();
+
+        // Parse version string (e.g., "v18.17.0" -> [18, 17, 0])
+        const versionMatch = nodeVersionOutput.match(/v(\d+)\.(\d+)\.(\d+)/);
+        if (!versionMatch) {
+            console.error('Failed to parse Node.js version:', nodeVersionOutput);
+            return false;
+        }
+
+        const [, majorStr, minorStr, patchStr] = versionMatch;
+        const major = parseInt(majorStr, 10);
+        const minor = parseInt(minorStr, 10);
+        const patch = parseInt(patchStr, 10);
+
+        // Check if version is >= 18.17.0
+        if (major > 18 || (major === 18 && minor >= 17)) {
+            return true;
+        }
+
+        console.error(`Node.js version ${nodeVersionOutput} is below the required v18.17.0`);
+        return false;
+    } catch (error) {
+        console.error('Node.js check failed:', error);
+        return false;
+    }
+}

apps/studio/src/components/Context/index.tsx

@@ -1,6 +1,7 @@
 import { AuthManager } from '@/lib/auth';
 import { EditorEngine } from '@/lib/editor/engine';
 import { ProjectsManager } from '@/lib/projects';
+import { RequirementsManager } from '@/lib/requirements';
 import { RouteManager } from '@/lib/routes';
 import { UpdateManager } from '@/lib/update';
 import { UserManager } from '@/lib/user';
@@ -10,6 +11,7 @@ const authManager = new AuthManager();
 const routeManager = new RouteManager();
 const projectsManager = new ProjectsManager();
 const updateManager = new UpdateManager();
+const requirementsManager = new RequirementsManager();
 const userManager = new UserManager();
 const editorEngine = new EditorEngine(projectsManager, userManager);
 
@@ -19,12 +21,14 @@ const AuthContext = createContext(authManager);
 const RouteContext = createContext(routeManager);
 const ProjectsContext = createContext(projectsManager);
 const UpdateContext = createContext(updateManager);
+const RequirementsContext = createContext(requirementsManager);
 const UserContext = createContext(userManager);
 const EditorEngineContext = createContext(editorEngine);
 
 export const useAuthManager = () => useContext(AuthContext);
 export const useRouteManager = () => useContext(RouteContext);
 export const useProjectsManager = () => useContext(ProjectsContext);
 export const useUpdateManager = () => useContext(UpdateContext);
+export const useRequirementsManager = () => useContext(RequirementsContext);
 export const useUserManager = () => useContext(UserContext);
 export const useEditorEngine = () => useContext(EditorEngineContext);

apps/studio/src/lib/requirements/index.ts

@@ -0,0 +1,48 @@
+import { MainChannels } from '@onlook/models/constants';
+import type { RequirementsResponse } from '@onlook/models/requirements';
+import { makeAutoObservable } from 'mobx';
+import { invokeMainChannel } from '../utils';
+
+export class RequirementsManager {
+    nodeEnabled: boolean | null = null;
+    gitEnabled: boolean | null = null;
+    interval: Timer | null = null;
+
+    constructor() {
+        makeAutoObservable(this);
+        this.listen();
+    }
+
+    get loaded() {
+        return this.nodeEnabled !== null && this.gitEnabled !== null;
+    }
+
+    get requirementsMet() {
+        return this.nodeEnabled && this.gitEnabled;
+    }
+
+    async listen() {
+        this.checkRequirements();
+        this.interval = setInterval(() => {
+            this.checkRequirements();
+        }, 3000);
+    }
+
+    async checkRequirements() {
+        if (this.requirementsMet && this.interval) {
+            clearInterval(this.interval);
+            return;
+        }
+        const requirements: RequirementsResponse | null = await invokeMainChannel(
+            MainChannels.CHECK_REQUIREMENTS,
+        );
+
+        if (!requirements) {
+            console.error('Failed to check requirements');
+            return;
+        }
+
+        this.nodeEnabled = requirements.node;
+        this.gitEnabled = requirements.git;
+    }
+}

apps/studio/src/lib/routes/index.ts

@@ -5,6 +5,7 @@ export enum Route {
     EDITOR = 'editor',
     SIGN_IN = 'signin',
     PROJECTS = 'projects',
+    REQUIREMENTS = 'requirements',
 }
 
 export class RouteManager {

apps/studio/src/routes/index.tsx

@@ -1,17 +1,26 @@
-import { useAuthManager, useProjectsManager, useRouteManager } from '@/components/Context';
+import {
+    useAuthManager,
+    useProjectsManager,
+    useRequirementsManager,
+    useRouteManager,
+} from '@/components/Context';
 import { Route } from '@/lib/routes';
 import { observer } from 'mobx-react-lite';
 import ProjectEditor from './editor';
 import Projects from './projects';
+import Requirements from './requirements';
 import SignIn from './signin';
 
 const Routes = observer(() => {
     const routeManager = useRouteManager();
     const authManager = useAuthManager();
+    const reqManager = useRequirementsManager();
     const projectsManager = useProjectsManager();
 
     if (!authManager.authenticated && authManager.isAuthEnabled) {
         routeManager.route = Route.SIGN_IN;
+    } else if (reqManager.loaded && !reqManager.requirementsMet) {
+        routeManager.route = Route.REQUIREMENTS;
     } else if (projectsManager.project) {
         routeManager.route = Route.EDITOR;
     } else {
@@ -25,6 +34,8 @@ const Routes = observer(() => {
             return <SignIn />;
         case Route.PROJECTS:
             return <Projects />;
+        case Route.REQUIREMENTS:
+            return <Requirements />;
         default:
             return <div>404: Unknown route</div>;
     }

apps/studio/src/routes/requirements/index.tsx

@@ -0,0 +1,135 @@
+import { useRequirementsManager, useRouteManager } from '@/components/Context';
+import { Dunes } from '@/components/ui/dunes';
+import { Route } from '@/lib/routes';
+import { invokeMainChannel } from '@/lib/utils';
+import { MainChannels } from '@onlook/models/constants';
+import { Button } from '@onlook/ui/button';
+import { Icons } from '@onlook/ui/icons';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@onlook/ui/tooltip';
+import { observer } from 'mobx-react-lite';
+
+const Requirements = observer(() => {
+    const reqManager = useRequirementsManager();
+    const routeManager = useRouteManager();
+
+    function openExternalLink(url: string) {
+        invokeMainChannel(MainChannels.OPEN_EXTERNAL_WINDOW, url);
+    }
+
+    function handleContinue() {
+        routeManager.route = Route.PROJECTS;
+    }
+
+    return (
+        <div className="flex h-[calc(100vh-2.5rem)]">
+            <div className="flex flex-col justify-between w-full h-full max-w-xl p-16 space-y-8 overflow-auto">
+                <div className="flex items-center space-x-2">
+                    <Icons.OnlookTextLogo viewBox="0 0 139 17" />
+                </div>
+
+                <div className="space-y-8">
+                    <div className="space-y-4">
+                        <h2 className="text-title2 leading-tight">
+                            {"Let's make sure you can use Onlook"}
+                        </h2>
+                        <p className="text-foreground-onlook text-regular">
+                            These are required so that you can use Onlook with sites and apps. These
+                            are very standard requirements for coding.
+                        </p>
+                    </div>
+                    <div className="space-y-6">
+                        <div className="flex justify-between items-center">
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <div className="flex items-center space-x-3">
+                                        <div className="p-2 bg-background-secondary rounded-lg">
+                                            <Icons.Cube className="w-5 h-5" />
+                                        </div>
+                                        <div>
+                                            <div className="flex flex-row gap-1 items-center">
+                                                <h3 className="text-regularPlus">
+                                                    Node.js Runtime
+                                                </h3>{' '}
+                                                <Icons.QuestionMarkCircled className=" text-foreground-secondary" />
+                                            </div>
+                                            <p className="text-small text-foreground-onlook">
+                                                Project execution environment (v18.17.0+)
+                                            </p>
+                                        </div>
+                                    </div>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                    <p className="">
+                                        {
+                                            'Node.js v18.17.0 or higher is required to run React projects and other JavaScript applications.'
+                                        }
+                                    </p>
+                                </TooltipContent>
+                            </Tooltip>
+
+                            <Button
+                                variant="outline"
+                                disabled={!!reqManager.nodeEnabled}
+                                onClick={() => openExternalLink('https://nodejs.org')}
+                                className="bg-background-onlook"
+                            >
+                                {reqManager.nodeEnabled ? 'Installed' : 'Install'}
+                            </Button>
+                        </div>
+
+                        <div className="flex justify-between items-center">
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <div className="flex items-center space-x-3">
+                                        <div className="p-2 bg-background-secondary rounded-lg">
+                                            <Icons.GitHubLogo className="w-5 h-5" />
+                                        </div>
+                                        <div>
+                                            <div className="flex flex-row gap-1 items-center">
+                                                <h3 className="text-regularPlus">Git</h3>{' '}
+                                                <Icons.QuestionMarkCircled className="text-foreground-secondary" />
+                                            </div>
+                                            <p className="text-small text-foreground-onlook">
+                                                Version control system
+                                            </p>
+                                        </div>
+                                    </div>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                    <p className="">
+                                        {'Git is used to setup and manage project versions.'}
+                                    </p>
+                                </TooltipContent>
+                            </Tooltip>
+
+                            <Button
+                                variant="outline"
+                                disabled={!!reqManager.gitEnabled}
+                                onClick={() => openExternalLink('https://git-scm.com')}
+                                className="bg-background-onlook"
+                            >
+                                {reqManager.gitEnabled ? 'Installed' : 'Install'}
+                            </Button>
+                        </div>
+                    </div>
+                    <div className="flex flex-row justify-end w-full">
+                        <Button
+                            variant="outline"
+                            disabled={!reqManager.requirementsMet}
+                            onClick={handleContinue}
+                        >
+                            Continue
+                        </Button>
+                    </div>
+                </div>
+
+                <div className="flex flex-row space-x-1 text-small text-gray-600">
+                    <p>{`Version ${window.env.APP_VERSION}`}</p>
+                </div>
+            </div>
+            <Dunes />
+        </div>
+    );
+});
+
+export default Requirements;

packages/models/src/constants/ipc.ts

@@ -37,6 +37,7 @@ export enum MainChannels {
     SAVE_IMAGE = 'save-image',
     GET_IMAGE = 'get-image',
     SEND_WINDOW_COMMAND = 'send-window-command',
+    CHECK_REQUIREMENTS = 'check-requirements',
     DELETE_FOLDER = 'delete-folder',
     IS_CHILD_TEXT_EDITABLE = 'is-child-text-editable',
     IS_PORT_AVAILABLE = 'is-port-available',

packages/models/src/requirements/index.ts

@@ -0,0 +1,4 @@
+export interface RequirementsResponse {
+    git: boolean;
+    node: boolean;
+}