Building SPFx Solutions using Docker

1. Building SPFx solutions using Docker
Jenkins NS
Architect @ Cognizant
SharePoint & Office 365 Solution Consultant, Speaker and Blogger.
My Blogs : http://jenkinsblogs.com/
@jenkinsns

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

3. Background
 Drop 1, Drop 2, Drop 3, Drop 4, Drop 5, Drop 6, RC0
 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.0, 1.7.1

4. What is Docker?

5. Benefits of using docker in the
SharePoint Framework development

7. Preparing SPFx development environment

8. Preparing the Docker Development environment
https://hub.docker.com/

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

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

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

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

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

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

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

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

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

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

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

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