Reading Time: 5 minutes

SharePoint Framework is a new development model for building SharePoint customization. In the last two years, we have seen many number of releases for SharePoint Framework.

  • GA(1.0.0), 1.0.1, 1.0.2, 1.1.0, 1.1.1, 1.1.3, 1.2.0, 1.3.0, 1.3.1, 1.3.2, 1.3.4, 1.4.0, 1.4.1, 1.5.0, 1.5.1…
  • Drop 1, Drop 2, Drop 3, Drop 4, Drop 5, Drop 6, RC0

Always Microsoft recommend to use latest version, but in reality it is very difficult to manage with team based development, since we always don’t upgrade to a new version.

Example : We developed and deployed a solution to production in a version 1.3.1, we need not have to upgrade to the latest version of the SPFx to do a single change. It is not worth the effort and the hours, since every new version upgrade will introduce new errors or impact, we need to proceed regression testing and also require to fix the errors and impacts.

To overcome,Waldek Mastykarz come with a solution, i.e, “SharePoint Framework team based development using docker” and he did an amazing job of creating Docker image’s for SharePoint Framework development for every version and shared to public, which helps in saving a lot of time for developers in terms of preparing the development environment and running that environment everyday.

What is Docker?

Docker is a light-weight virtualization technology. Where the size of the virtual machines you used in the past for SharePoint development were measured in gigabytes, Docker images are usually a few hundred Megabytes. The most significant difference between Docker images and VMs is, that docker images are easier to create and manage.

When working with Docker you often hear two terms: images and containers. Images are the templates for running containers.

Benefits of using docker in the SharePoint Framework development

  • You can easily host multiple different versions SPFx in single machine.
  • Use the right version of the SharePoint Framework for the particular project.
  • Setup default image for your development team.
  • Speed-up developer environment setup.
  • Docker images are much more light weight than classic virtual machines.

Preparing SPFx development environment

Building SharePoint Framework solutions require developers to use a certain set of tools.

  • Node.js
  • npm
  • Gulp
  • Yeoman and SharePoint Framework Yeoman generator

Preparing the Docker Development environment

  • Docker for Mac or Windows is available for free
    • Apple Mac OS Yosemite 10.10.3 or above
    • Microsoft Windows 10 Professional or Enterprise 64-bit
  • To use Docker
    • Create a free login in www.hub.docker.com
    • Download for windows or mac as per your Environment
  • Install Docker for Windows
    • After installation, Docker will ask you to enable Hyper-V and Containers feature in the Win10 VM. Hit Ok and restart it.
    • Launch Docker with administrator privilege
    • Docker Settings > Shared Drives – Share your projects drive

Create SPFx Docker Image

  • To create Docker image, we need to use YML Script to build it
  • SharePoint Framework Docker image, I have built – all 16 lines of it
  • Steps to Build a Docker Image
    • Create “Dockerfile” text file

    • Know the YML
      • FROM node:8.11.3 use node version 8.11.3 there is already a image called node so we can inherit it in ours
      • EXPOSE 5432 4321 35729 ports that need to be open in the image.
      • RUN npm i -g gulp yo @microsoft/generator-sharepoint@1.5.1 at gulp yo and generator-sharepoint need to add in our VM
      • VOLUME /usr/app/spfx and WORKDIR /usr/app/spfx – Directory
      • RUN user creation

 

 

 

  • Open Windows PowerShell and change director to your docker file.
  • PS C:\Jenkins\SPFx\Docker> docker – List all commands for your reference.
  • PS C:\Jenkins\SPFx\Docker> docker build -t jenkinsns/spfx:1.5.1 .
  • Dot (.) for current directory
  • copy the id, now it is time to Tag your build or get the image id
  • PS C:\Jenkins\SPFx\Docker> docker images
  • PS C:\Jenkins\SPFx\Docker> docker tag be7d150e0bf7 jenkinsns/spfx:1.5.1
  • PS C:\Jenkins\SPFx\Docker> docker images

žNow ready to push your Image to Docker

  • žFirst login to Docker hub
  • žPS C:\Jenkins\SPFx\Docker> Docker login

 

 

  • žžPush the images to hub.docker.com
  • žPS C:\Jenkins\SPFx\Docker> docker push jenkinsns/spfx:1.5.1
  • žPS C:\Jenkins\SPFx\Docker> docker push jenkinsns/spfx:latest

žžNow you can be able to run the environment using the command below

  • žPS C:\Jenkins\SPFx\Docker>docker run -it –rm –name spfx -v /c/jenkins/spfx/docker/projects:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 jenkinsns/spfx:1.5.1

žNow you can see the image in your hub.docker.com

https://hub.docker.com/r/jenkinsns/spfx/tags/

Lets do it

  • After building the Docker image, ask your team to pull the image and start working together.
  • Lets do
  • Download the Docker and install for Windows/Mac – https://store.docker.com/editions/community/docker-ce-desktop-windows
  • After installation, Docker will ask you to enable Hyper-V and Containers features in the Win10 VM. Hit Ok and restart it.
  • Launch Docker with administrator privileges
  • Docker Settings > Shared Drives – Share your projects drive

Usage

  • Open Windows Powershell
  • PS C:\Jenkins\SPFx\Docker\projects> docker run -it –rm –name spfx -v /c/jenkins/spfx/docker/projects:/usr/app/spfx -p 5432:5432 -p 4321:4321 -p 35729:35729 jenkinsns/spfx:1.5.1

  • You will see the SPFx image being downloaded from the github. This might take few minutes for the first time. Once the image is downloaded it will run inside a container and you will be given the command prompt of the linux VM(which has all the SPFx dev tools pre-installed)

Now our Virtual machine is ready

 

Build SharePoint Framework Solution using your docker image

Type : yo @microsoft/sharepoint to Create new webpart

  • spfx@910eaf6fa674:/usr/app/spfx$ yo @microsoft/sharepoint
  • To close the container in the container cmd line run: exit

  • spfx@f7cc6adfd5a6:/usr/app/spfx$ gulp serve
  • New Webpart is ready

Things you need to know

  • To open “Visual studio code” using code .
    • Open separate command prompt and open the solution
  • Because the gulp servecommand runs inside the container, it won’t automatically start your web browser.
  • All files scaffolded by the generator will be stored in your project directory on your host from where you can commit them to source control.

Next Steps

  • Extend the standard SharePoint Framework Docker image
    • The Docker image I have build is based on Node.js and it adds only the SharePoint Framework. It’s good for generic usage, but it lacks our tools. By leveraging the layered nature of Docker images, you can take my Docker image, add the tools and configuration, and use that as the image for building SharePoint Framework solutions in your team.
    • To build a Docker image, all you need is Docker and a yaml file containing instructions for Docker
    • Start with creating a file named Dockerfile with the following contents:
      • FROM jenkinsns/spfx:1.5.1
    • This first line tells Docker that you want to build a new image based on the SharePoint Framework Docker image that I created.
  • Yaml reference – https://docs.docker.com/engine/reference/builder/

Reference

Contact me or comment here for clarifications or issues.