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.

1. SPFx Team based Development using Docker
Jenkins NS
SharePoint Consultant
#SPSSTHLM, Sept 1st, 2018

2. Thank you sponsors!

3. AGENDA
BENEFITS OF USING DOCKER IN THE SPFX DEVELOPMENT
1 BACKGROUND
2
DOCKER IMAGE FOR YOUR SPFX TEAM
3
WHAT IS DOCKER?
CREATE DOCKER IMAGE FOR SPFX4
5
6
7
DEMO
NEXT STEPS

4. Background
 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

5. What is Docker?

6. Benefits of using docker in the
SharePoint Framework development

8. Preparing SPFx development environment

9. Preparing the Docker Development environment
www.hub.docker.com

10. Create SPFx Docker Image
 FROM node:8.11.3
 EXPOSE 5432 4321 35729
 RUN npm i -g gulp yo @microsoft/generator-
sharepoint@1.5.1
 VOLUME /usr/app/spfx and WORKDIR /usr/app/spfx
 RUN
Reference : https://docs.docker.com/engine/reference/builder/#environment-replacement
Docker file : https://github.com/jenkinsns/dockerSPFx/blob/master/Dockerfile

11. Create SPFx Docker Image …
 PS C:JenkinsSPFxDocker> docker
 PS C:JenkinsSPFxDocker> docker build -t jenkinsns/spfx:1.5.1 .
PS C:JenkinsSPFxDocker> docker images
 PS C:JenkinsSPFxDocker> docker tag be7d150e0bf7 jenkinsns/spfx:1.5.1
 PS C:JenkinsSPFxDocker> docker images

12. Create SPFx Docker Image…
 PS C:JenkinsSPFxDocker> Docker login
 PS C:JenkinsSPFxDocker> docker push jenkinsns/spfx:1.5.1
 PS C:JenkinsSPFxDocker> docker push jenkinsns/spfx:latest
 PS C:JenkinsSPFxDocker>docker run -it --rm --name spfx -v ${PWD}:/usr/app/spfx -p
5432:5432 -p 4321:4321 -p 35729:35729 jenkinsns/spfx:1.5.1

13. Docker Image for your SPFx team
https://hub.docker.com/r/jenkinsns/spfx/tags/

15. Lets do it
https://store.docker.com/editions/community/docker-ce-
desktop-windows

16. Usage
 Open Windows Powershell
 PS C:JenkinsSPFxDockerprojects> 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

18. Build SharePoint Framework Solution
 spfx@910eaf6fa674:/usr/app/spfx$ yo @microsoft/sharepoint
 spfx@f7cc6adfd5a6:/usr/app/spfx$ gulp serve
 To close the container in the container cmd line run:
exit

19. Things you need to know
https://localhost:5432/workbench

20. Next Steps
https://docs.docker.com/engine/reference/builder/

21. Reference
https://hub.docker.com/r/waldekm/spfx/tags/
https://github.com/waldekmastykarz/docker-spfx
https://blog.mastykarz.nl/sharepoint-framework-
docker-image-your-team/
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/team-based-
development-on-sharepoint-framework
https://developer.microsoft.com/en-us/office/blogs/using-docker-in-
sharepoint-framework-development/
http://jenkinsblogs.com

23. Thank you!

24. Thank you sponsors!