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

96 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

SPFx Team based Development using Docker

  1. 1. SPFx Team based Development using Docker Jenkins NS SharePoint Consultant #SPSSTHLM, Sept 1st, 2018
  2. 2. Thank you sponsors!
  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  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
  8. 8. Preparing the Docker Development environment www.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. Next Steps https://docs.docker.com/engine/reference/builder/
  18. 18. 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
  19. 19. Thank you!
  20. 20. Thank you sponsors!

×