Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SPFx Team based Development using Docker

758 views

Published on

SPSLeicester

Published in: Technology
  • Be the first to comment

SPFx Team based Development using Docker

  1. 1. SPFx Team based Development using Docker Jenkins NS SharePoint & Office 365 Solution Architect #SPSLeicester 10 Nov 2018
  2. 2. Thank You To All Of Our Sponsors! #spsleicester
  3. 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. 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. 5. What is Docker?
  6. 6. Benefits of using docker in the SharePoint Framework development
  7. 7. Preparing SPFx development environment https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your- development-environment
  8. 8. Preparing the Docker Development environment https://hub.docker.com/
  9. 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. 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. 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. 12. Docker Image for your SPFx team https://hub.docker.com/r/jenkinsns/spfx/tags/
  13. 13. Lets do it https://store.docker.com/editions/community/docker-ce- desktop-windows
  14. 14. 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
  15. 15. 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
  16. 16. Things you need to know https://localhost:5432/workbench
  17. 17. Can't access workbench and bundles in SharePoint Framework 1.6.0/1.7.0 on Windows
  18. 18. Can't access workbench and bundles in SharePoint Framework 1.5.0
  19. 19. Next Steps https://docs.docker.com/engine/reference/builder/
  20. 20. 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/
  21. 21. 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

×