💡 [Feature]: Add SPFx Fast Serve setup as additional step to the scaffolding form

[Adam-it]

🎯 Aim of the feature

the aim would be to extend the additional steps section of the scaffolding form with SPFx Fast Serve
https://github.com/s-KaiNet/spfx-fast-serve?tab=readme-ov-file#which-sharepoint-framework-versions-are-supported

📷 Images (if possible) with expected result

Add a new option here

🤔 Additional remarks or comments

Prototype

• add a new option (additional dependency) here

  vscode-viva/src/webview/view/components/forms/spfxProject/AdditionalStep.tsx

  Lines 99 to 122 in 91c92ee

  	</div>
  	<PackageSelector value={shouldInstallReusablePropertyPaneControls}
  	setValue={setShouldInstallReusablePropertyPaneControls}
  	label='Install reusable property pane controls'
  	link='https://pnp.github.io/sp-dev-fx-property-controls/' />
  	<PackageSelector
  	value={shouldInstallReusableReactControls}
  	setValue={setShouldInstallReusableReactControls}
  	label='Install reusable React controls'
  	link='https://pnp.github.io/sp-dev-fx-controls-react/' />
  	<PackageSelector
  	value={shouldInstallPnPJs}
  	setValue={setShouldInstallPnPJs}
  	label='Install PnPjs (@pnp/sp, @pnp/graph)'
  	link='https://pnp.github.io/pnpjs/' />
  	{nodeVersionManager !== 'none' &&
  	<PackageSelector
  	value={shouldCreateNodeVersionFile}
  	setValue={setShouldCreateNodeVersionFile}
  	label='Create node version manager configuration file' />}
  	</div>

  
  with description to isntall fast-serve and link to offcial fast serve guidance (as besides adding packages to the project user will need to also install global dependency manually)
• when selected we need to handle it here

  vscode-viva/src/services/actions/Scaffolder.ts

  Lines 296 to 307 in 91c92ee

  	let content = newSolutionInput.shouldRunInit ? ProjectFileContent.init : '';
  	if (newSolutionInput.shouldInstallReusablePropertyPaneControls) {
  	content += ` ${ProjectFileContent.installReusablePropertyPaneControls}`;
  	}
  	if (newSolutionInput.shouldInstallReusableReactControls) {
  	content += ` ${ProjectFileContent.installReusableReactControls}`;
  	}
  	if (newSolutionInput.shouldInstallPnPJs) {
  	content += ` ${ProjectFileContent.installPnPJs}`;
  	}

• we need to add new file content for the pnp project which will be added in the previous step when the option is selected
  https://github.com/pnp/vscode-viva/blob/main/src/constants/ProjectFileContent.ts
  so that when new project gets scaffolded the project.pnp file will have our new step that will need to be handeld
• handle our new scaffolding step after new project gets created here

  vscode-viva/src/extension.ts

  Lines 51 to 65 in 91c92ee

  	if (fileContents.indexOf(ProjectFileContent.initScenario) > -1) {
  	commands.executeCommand('codetour.startTour');
  	}
  	if (fileContents.indexOf(ProjectFileContent.installReusablePropertyPaneControls) > -1) {
  	await TerminalCommandExecuter.runCommand('npm install @pnp/spfx-property-controls --save --save-exact', terminalTitle, terminalIcon);
  	}
  	if (fileContents.indexOf(ProjectFileContent.installReusableReactControls) > -1) {
  	await TerminalCommandExecuter.runCommand('npm install @pnp/spfx-controls-react --save --save-exact', terminalTitle, terminalIcon);
  	}
  	if (fileContents.indexOf(ProjectFileContent.installPnPJs) > -1) {
  	await TerminalCommandExecuter.runCommand('npm install @pnp/sp @pnp/graph --save', terminalTitle, terminalIcon);
  	}

  
  when the new fast-serve step gets catched we should run spfx-fast-serve --force-install on the new project

[Adam-it]

The biggest problem is that spfx-fast-serve will prompt for running npm install which may be overlooked by a user when a new project is scaffolded.
It would be perfect if there was some option not to prompt for it and always run npm install

Let's put this on hold until we get some answer here 👇
s-KaiNet/spfx-fast-serve#157

[Adam-it]

this feature was implemented and it is now possible to add fast-serve with --force-install so that it will not show any additional prompt after project scaffolding