Introduction
SharePoint Framework (SPFx) has emerged as a popular development framework for creating custom solutions in SharePoint and Microsoft 365. With its client-side rendering capabilities, SPFx enables developers to build modern, responsive, personalized web parts and extensions. However, as projects grow in complexity, managing dependencies, environment consistency, and deployment can become challenging. Docker, a containerization platform, can provide an effective solution by simplifying the setup and deployment of SPFx projects. In this article, we will explore the benefits of using Docker with SPFx and guide you through the process of integrating them seamlessly.
Understanding Docker
Docker is an open-source containerization platform that allows developers to package applications, along with their dependencies and configurations, into isolated and lightweight containers. Containers provide a consistent and reproducible environment, ensuring applications run reliably across different systems. Docker facilitates easy deployment and scalability, as containers can be quickly spun up or down, making it an ideal choice for SPFx development.
Benefits of Using Docker with SPFx
-
Consistent Development Environment: Docker eliminates the "works on my machine" problem by encapsulating the development environment within containers. Developers can define a standard Docker image for their SPFx projects, including specific versions of Node.js, SharePoint-related dependencies, and tooling. This ensures all team members work on the same configuration, reducing compatibility issues and improving collaboration.
-
Dependency Management: SPFx projects often rely on a variety of libraries, frameworks, and tools. Managing these dependencies manually can be time-consuming and error-prone. Docker simplifies dependency management by allowing developers to define the required dependencies in a Docker file. This file serves as a blueprint for building the Docker image, ensuring that all necessary packages are installed consistently across different environments.
-
Seamless Deployment: Docker enables hassle-free deployment of SPFx projects. Once a Docker image is created, it can be easily shared with other team members or deployed to different environments without worrying about installation issues or missing dependencies. This saves time and effort, especially when deploying to multiple SharePoint sites or environments.
-
Scalability and Isolation: Docker's containerization approach ensures that SPFx projects run in isolated environments. Each container contains its own set of dependencies and configurations, minimizing conflicts between different projects. Additionally, Docker allows for effortless scaling of containers, making it easy to test and deploy SPFx solutions in different scenarios.
Getting Started with Docker
-
Install Docker: Download and install Docker Desktop on your development machine. Docker Desktop provides a user-friendly interface to manage Docker containers and images. You can install the docker from this link https://docs.docker.com/get-docker/
![]()
Choose the docker desktop application as per your machine Mac, windows, or Linux.
-
As per the PNP community, all the spfx images for the various versions of the spfx framework are stored inside this hub https://hub.docker.com/r/m365pnp/spfx. So you dont have to build any image for any of the spfx framework versions by yourself.
![]()
-
To run the SPFx container using the docker image, you first need to create a folder. Go into the folder where you want to create the new project.
cd [your project]
-
Next, the below command creates a new container using the SPFx Yeoman Generator image 1.17.1 and mounts the current directory as a volume inside the container. It then sets the working directory to the mounted volume.
docker run -it --rm --name ${PWD##*/} -v $PWD:/usr/app/spfx -p 4321:4321 -p 35729:35729 m365pnp/spfx:1.17.1
![]()
-
After mapping the necessary ports and volumes to interact with the SharePoint environment. This will provide a containerized environment where you can create and test your SPFx solution for version 1.17.1
-
Now our container is running, and we can check our spfx version and node version
.
![]()
-
Now we can create our spfx webpart/extension within this container using a normal Yo generator.
![]()
![]()
-
After the webpart is created, the content will be found under the newSpfxProject, as shown in the above screenshot.
-
Now run the command gulp trust-dev-cert to create the certificate
gulp trust-dev-cert
-
We can now run the project using gulp, but as this environment is different, we have to use gulp serve --nobrowser, so we need to open the SharePoint workbench manually.
gulp serve --nobrowser
-
Further, opening the SharePoint workbench will not load the manifest file by itself.
![]()
![]()
-
After successfully opening the manifest file, we will open the webpart.
![]()
![]()
Notes
- You will encounter various issues while trying to run gulp serve --nobrowser. You can check out the documentation provided with this link for those known issues and resolutions. https://hub.docker.com/r/m365pnp/spfx
- The article above states the command to run the docker as per Mac. You can take the command from this article on Windows/Linux. https://hub.docker.com/r/m365pnp/spfx
Conclusion
Integrating Docker with SPFx streamlines development enhances collaboration, ensures consistency, and simplifies deployment. Docker enables packaging SPFx projects into containerized environments, providing consistent experiences across machines. In summary, Docker with SPFx improves efficiency, fosters collaboration, and simplifies development, deployment, and scalability.
Above, we have created the new project as per the image 1.17.1. Still, you can create a container environment as per the different images published by Pnp, or you can also push your custom docker image. Further in the above, we only created the new project, but you can follow the same method with the earlier created webpart and just run it as per the SPFx version specified in the package.json file.