Command Gulp Serve with server configuration

Question

When I generate a spfx webpart/extension, i see this file generated (./config/serve.json) :

{
  "$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "serveConfigurations": {
    "default": {
      "pageUrl": "https://contoso.sharepoint.com/sites/mySite/SitePages/myPage.aspx",
      "customActions": {
        "367a7af2-345d-4702-940c-61e4e4a103d2": {
          "location": "ClientSideExtension.ListViewCommandSet.CommandBar",
          "properties": {
            "sampleTextOne": "One item is selected in the list",
            "sampleTextTwo": "This command is always visible."
          }
        }
      }
    },
    "helloWorld": {
      "pageUrl": "https://contoso.sharepoint.com/sites/mySite/SitePages/myPage.aspx",
      "customActions": {
        "367a7af2-345d-4702-940c-61e4e4a103d2": {
          "location": "ClientSideExtension.ListViewCommandSet.CommandBar",
          "properties": {
            "sampleTextOne": "One item is selected in the list",
            "sampleTextTwo": "This command is always visible."
          }
        }
      }
    }
  }
}

I figured that the "default" configuration is used when i typed gulp serve. Is there any option to specify gulp serve command which configuration to use? Example :

gulp serve --configuration "helloWorld"

Thank you

Answer 1

Yes, you can specify which gulp command to run as below:

gulp serve --config=helloworld

Its a new section which has been added to the serve.json config file in SPFx projects.

So, when you run gulp serve the default entry will be used and when you specify gulp serve --config=helloworld that entry will used and you will be redirected according to the page specified in pageUrl value.

For more details, check out the below links :

Blogpost - Utilizing SPFx serveConfigurations

Youtube video - Using serve.json to make SharePoint Framework Extension development easier