feat: update webapp dev command with target, root-dir, host, and no-open flags

Author: lesya7

command-snapshot.json

@@ -11,8 +11,8 @@
     "alias": [],
     "command": "webapp:dev",
     "flagAliases": [],
-    "flagChars": ["n", "p"],
-    "flags": ["flags-dir", "json", "name", "port"],
+    "flagChars": ["n", "p", "r", "t"],
+    "flags": ["flags-dir", "host", "json", "name", "no-open", "port", "root-dir", "target"],
     "plugin": "@salesforce/plugin-webapp"
   },
   {

messages/webapp.dev.md

@@ -4,26 +4,50 @@ Preview a web app locally without needing to deploy
 
 # description
 
-Start a local development server to preview your web app without deploying to Salesforce. This enables rapid development with hot reloading and immediate feedback.
+Starts a local development server for a Web Application defined in CMS, using the local project files. This enables rapid development with hot reloading and immediate feedback. The command resolves the Web Application metadata, reads its configuration (targets, routes, etc.), and derives the default local path if available.
 
 # flags.name.summary
 
-Name of your web app
+Identifies the Web Application (CMS MD) to use
+
+# flags.target.summary
+
+Selects which Web Application target to use for the preview (e.g., Lightning App, Site)
+
+# flags.root-dir.summary
+
+Optional override for the local project root of this Web Application
 
 # flags.port.summary
 
-Port number for the development server
+Port for the dev server
+
+# flags.host.summary
+
+Host to bind to
+
+# flags.no-open.summary
+
+Do not automatically open the browser
 
 # examples
 
 - Start the development server:
 
-  <%= config.bin %> <%= command.id %>
+  <%= config.bin %> <%= command.id %> --name myWebApp
+
+- Start the development server with a specific target:
 
-- Start the development server for a specific web app:
+  <%= config.bin %> <%= command.id %> --name myWebApp --target "LightningApp"
 
-  <%= config.bin %> <%= command.id %> --name myWebApp
+- Start the development server on a custom port and host:
+
+  <%= config.bin %> <%= command.id %> --name myWebApp --port 8080 --host 0.0.0.0
+
+- Start the development server with custom root directory:
+
+  <%= config.bin %> <%= command.id %> --name myWebApp --root-dir ./webapps/myWebApp
 
-- Start the development server on a custom port:
+- Start the development server without opening the browser:
 
-  <%= config.bin %> <%= command.id %> --name myWebApp --port 8080
+  <%= config.bin %> <%= command.id %> --name myWebApp --no-open

schemas/webapp-dev.json

@@ -8,14 +8,26 @@
         "name": {
           "type": "string"
         },
+        "target": {
+          "type": "string"
+        },
+        "rootDir": {
+          "type": "string"
+        },
         "port": {
           "type": "number"
         },
+        "host": {
+          "type": "string"
+        },
+        "noOpen": {
+          "type": "boolean"
+        },
         "success": {
           "type": "boolean"
         }
       },
-      "required": ["port", "success"],
+      "required": ["name", "port", "host", "noOpen", "success"],
       "additionalProperties": false
     }
   }

src/commands/webapp/dev.ts

@@ -21,8 +21,12 @@ Messages.importMessagesDirectoryFromMetaUrl(import.meta.url);
 const messages = Messages.loadMessages('@salesforce/plugin-webapp', 'webapp.dev');
 
 export type WebappDevResult = {
-  name?: string;
+  name: string;
+  target?: string;
+  rootDir?: string;
   port: number;
+  host: string;
+  noOpen: boolean;
   success: boolean;
 };
 
@@ -35,37 +39,71 @@ export default class WebappDev extends SfCommand<WebappDevResult> {
     name: Flags.string({
       summary: messages.getMessage('flags.name.summary'),
       char: 'n',
+      required: true,
+    }),
+    target: Flags.string({
+      summary: messages.getMessage('flags.target.summary'),
+      char: 't',
+      required: false,
+    }),
+    'root-dir': Flags.string({
+      summary: messages.getMessage('flags.root-dir.summary'),
+      char: 'r',
       required: false,
     }),
     port: Flags.integer({
       summary: messages.getMessage('flags.port.summary'),
       char: 'p',
-      default: 3000,
+      default: 8080,
+    }),
+    host: Flags.string({
+      summary: messages.getMessage('flags.host.summary'),
+      default: 'localhost',
+    }),
+    'no-open': Flags.boolean({
+      summary: messages.getMessage('flags.no-open.summary'),
+      default: false,
     }),
   };
 
   public async run(): Promise<WebappDevResult> {
     const { flags } = await this.parse(WebappDev);
 
-    if (flags.name) {
-      this.log(`Starting development server for web app: ${flags.name}`);
+    this.log(`Starting development server for web app: ${flags.name}`);
+
+    if (flags.target) {
+      this.log(`Using target: ${flags.target}`);
     } else {
-      this.log('Starting development server for web app...');
+      this.log('Using default target from Web Application configuration');
+    }
+
+    if (flags['root-dir']) {
+      this.log(`Root directory: ${flags['root-dir']}`);
     }
 
-    this.log(`Preview server running on port: ${flags.port}`);
-    this.log('Preview your web app locally without needing to deploy');
+    this.log(`Server running on http://${flags.host}:${flags.port}`);
+
+    if (!flags['no-open']) {
+      this.log('Opening browser...');
+    }
 
     // TODO: Implement local development server logic
     // This would typically involve:
-    // 1. Starting a local development server
-    // 2. Watching for file changes
-    // 3. Hot reloading functionality
-    // 4. Proxying API calls to Salesforce org if needed
+    // 1. Resolving the Web Application metadata from CMS
+    // 2. Reading configuration (targets, routes, etc.)
+    // 3. Deriving or using the specified local path
+    // 4. Starting a local development server on specified host:port
+    // 5. Watching for file changes with hot reloading
+    // 6. Opening browser automatically unless --no-open is set
+    // 7. Proxying API calls to Salesforce org if needed
 
     return {
       name: flags.name,
+      target: flags.target,
+      rootDir: flags['root-dir'],
       port: flags.port,
+      host: flags.host,
+      noOpen: flags['no-open'],
       success: true,
     };
   }

test/commands/webapp/dev.nut.ts

@@ -27,10 +27,34 @@ describe('webapp dev NUTs', () => {
     await session?.clean();
   });
 
-  it('should display provided name', () => {
-    const name = 'World';
-    const command = `webapp dev --name ${name}`;
+  it('should start dev server with name', () => {
+    const command = 'webapp dev --name myWebApp';
     const output = execCmd(command, { ensureExitCode: 0 }).shellOutput.stdout;
-    expect(output).to.contain(name);
+    expect(output).to.contain('myWebApp');
+    expect(output).to.contain('Server running on http://localhost:8080');
+  });
+
+  it('should start dev server with target', () => {
+    const command = 'webapp dev --name myWebApp --target "LightningApp"';
+    const output = execCmd(command, { ensureExitCode: 0 }).shellOutput.stdout;
+    expect(output).to.contain('Using target: LightningApp');
+  });
+
+  it('should start dev server with custom port and host', () => {
+    const command = 'webapp dev --name myWebApp --port 9000 --host 0.0.0.0';
+    const output = execCmd(command, { ensureExitCode: 0 }).shellOutput.stdout;
+    expect(output).to.contain('Server running on http://0.0.0.0:9000');
+  });
+
+  it('should start dev server with root-dir', () => {
+    const command = 'webapp dev --name myWebApp --root-dir ./webapps/myWebApp';
+    const output = execCmd(command, { ensureExitCode: 0 }).shellOutput.stdout;
+    expect(output).to.contain('Root directory: ./webapps/myWebApp');
+  });
+
+  it('should start dev server with no-open flag', () => {
+    const command = 'webapp dev --name myWebApp --no-open';
+    const output = execCmd(command, { ensureExitCode: 0 }).shellOutput.stdout;
+    expect(output).to.not.contain('Opening browser...');
   });
 });

test/commands/webapp/dev.test.ts

@@ -30,23 +30,70 @@ describe('webapp dev', () => {
     $$.restore();
   });
 
-  it('runs dev server without name', async () => {
-    const result = await WebappDev.run([]);
-    expect(result.port).to.equal(3000);
+  it('runs dev server with required name', async () => {
+    const result = await WebappDev.run(['--name', 'myWebApp']);
+    expect(result.name).to.equal('myWebApp');
+    expect(result.port).to.equal(8080);
+    expect(result.host).to.equal('localhost');
+    expect(result.noOpen).to.be.false;
     expect(result.success).to.be.true;
-    expect(result.name).to.be.undefined;
   });
 
-  it('runs dev server with name', async () => {
-    const result = await WebappDev.run(['--name', 'myWebApp']);
+  it('runs dev server with custom port', async () => {
+    const result = await WebappDev.run(['--name', 'myWebApp', '--port', '3000']);
     expect(result.name).to.equal('myWebApp');
     expect(result.port).to.equal(3000);
     expect(result.success).to.be.true;
   });
 
-  it('runs dev server with custom port', async () => {
-    const result = await WebappDev.run(['--port', '8080']);
-    expect(result.port).to.equal(8080);
+  it('runs dev server with custom host', async () => {
+    const result = await WebappDev.run(['--name', 'myWebApp', '--host', '0.0.0.0']);
+    expect(result.name).to.equal('myWebApp');
+    expect(result.host).to.equal('0.0.0.0');
+    expect(result.success).to.be.true;
+  });
+
+  it('runs dev server with target', async () => {
+    const result = await WebappDev.run(['--name', 'myWebApp', '--target', 'LightningApp']);
+    expect(result.name).to.equal('myWebApp');
+    expect(result.target).to.equal('LightningApp');
+    expect(result.success).to.be.true;
+  });
+
+  it('runs dev server with root-dir', async () => {
+    const result = await WebappDev.run(['--name', 'myWebApp', '--root-dir', './webapps/myWebApp']);
+    expect(result.name).to.equal('myWebApp');
+    expect(result.rootDir).to.equal('./webapps/myWebApp');
+    expect(result.success).to.be.true;
+  });
+
+  it('runs dev server with no-open flag', async () => {
+    const result = await WebappDev.run(['--name', 'myWebApp', '--no-open']);
+    expect(result.name).to.equal('myWebApp');
+    expect(result.noOpen).to.be.true;
+    expect(result.success).to.be.true;
+  });
+
+  it('runs dev server with all flags', async () => {
+    const result = await WebappDev.run([
+      '--name',
+      'myWebApp',
+      '--target',
+      'Site',
+      '--root-dir',
+      './webapps/test',
+      '--port',
+      '9000',
+      '--host',
+      '127.0.0.1',
+      '--no-open',
+    ]);
+    expect(result.name).to.equal('myWebApp');
+    expect(result.target).to.equal('Site');
+    expect(result.rootDir).to.equal('./webapps/test');
+    expect(result.port).to.equal(9000);
+    expect(result.host).to.equal('127.0.0.1');
+    expect(result.noOpen).to.be.true;
     expect(result.success).to.be.true;
   });
 
@@ -57,6 +104,34 @@ describe('webapp dev', () => {
       .flatMap((c) => c.args)
       .join('\n');
     expect(output).to.include('Starting development server for web app: testApp');
-    expect(output).to.include('Preview server running on port: 3000');
+    expect(output).to.include('Server running on http://localhost:8080');
+    expect(output).to.include('Opening browser...');
+  });
+
+  it('outputs target message when specified', async () => {
+    await WebappDev.run(['--name', 'testApp', '--target', 'LightningApp']);
+    const output = sfCommandStubs.log
+      .getCalls()
+      .flatMap((c) => c.args)
+      .join('\n');
+    expect(output).to.include('Using target: LightningApp');
+  });
+
+  it('outputs default target message when not specified', async () => {
+    await WebappDev.run(['--name', 'testApp']);
+    const output = sfCommandStubs.log
+      .getCalls()
+      .flatMap((c) => c.args)
+      .join('\n');
+    expect(output).to.include('Using default target from Web Application configuration');
+  });
+
+  it('does not output browser message with no-open', async () => {
+    await WebappDev.run(['--name', 'testApp', '--no-open']);
+    const output = sfCommandStubs.log
+      .getCalls()
+      .flatMap((c) => c.args)
+      .join('\n');
+    expect(output).to.not.include('Opening browser...');
   });
 });