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.

Building SPFx Solutions using Docker

117 views

Published on

Building SPFx Solutions using Docker

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Building SPFx Solutions using Docker

  1. 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. 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. 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. 4. What is Docker?
  5. 5. Benefits of using docker in the SharePoint Framework development
  6. 6. Preparing SPFx development environment
  7. 7. Preparing the Docker Development environment https://hub.docker.com/
  8. 8. 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
  9. 9. 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
  10. 10. 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
  11. 11. Docker Image for your SPFx team https://hub.docker.com/r/jenkinsns/spfx/tags/
  12. 12. Lets do it https://store.docker.com/editions/community/docker-ce- desktop-windows
  13. 13. 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
  14. 14. 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
  15. 15. Things you need to know https://localhost:5432/workbench
  16. 16. Can't access workbench and bundles in SharePoint Framework 1.6.0/1.7.0 on Windows
  17. 17. Can't access workbench and bundles in SharePoint Framework 1.5.0
  18. 18. Next Steps https://docs.docker.com/engine/reference/builder/
  19. 19. 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

×