SPSLeicester

1. SPFx Team based Development using Docker
Jenkins NS
SharePoint & Office 365 Solution Architect
#SPSLeicester 10 Nov 2018

2. Thank You To All Of Our Sponsors!
#spsleicester

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, 1.6, 1.7
 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
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-
development-environment

9. Preparing the Docker Development environment
https://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

13. 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

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

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

18. 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

20. 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

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

22. Can't access workbench and bundles in SharePoint Framework 1.6.0/1.7.0 on Windows

23. Can't access workbench and bundles in SharePoint Framework 1.5.0

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

25. 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/2018/09/04/spfx-team-based-
development-using-docker/

27. thank
you Jenkins NS
SharePoint & Office 365 Solution Architect
Twitter : @jenkinsns
Blog : http://jenkinsblogs.com/
Facebook Page : https://www.facebook.com/spfxinfo/
Github : https://github.com/jenkinsns
#spsleicester