Summary

Wouldn’t it be nice if you don’t have to install required SPFX tools to do the development?

Yes, answer is to use Docker. The Docker provides a container with required software pre installed. To use the container you should have an image.

Think of Docker Image as a Class and Docker Container is like objects. The images are template to run the container(s).

Step by Step Solution

The prerequisite is that you will need to install the Docker desktop on your host machine. To install Docker desktop go here.

Step # 1 Run the docker to launch container.

# use the following command in the PowerShell command prompt.
docker run -it --rm --name spfx-dev -v ${PWD}:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 dannyjessee/spfx

-it	–interactive Keep STDIN open even if not attached
–rm	Automatically remove the container when it exits
–name	Assign a name to the container
-v	Bind mount a volume
-p	Publish a container’s port(s) to the host Map host ports 5432, 4321 & 35729 to the container
dannyjessee/spfx	The image name

Step # 2 Check the version of the installed software on the container.

npm ls -g --depth=0

Step # 3 Create SPFX using Yo

Step # 4 Some changes are required in the created solution to work with Docker.

Changes for SharePoint Framework v1.11 project to support running the local workbench from within a Docker container. The following files needs the change.

config\serve.json, add below line 3:

"hostname": "0.0.0.0"

config\write-manifest.json, add below line 4:

"debugBasePath": "https://localhost:4321"

node_modules\@microsoft\sp-build-web\lib\SPWebBuildRig.js, replace lines 96-98 with:

if (!spBuildCoreTasks.writeManifests.taskConfig.debugBasePath) {
     spBuildCoreTasks.writeManifests.mergeConfig({
         debugBasePath: ${serve.taskConfig.https ? 'https' : 'http'}://${serve.taskConfig.hostname}:${serve.taskConfig.port}/
     });
}

Step # 5 Build and debug

run gulp serve