How to develop SPFX using Docker Container?

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
–rmAutomatically remove the container when it exits
–nameAssign a name to the container
-vBind mount a volume
-pPublish a container’s port(s) to the host
Map host ports 5432, 4321 & 35729 to the container
dannyjessee/spfxThe image name
Docker run command options

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

npm ls -g --depth=0

Step # 3 Create SPFX using Yo

Create the SPFX Webpart

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

About Pankaj

I am a Developer and my linked profile is https://www.linkedin.com/in/pankajsurti/
This entry was posted in Docker. Bookmark the permalink.

1 Response to How to develop SPFX using Docker Container?

  1. Marcel Balcarek says:

    Hello Pankaj, thank you for your postings. I apologize for the slightly off-topic post. I recently tried to use https://github.com/pankajsurti/PowerBIEmbeddedSPFX and have had several issues trying to get it to work. I have tried using the hosted workbench to debug it, but I am struggling. Should this solution still work? Any insight on how I can debug it? I am using yo generator 1.10.0. I have done beginner spfx training, but there are a lot of new concepts to absorb, so your advice is really appreciate and might help others also. Here is what I am trying to achieve: https://community.powerbi.com/t5/Developer/spfx-power-bi-web-part-to-support-filtering-in-SharePoint-Online/td-p/1909501

Leave a Reply to Marcel Balcarek Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s