@pulse-editor/cli 0.1.1-beta.0 → 0.1.1-beta.2

package/dist/app.js

@@ -7,9 +7,14 @@ import Help from './components/commands/help.js';
 import Chat from './components/commands/chat.js';
 import Logout from './components/commands/logout.js';
 import Create from './components/commands/create.js';
+import Dev from './components/commands/dev.js';
+import Build from './components/commands/build.js';
+import Preview from './components/commands/preview.js';
+import Start from './components/commands/start.js';
+import Clean from './components/commands/clean.js';
 export default function App({ cli }) {
     const [command, setCommand] = useState(undefined);
-    if (cli.flags.dev) {
+    if (cli.flags.stage) {
         process.env['NODE_TLS_REJECT_UNAUTHORIZED'] = '0';
     }
     else {
@@ -19,5 +24,5 @@ export default function App({ cli }) {
         const cmd = cli.input[0] ?? 'help';
         setCommand(cmd);
     }, [cli.input]);
-    return (_jsxs(_Fragment, { children: [cli.flags.dev && (_jsx(Text, { color: 'yellow', children: "\u26A0\uFE0F You are in development mode." })), command === 'help' ? (_jsx(Help, { cli: cli })) : command === 'chat' ? (_jsx(Chat, { cli: cli })) : command === 'login' ? (_jsx(Login, { cli: cli })) : command === 'logout' ? (_jsx(Logout, { cli: cli })) : command === 'publish' ? (_jsx(Publish, { cli: cli })) : command === 'create' ? (_jsx(Create, { cli: cli })) : (command !== undefined && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: 'redBright', children: ["Invalid command: ", command] }), _jsxs(Text, { children: ["Run ", _jsx(Text, { color: 'blueBright', children: "pulse help" }), " to see the list of available commands."] })] })))] }));
+    return (_jsxs(_Fragment, { children: [cli.flags.stage && (_jsx(Text, { color: 'yellow', children: "\u26A0\uFE0F You are in development mode." })), command === 'help' ? (_jsx(Help, { cli: cli })) : command === 'chat' ? (_jsx(Chat, { cli: cli })) : command === 'login' ? (_jsx(Login, { cli: cli })) : command === 'logout' ? (_jsx(Logout, { cli: cli })) : command === 'publish' ? (_jsx(Publish, { cli: cli })) : command === 'create' ? (_jsx(Create, { cli: cli })) : command === 'dev' ? (_jsx(Dev, { cli: cli })) : command === 'build' ? (_jsx(Build, { cli: cli })) : command === 'preview' ? (_jsx(Preview, { cli: cli })) : command === 'start' ? (_jsx(Start, { cli: cli })) : command === 'clean' ? (_jsx(Clean, { cli: cli })) : (command !== undefined && (_jsxs(_Fragment, { children: [_jsxs(Text, { color: 'redBright', children: ["Invalid command: ", command] }), _jsxs(Text, { children: ["Run ", _jsx(Text, { color: 'blueBright', children: "pulse help" }), " to see the list of available commands."] })] })))] }));
 }

package/dist/components/commands/build.d.ts

@@ -0,0 +1,5 @@
+import { Result } from 'meow';
+import { Flags } from '../../lib/cli-flags.js';
+export default function Build({ cli }: {
+    cli: Result<Flags>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/commands/build.js

@@ -0,0 +1,77 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { execa } from 'execa';
+import fs from 'fs';
+import { cleanDist } from '../../lib/execa-utils/clean.js';
+export default function Build({ cli }) {
+    useEffect(() => {
+        async function buildProd() {
+            const buildTarget = cli.flags.target;
+            console.log(`🚧 Building for target: ${buildTarget || 'both client and server'}`);
+            // Move node_modules/@pulse-editor/cli/dist/lib/server to node_modules/.pulse/server
+            if (buildTarget === 'server' || !buildTarget) {
+                if (fs.existsSync('node_modules/.pulse/server')) {
+                    // Remove existing directory
+                    if (process.platform === 'win32') {
+                        await execa('rmdir /S /Q node_modules\\.pulse\\server', {
+                            shell: true,
+                        });
+                    }
+                    else {
+                        await execa('rm -rf node_modules/.pulse/server', {
+                            shell: true,
+                        });
+                    }
+                }
+                if (process.platform === 'win32') {
+                    await execa('xcopy /E /I node_modules\\@pulse-editor\\cli\\dist\\lib\\server node_modules\\.pulse\\server', {
+                        shell: true,
+                    });
+                }
+                else {
+                    await execa('cp -r node_modules/@pulse-editor/cli/dist/lib/server/* node_modules/.pulse/server/', {
+                        shell: true,
+                    });
+                }
+            }
+            await cleanDist();
+            if (buildTarget === undefined) {
+                // Start building
+                await execa('npx webpack --mode production', {
+                    stdio: 'inherit',
+                    shell: true,
+                    env: {
+                        NODE_OPTIONS: '--import=tsx',
+                    },
+                });
+            }
+            else if (buildTarget === 'client') {
+                // Start building client only
+                await execa('npx webpack --mode production', {
+                    stdio: 'inherit',
+                    shell: true,
+                    env: {
+                        NODE_OPTIONS: '--import=tsx',
+                        BUILD_TARGET: 'client',
+                    },
+                });
+            }
+            else if (buildTarget === 'server') {
+                // Start building server only
+                await execa('npx webpack --mode production', {
+                    stdio: 'inherit',
+                    shell: true,
+                    env: {
+                        NODE_OPTIONS: '--import=tsx',
+                        BUILD_TARGET: 'server',
+                    },
+                });
+            }
+            else {
+                console.error(`❌ Unknown build target: ${buildTarget}`);
+            }
+        }
+        buildProd();
+    }, []);
+    return _jsx(_Fragment, {});
+}

package/dist/components/commands/clean.d.ts

@@ -0,0 +1,5 @@
+import { Result } from 'meow';
+import { Flags } from '../../lib/cli-flags.js';
+export default function Clean({ cli }: {
+    cli: Result<Flags>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/commands/clean.js

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { cleanDist } from '../../lib/execa-utils/clean.js';
+export default function Clean({ cli }) {
+    useEffect(() => {
+        // clean code
+        cleanDist();
+    }, []);
+    return _jsx(_Fragment, {});
+}

package/dist/components/commands/create.js

@@ -93,13 +93,17 @@ export default function Create({ cli }) {
             }
             // Modify the package.json file to update the name
             setCreateMessage(_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Initializing project..." })] }));
+            /* Setup pulse.config.ts */
+            const pulseConfigPath = path.join(process.cwd(), name, 'pulse.config.ts');
+            let pulseConfig = fs.readFileSync(pulseConfigPath, 'utf8');
+            // Modify visibility by matching the block that starts with 'visibility:',
+            // and replacing the entire line with the new visibility value.
+            pulseConfig = pulseConfig.replace(/visibility:\s*['"`](public|unlisted|private)['"`],?/, `visibility: '${visibility}',`);
+            fs.writeFileSync(pulseConfigPath, pulseConfig);
+            /* Setup packages.json */
             const packageJsonPath = path.join(process.cwd(), name, 'package.json');
             const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
             packageJson.name = name.replaceAll('-', '_');
-            // Modify the visibility
-            packageJson['pulse-editor-marketplace'] = {
-                visibility,
-            };
             // Write the modified package.json back to the file
             fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
             // Remove the .git directory

package/dist/components/commands/dev.d.ts

@@ -0,0 +1,5 @@
+import { Result } from 'meow';
+import { Flags } from '../../lib/cli-flags.js';
+export default function Dev({ cli }: {
+    cli: Result<Flags>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/commands/dev.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { useEffect } from 'react';
+import { execa } from 'execa';
+import fs from 'fs';
+import { getDepsBinPath } from '../../lib/execa-utils/deps.js';
+import { cleanDist } from '../../lib/execa-utils/clean.js';
+export default function Dev({ cli }) {
+    useEffect(() => {
+        async function startDevServer() {
+            // Move node_modules/@pulse-editor/cli/dist/lib/server to node_modules/.pulse/server
+            if (fs.existsSync('node_modules/.pulse/server')) {
+                // Remove existing directory
+                if (process.platform === 'win32') {
+                    await execa('rmdir /S /Q node_modules\\.pulse\\server', {
+                        shell: true,
+                    });
+                }
+                else {
+                    await execa('rm -rf node_modules/.pulse/server', {
+                        shell: true,
+                    });
+                }
+            }
+            if (process.platform === 'win32') {
+                await execa('xcopy /E /I node_modules\\@pulse-editor\\cli\\dist\\lib\\server node_modules\\.pulse\\server', {
+                    shell: true,
+                });
+            }
+            else {
+                await execa('cp -r node_modules/@pulse-editor/cli/dist/lib/server/* node_modules/.pulse/server/', {
+                    shell: true,
+                });
+            }
+            // Start dev server
+            await cleanDist();
+            await execa(`${getDepsBinPath('concurrently')} --prefix none "webpack --mode development --watch" "tsx watch --clear-screen=false node_modules/@pulse-editor/cli/dist/lib/server/express.js"`, {
+                stdio: 'inherit',
+                shell: true,
+                env: {
+                    NODE_OPTIONS: '--import=tsx',
+                    NODE_ENV: 'development',
+                },
+            });
+        }
+        startDevServer();
+    }, []);
+    return (_jsx(_Fragment, { children: _jsx(Text, { children: "Starting dev server..." }) }));
+}

package/dist/components/commands/login.js

@@ -30,7 +30,7 @@ export default function Login({ cli }) {
     const { exit } = useApp();
     // Check login method
     useEffect(() => {
-        const savedToken = getToken(cli.flags.dev);
+        const savedToken = getToken(cli.flags.stage);
         setIsShowLoginMethod(!savedToken && !cli.flags.token && !cli.flags.flow);
         if (savedToken) {
             setLoginMethod('token');
@@ -48,7 +48,7 @@ export default function Login({ cli }) {
     useEffect(() => {
         // Only check token validity when it is set
         if (loginMethod === 'token' && token.length > 0) {
-            checkToken(token, cli.flags.dev).then(isValid => {
+            checkToken(token, cli.flags.stage).then(isValid => {
                 setIsAuthenticated(isValid);
                 setIsCheckingAuth(false);
             });
@@ -68,13 +68,13 @@ export default function Login({ cli }) {
                                     return;
                                 }
                                 setToken(value);
-                            } })] })) : isCheckingAuth ? (_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Checking authentication..." })] })) : isAuthenticated ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: "\u2705 You are signed in successfully." }), !isTokenInEnv(cli.flags.dev) &&
-                            getToken(cli.flags.dev) !== token && (_jsxs(_Fragment, { children: [_jsx(Text, { children: "\uD83D\uDFE2 It is recommended to save your access token as an environment variable PE_ACCESS_TOKEN." }), _jsxs(Box, { children: [_jsxs(Text, { children: ["\u26A0\uFE0F (NOT recommended) Or, do you want to save access token to user home directory? (y/n)", ' '] }), _jsx(TextInput, { value: saveTokenInput, onChange: setSaveTokenInput, onSubmit: value => {
+                            } })] })) : isCheckingAuth ? (_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Checking authentication..." })] })) : isAuthenticated ? (_jsxs(_Fragment, { children: [_jsx(Text, { children: "\u2705 You are signed in successfully." }), !isTokenInEnv(cli.flags.stage) &&
+                            getToken(cli.flags.stage) !== token && (_jsxs(_Fragment, { children: [_jsx(Text, { children: "\uD83D\uDFE2 It is recommended to save your access token as an environment variable PE_ACCESS_TOKEN." }), _jsxs(Box, { children: [_jsxs(Text, { children: ["\u26A0\uFE0F (NOT recommended) Or, do you want to save access token to user home directory? (y/n)", ' '] }), _jsx(TextInput, { value: saveTokenInput, onChange: setSaveTokenInput, onSubmit: value => {
                                                 if (value.length === 0) {
                                                     return;
                                                 }
                                                 if (value === 'y') {
-                                                    saveToken(token, cli.flags.dev);
+                                                    saveToken(token, cli.flags.stage);
                                                     setIsTokenSaved(true);
                                                     setTimeout(() => {
                                                         exit();

package/dist/components/commands/logout.js

@@ -6,7 +6,7 @@ import Spinner from 'ink-spinner';
 export default function Logout({ cli }) {
     const [isLoggedOut, setIsLoggedOut] = useState(false);
     useEffect(() => {
-        saveToken(undefined, cli.flags.dev);
+        saveToken(undefined, cli.flags.stage);
         setIsLoggedOut(true);
     }, []);
     return (_jsx(_Fragment, { children: isLoggedOut ? (_jsx(Text, { children: "\uD83D\uDE80 Successfully logged out!" })) : (_jsxs(Box, { children: [_jsx(Spinner, { type: "dots" }), _jsx(Text, { children: " Logging out..." })] })) }));

package/dist/components/commands/preview copy.d.ts

@@ -0,0 +1,5 @@
+import { Result } from 'meow';
+import { Flags } from '../../lib/cli-flags.js';
+export default function Preview({ cli }: {
+    cli: Result<Flags>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/commands/preview copy.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { useEffect } from 'react';
+import { execa } from 'execa';
+export default function Preview({ cli }) {
+    useEffect(() => {
+        // Start dev server
+        execa('npm run preview', {
+            stdio: 'inherit',
+            shell: true,
+        });
+    }, []);
+    return (_jsx(_Fragment, { children: _jsx(Text, { children: "Starting preview server..." }) }));
+}

package/dist/components/commands/preview.d.ts

@@ -0,0 +1,5 @@
+import { Result } from 'meow';
+import { Flags } from '../../lib/cli-flags.js';
+export default function Preview({ cli }: {
+    cli: Result<Flags>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/commands/preview.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { useEffect } from 'react';
+import { execa } from 'execa';
+import fs from 'fs';
+import { getDepsBinPath } from '../../lib/execa-utils/deps.js';
+import { cleanDist } from '../../lib/execa-utils/clean.js';
+export default function Preview({ cli }) {
+    useEffect(() => {
+        async function startPreviewServer() {
+            // Move node_modules/@pulse-editor/cli/dist/lib/server to node_modules/.pulse/server
+            if (fs.existsSync('node_modules/.pulse/server')) {
+                // Remove existing directory
+                if (process.platform === 'win32') {
+                    await execa('rmdir /S /Q node_modules\\.pulse\\server', {
+                        shell: true,
+                    });
+                }
+                else {
+                    await execa('rm -rf node_modules/.pulse/server', {
+                        shell: true,
+                    });
+                }
+            }
+            await execa('mkdir "node_modules/.pulse/server"', {
+                shell: true,
+            });
+            if (process.platform === 'win32') {
+                await execa('xcopy /E /I node_modules\\@pulse-editor\\cli\\dist\\lib\\server node_modules\\.pulse\\server', {
+                    shell: true,
+                });
+            }
+            else {
+                await execa('cp -r node_modules/@pulse-editor/cli/dist/lib/server/* node_modules/.pulse/server/', {
+                    shell: true,
+                });
+            }
+            // Start preview server
+            await cleanDist();
+            await execa(`${getDepsBinPath('concurrently')} --prefix none "npx webpack --mode development --watch" "tsx watch --clear-screen=false node_modules/@pulse-editor/cli/dist/lib/server/express.js"`, {
+                stdio: 'inherit',
+                shell: true,
+                env: {
+                    NODE_OPTIONS: '--import=tsx',
+                    PREVIEW: 'true',
+                },
+            });
+        }
+        startPreviewServer();
+    }, []);
+    return (_jsx(_Fragment, { children: _jsx(Text, { children: "Starting preview server..." }) }));
+}

package/dist/components/commands/publish.js

@@ -29,9 +29,9 @@ export default function Publish({ cli }) {
     // Check if the user is authenticated
     useEffect(() => {
         async function checkAuth() {
-            const token = getToken(cli.flags.dev);
+            const token = getToken(cli.flags.stage);
             if (token) {
-                const isValid = await checkToken(token, cli.flags.dev);
+                const isValid = await checkToken(token, cli.flags.stage);
                 if (isValid) {
                     setIsAuthenticated(true);
                 }
@@ -86,12 +86,12 @@ export default function Publish({ cli }) {
                 formData.append('file', blob, 'dist.zip');
                 formData.append('visibility', visibility);
                 // Send the file to the server
-                const res = await fetch(cli.flags.dev
+                const res = await fetch(cli.flags.stage
                     ? 'https://localhost:8080/api/app/publish'
                     : 'https://pulse-editor.com/api/app/publish', {
                     method: 'POST',
                     headers: {
-                        Authorization: `Bearer ${getToken(cli.flags.dev)}`,
+                        Authorization: `Bearer ${getToken(cli.flags.stage)}`,
                     },
                     body: formData,
                 });

package/dist/components/commands/start copy.d.ts

@@ -0,0 +1,5 @@
+import { Result } from 'meow';
+import { Flags } from '../../lib/cli-flags.js';
+export default function Start({ cli }: {
+    cli: Result<Flags>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/commands/start copy.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { useEffect } from 'react';
+import { execa } from 'execa';
+export default function Start({ cli }) {
+    useEffect(() => {
+        // Start dev server
+        execa('npm run start', {
+            stdio: 'inherit',
+            shell: true,
+        });
+    }, []);
+    return (_jsx(_Fragment, { children: _jsx(Text, { children: "Starting prod server..." }) }));
+}

package/dist/components/commands/start.d.ts

@@ -0,0 +1,5 @@
+import { Result } from 'meow';
+import { Flags } from '../../lib/cli-flags.js';
+export default function Start({ cli }: {
+    cli: Result<Flags>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/commands/start.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text } from 'ink';
+import { useEffect } from 'react';
+import { execa } from 'execa';
+export default function Start({ cli }) {
+    useEffect(() => {
+        async function startProdServer() {
+            // Start prod server
+            await execa('tsx node_modules/@pulse-editor/cli/dist/lib/server/express.js', {
+                stdio: 'inherit',
+                shell: true,
+                env: {
+                    NODE_OPTIONS: '--import=tsx',
+                },
+            });
+        }
+        startProdServer();
+    }, []);
+    return (_jsx(_Fragment, { children: _jsx(Text, { children: "Starting prod server..." }) }));
+}

package/dist/lib/cli-flags.d.ts

@@ -9,7 +9,7 @@ export declare const flags: {
         type: "string";
         shortFlag: string;
     };
-    dev: {
+    stage: {
         type: "boolean";
         default: false;
     };
@@ -21,5 +21,9 @@ export declare const flags: {
         type: "string";
         shortFlag: string;
     };
+    target: {
+        type: "string";
+        shortFlag: string;
+    };
 };
 export type Flags = typeof flags;

package/dist/lib/cli-flags.js

@@ -13,7 +13,7 @@ export const flags = defineFlags({
         type: 'string',
         shortFlag: 'f',
     },
-    dev: {
+    stage: {
         type: 'boolean',
         default: false,
     },
@@ -25,4 +25,8 @@ export const flags = defineFlags({
         type: 'string',
         shortFlag: 'v',
     },
+    target: {
+        type: 'string',
+        shortFlag: 't',
+    },
 });

package/dist/lib/deps.d.ts

@@ -0,0 +1 @@
+export declare function getDepsBinPath(name: string): string;

package/dist/lib/deps.js

@@ -0,0 +1,5 @@
+// Get deps bin at node_modules/@pulse-editor/cli/node_modules
+export function getDepsBinPath(name) {
+    const workingDir = process.cwd();
+    return `${workingDir}/node_modules/@pulse-editor/cli/node_modules/.bin/${process.platform === 'win32' ? `${name}.cmd` : name}`;
+}

package/dist/lib/execa-utils/clean.d.ts

@@ -0,0 +1 @@
+export declare function cleanDist(): Promise<void>;

package/dist/lib/execa-utils/clean.js

@@ -0,0 +1,9 @@
+import { execa } from 'execa';
+import { getDepsBinPath } from './deps.js';
+export async function cleanDist() {
+    console.log('♻️  Cleaning dist directory...');
+    await execa(`${getDepsBinPath('rimraf')} dist`, {
+        shell: true,
+    });
+    console.log('✅  Cleaned dist directory.');
+}

package/dist/lib/execa-utils/deps.d.ts

@@ -0,0 +1 @@
+export declare function getDepsBinPath(name: string): string;

package/dist/lib/execa-utils/deps.js

@@ -0,0 +1,5 @@
+// Get deps bin at node_modules/@pulse-editor/cli/node_modules
+export function getDepsBinPath(name) {
+    const workingDir = process.cwd();
+    return `${workingDir}/node_modules/@pulse-editor/cli/node_modules/.bin/${process.platform === 'win32' ? `${name}.cmd` : name}`;
+}

package/dist/lib/node_module_bin.d.ts

@@ -0,0 +1 @@
+export declare function bin(name: string): string;

package/dist/lib/node_module_bin.js

@@ -0,0 +1,7 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+export function bin(name) {
+    return path.join(__dirname, 'node_modules', '.bin', process.platform === 'win32' ? `${name}.cmd` : name);
+}

package/dist/lib/server/express.d.ts

@@ -0,0 +1,4 @@
+/**
+ *  This is a local dev server for "npm run dev" and "npm run preview".
+ */
+export {};

package/dist/lib/server/express.js

@@ -0,0 +1,118 @@
+/**
+ *  This is a local dev server for "npm run dev" and "npm run preview".
+ */
+import express from 'express';
+import cors from 'cors';
+import dotenv from 'dotenv';
+import livereload from 'livereload';
+import connectLivereload from 'connect-livereload';
+import { networkInterfaces } from 'os';
+import { pipeline, Readable } from 'stream';
+import { promisify } from 'util';
+import { readConfigFile } from './utils.js';
+import path from 'path';
+import { pathToFileURL } from 'url';
+dotenv.config({
+    quiet: true,
+});
+const isPreview = process.env?.['PREVIEW'];
+const isDev = process.env?.['NODE_ENV'];
+const workspaceId = process.env?.['WORKSPACE_ID'];
+const pulseConfig = await readConfigFile();
+if (isDev || isPreview) {
+    const livereloadServer = livereload.createServer({
+        // @ts-expect-error override server options
+        host: '0.0.0.0',
+    });
+    livereloadServer.watch('dist');
+    livereloadServer.server.once('connection', () => {
+        console.log('✅ LiveReload connected');
+    });
+}
+const app = express();
+app.use(cors());
+// Inject the client-side livereload script into HTML responses
+app.use(
+// The port might not be right here for the ingress.
+// I need this route to be exposed
+connectLivereload({
+    // @ts-expect-error override server options
+    host: workspaceId
+        ? `${workspaceId}.workspace.pulse-editor.com"`
+        : undefined,
+    port: workspaceId ? 443 : 35729,
+}));
+app.use(express.json());
+// Log each request to the console
+app.use((req, res, next) => {
+    console.log(`✅ [${req.method}] Received: ${req.url}`);
+    return next();
+});
+// Serve backend
+app.use(`/${pulseConfig.id}/${pulseConfig.version}/server`, express.static('dist/server'));
+// Catch backend function calls
+app.all(/^\/server-function\/(.*)/, async (req, res) => {
+    const func = req.params[0];
+    const url = `${req.protocol}://${req.get('host')}${req.originalUrl}`;
+    // Convert Express req -> Fetch Request
+    const request = new Request(url, {
+        method: req.method,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        headers: req.headers,
+        body: ['GET', 'HEAD'].includes(req.method)
+            ? null
+            : JSON.stringify(req.body),
+    });
+    const dir = path.resolve('node_modules/@pulse-editor/cli/dist/lib/server/preview/backend/load-remote.cjs');
+    const fileUrl = pathToFileURL(dir).href;
+    const { loadAndCall } = await import(fileUrl);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const response = await loadAndCall(func, request, pulseConfig.id, 'http://localhost:3030', pulseConfig.version);
+    const streamPipeline = promisify(pipeline);
+    // If loadAndCall returns a Response (Fetch API Response)
+    if (response.body) {
+        // Convert WHATWG stream to Node.js stream
+        const nodeStream = Readable.fromWeb(response.body);
+        // Pipe it directly to Express
+        await streamPipeline(nodeStream, res);
+    }
+    else {
+        res.end();
+    }
+});
+if (isPreview) {
+    /* Preview mode */
+    app.use(express.static('dist/client'));
+    app.listen(3030, '0.0.0.0');
+}
+else if (isDev) {
+    /* Dev mode  */
+    app.use(`/${pulseConfig.id}/${pulseConfig.version}`, express.static('dist'));
+    app.listen(3030, '0.0.0.0');
+}
+else {
+    /* Production mode */
+    app.use(`/${pulseConfig.id}/${pulseConfig.version}`, express.static('dist'));
+    app.listen(3030, '0.0.0.0', () => {
+        console.log(`\
+🎉 Your Pulse extension \x1b[1m${pulseConfig.displayName}\x1b[0m is LIVE! 
+
+⚡️ Local: http://localhost:3030/${pulseConfig.id}/${pulseConfig.version}/
+⚡️ Network: http://${getLocalNetworkIP()}:3030/${pulseConfig.id}/${pulseConfig.version}/
+
+✨ Try it out in the Pulse Editor and let the magic happen! 🚀`);
+    });
+}
+function getLocalNetworkIP() {
+    const interfaces = networkInterfaces();
+    for (const iface of Object.values(interfaces)) {
+        if (!iface)
+            continue;
+        for (const config of iface) {
+            if (config.family === 'IPv4' && !config.internal) {
+                return config.address; // Returns the first non-internal IPv4 address
+            }
+        }
+    }
+    return 'localhost'; // Fallback
+}

package/dist/lib/server/preview/backend/index.d.ts

@@ -0,0 +1 @@
+export declare function loadAndCall(func: string, req: Request): Promise<Response>;

package/dist/lib/server/preview/backend/index.js

@@ -0,0 +1,23 @@
+/* This folder contains temporary code to be moved to a different package in the future. */
+// @ts-expect-error ignore ts error
+import { createInstance } from '@module-federation/runtime';
+import { performReload } from '@module-federation/node/utils';
+import { readConfigFile } from '../../utils.js';
+export async function loadAndCall(func, req) {
+    const pulseConfig = await readConfigFile();
+    await performReload(true);
+    // here we assign the return value of the init() function, which can be used to do some more complex
+    // things with the module federation runtime
+    const instance = createInstance({
+        name: 'preview_host',
+        remotes: [
+            {
+                name: pulseConfig.id + '_server',
+                entry: `http://localhost:3030/.server-function/remoteEntry.js`,
+            },
+        ],
+    });
+    const loadedFunc = (await instance.loadRemote(`${pulseConfig.id}_server/${func}`)).default;
+    const res = await loadedFunc(req);
+    return res;
+}

package/dist/lib/server/preview/backend/load-remote.cjs

@@ -0,0 +1,23 @@
+const { createInstance } = require("@module-federation/runtime");
+
+async function loadAndCall(func, req, appId, origin, version) {
+  // here we assign the return value of the init() function, which can be used to do some more complex
+  // things with the module federation runtime
+  const instance = createInstance({
+    name: "server_function_runner",
+    remotes: [
+      {
+        name: appId + "_server",
+        entry: `${origin}/${appId}/${version}/server/remoteEntry.js`,
+      },
+    ],
+  });
+
+  const loadedFunc = (await instance.loadRemote(`${appId}_server/${func}`))
+    .default;
+
+  const res = await loadedFunc(req);
+  return res;
+}
+
+module.exports = { loadAndCall };

package/dist/lib/server/preview/frontend/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/server/preview/frontend/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pulse App</title>
+  </head>
+  <body style="height: 100vh; width: 100vw">
+    <div id="root" style="height: 100%; width: 100%"></div>
+  </body>
+</html>

package/dist/lib/server/preview/frontend/index.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* This folder contains temporary code to be moved to a different package in the future. */
+import ReactDOM from 'react-dom/client';
+// @ts-expect-error ignore ts error for now
+import Main from "../../../../../src/main.tsx";
+function Preview() {
+    return _jsx(Main, {});
+}
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(_jsx(Preview, {}));

package/dist/lib/server/utils.d.ts

@@ -0,0 +1 @@
+export declare function readConfigFile(): Promise<any>;

package/dist/lib/server/utils.js

@@ -0,0 +1,17 @@
+import fs from 'fs/promises';
+export async function readConfigFile() {
+    // Read pulse.config.json from dist/client
+    // Wait until dist/client/pulse.config.json exists
+    while (true) {
+        try {
+            await fs.access('dist/client/pulse.config.json');
+            break;
+        }
+        catch (err) {
+            // Wait for 100ms before trying again
+            await new Promise(resolve => setTimeout(resolve, 100));
+        }
+    }
+    const data = await fs.readFile('dist/client/pulse.config.json', 'utf-8');
+    return JSON.parse(data);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@pulse-editor/cli",
-	"version": "0.1.1-beta.0",
+	"version": "0.1.1-beta.2",
 	"license": "MIT",
 	"bin": {
 		"pulse": "dist/cli.js"
@@ -10,8 +10,8 @@
 		"node": ">=16"
 	},
 	"scripts": {
-		"build": "tsc",
-		"dev": "tsc --watch",
+		"build": "tsx build.ts",
+		"dev": "tsx watch --include \"./source/**/*\" build.ts",
 		"test": "prettier --check . && xo && ava",
 		"link": "npm link"
 	},
@@ -19,29 +19,44 @@
 		"dist"
 	],
 	"dependencies": {
+		"@module-federation/enhanced": "0.19.1",
+		"@module-federation/node": "2.7.17",
+		"@module-federation/runtime": "0.19.1",
+		"concurrently": "^9.2.1",
+		"connect-livereload": "^0.6.1",
+		"cors": "^2.8.5",
+		"cross-env": "^10.1.0",
 		"execa": "^9.6.0",
-		"ink": "^6.1.0",
+		"express": "^5.1.0",
+		"ink": "^6.5.0",
 		"ink-select-input": "^6.2.0",
 		"ink-spinner": "^5.0.0",
 		"ink-text-input": "^6.0.0",
-		"meow": "^13.2.0",
-		"openid-client": "^6.6.3",
-		"react": "^19.1.1"
+		"meow": "^14.0.0",
+		"openid-client": "^6.8.1",
+		"react": "^19.2.0",
+		"rimraf": "^6.1.0",
+		"tsx": "^4.20.6"
 	},
 	"devDependencies": {
-		"@sindresorhus/tsconfig": "^8.0.1",
-		"@types/react": "^19.1.9",
+		"@sindresorhus/tsconfig": "^8.1.0",
+		"@types/connect-livereload": "^0.6.3",
+		"@types/cors": "^2.8.19",
+		"@types/express": "^5.0.5",
+		"@types/livereload": "^0.9.5",
+		"@types/react": "^19.2.5",
 		"@vdemedes/prettier-config": "^2.0.1",
 		"ava": "^6.4.1",
-		"chalk": "^5.5.0",
-		"eslint-config-xo-react": "^0.28.0",
+		"chalk": "^5.6.2",
+		"eslint-config-xo-react": "^0.29.0",
 		"eslint-plugin-react": "^7.37.5",
-		"eslint-plugin-react-hooks": "^5.2.0",
+		"eslint-plugin-react-hooks": "^7.0.1",
 		"ink-testing-library": "^4.0.0",
+		"livereload": "^0.10.3",
 		"prettier": "^3.6.2",
 		"ts-node": "^10.9.2",
-		"typescript": "^5.9.2",
-		"xo": "^1.2.1"
+		"typescript": "^5.9.3",
+		"xo": "^1.2.3"
 	},
 	"ava": {
 		"extensions": {