Microsoft 365 Community Community Demos, 21 Apr 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Docker Loves SharePoint Framework (SPFx)

Description

In this 16-minute developer-focused demo, Aleksandr Sapozhkov defines a developer scenario: I work for many customers, and I’m asked to fix bug or contribute to a project. I don’t have dependency tools on my machine, nor am I interested in accessing potentially unsafe code. Virtual options – create VMs or use containers. See how easy it is to open a project in a safe, provisioned, light weight container located on your machine or in the cloud. Docker is only app required on your machine. This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on March 24, 2022.

Demo Presenter: Aleksandr Sapozhkov (Sopra Steria) | @shurick81

Supporting materials:
• Documentation - Getting started with Docker | https://docs.docker.com/
• Documentation - Run CLI for Microsoft 365 in a Docker Container | https://pnp.github.io/cli-microsoft365/user-guide/run-cli-in-docker-container/
• Repo - SharePoint Framework Docker images | https://github.com/pnp/docker-spfx
• Repo - personal-assistance | https://github.com/shurick81/spfx-demo-01

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp/videos

A

My name is alex, and I'm gonna tell a little bit about the containers and how you can make even greater experiences on such platforms as sharepoint, viva and teams etc. Whatever platform you're delivering to using spfx framework.

A

But let me get started with just a usual example usual case. For example, I want to I'm asked to join some project to fix some bug or improve some features. So what I usually do, I'm cloning a project like this, then I'm going inside.

A

And look in the structure, I can see that it's just a normal fixed structure, so node modules are not installed, so I run npm install like this but hey. I don't have any npm on this machine and I don't have node gs on my machine and the reason why I don't have it.

A

There are a few reasons. First, I pursue consistency so, whatever version we used for production for building and shipping production, I want to have the very same version for every developer in a team, and that means, if I work for many different projects, I need to have a different versions.

A

I need to use different versions on my laptop and, of course you can solve it with uh such tool as nvm, but I'm involved in many other projects, not just node.js and spfx. I work with python and terraform and pnp powershell, so I don't want to just have a niche solution for this consistency. I want to have a generic solution that I can use for any technology that I work with.

A

Second part is clarity. It means that I don't want to always keep in mind what dependencies are. I already installed on this laptop and what dependencies are not installed. I have pretty few laptops believe me and I I work with pretty few projects at the same time, so I don't want to always keep this picture in mind. I I want to focus on some more exciting things and the the last but not least, is an s is a security aspect.

A

It means that when I run some co run a code from from repository.

A

I don't want to even spend time on considering whether whether this code is trusted, whether it is mature and safe to run, I just want to run it in kind of isolated way, so it cannot affect my my laptop and cannot affect repositories. Other repositories that I have on my laptop and, of course, I work for many different customers, and I don't want to expose the expose repositories kind of between each other.

A

uh So to address that, if you put these demands into extremum, you could use some virtualization. Of course you can create a virtual environment, for example, a virtual machine for each project. uh Every developer will have a dedicated virtual machine for every project and, for example, uh those developers who work with the so-called iit assistant project. They will have this virtual machine or they will have the very same virtual machines with the same software. We could.

A

We could create a template of this virtual machine right. We could verify this template and then we could distribute this virtual machine across across all developers and they will have a consist very consistent experience uh very same version of node.js and npm and whatever, whatever dependencies are necessary for this particular project. And if we work with a few projects, then we could use a few virtual machines that is totally viable.

A

A lot of I work a lot with sharepoint uh on premise, and I know that uh uh well, we deliver such projects for uh sharepoint and premiums where we uh develop on virtual machines and we automate preparing images for virtual machines. We automate provisioning. So this is all automatable no worries, but still virtual machines are quite heavy and even for running spfix, you will need some about 10 gigabytes of disk.

A

For this virtual machine, you will need about four gigabytes of ram, etc, and even if you automate everything completely, you will still, uh there will be still some uh inconvenient situation for uh developers when they when they want to expose the machine on or refresh it or even start and shut down. So this is uh not optimal. Really, even if you invest in a development and uh in in this environment, there will be still uh some not satisfaction from from the developers.

A

uh What we suggest instead is using containers, which is another another way of virtualization, so it it. It has the same idea of virtualization as virtual machines, but it's just a bit different okay, so you still can create uh so-called container images and you can pre-install software there. For example, you can install uh you, can use linux very specific version, uh node.js and and npm, etc, and then, from this image you could create uh containers.

A

So these are also virtualized environments, again they're, similar to virtual machines, but a bit different. Okay, maybe enough token, let me show you how it works and you will see by yourself.

A

So from here from this folder, I'm opening the same the same project in github the same as we just cloned and here is the guide. So I just need to run a few commands here first to assign some permissions, and I need to put my pseudo password here and the second line is actually starting docker.

A

So for running this command, I need a docker to be installed on my machine, and the point is docker is the only what I need to have installed on my machine when I work with when I work with sharepoint, when I work with uh python, when I work with golang, I don't install anything I'll, just use docker and that's the only thing I I have okay, so I run it and boom it's created already. So right now, with just one line, I created a virtual environment on my machine and it's up and running.

A

I have npm on this environment already and if we look, for example, what happens behind the scene, I run stats and I see this container is just taking about eight megabytes of memory. What do you say about that? So this is a virtual environment, isolated with pre-installed software, and it just requires uh eight megabytes for running it all right. So let's go further and I will go and go on and install the modules.

A

And as it will be installing, let me go back to slides and uh tell you a bit more about this command that we just run. So we told docker to create this environment. We told it to uh to map.

A

My directory that I have locally on my laptop. We map it to a virtual directory that there is on a virtual disk space on on this container.

A

So when I run uh command in in this container, it will work with the with my files, with my sharepoint framework files, uh just not even understanding that it is really working remotely.

A

So that's what we did here and then we say we need to expose two ports which we need for chrome or browser to work with, and we need to create this container from this image.

A

I hope you can see it well, uh but the image is uh a spfix image that is uh promo, promoted or offered by uh np. Community spmp community is maintaining this image uh of the docker and we use it all right.

A

Let's get back here, so it installed modules it created uh ssl certificate. Now I need to run gulp serve.

A

The only thing remaining is that the certificate was created inside this virtual environment, but since I will be using a browser on my real laptop, I will run this snippet and install the certificate on my laptop here. You go.

A

Now everything is up and running and I can just go ahead: open, workbench and add web part and start contributing. So you see I didn't have to install any additional software. I came to the project just using just having docker on board and I started contributing already. I can go and fix debug.

A

Okay. What do I do here? I go.

A

Let me open the this project in visual studio.

A

A

And, for example, I want to change some parameter here like I want this password that is generated by this web part. I want it twice longer.

A

That's what I was told by my project manager leave update, is working and or maybe not working, ah let's refresh it yeah. Now we have it twice longer, uh so that is it. uh That was easy, but you may you might think well, yeah, I'm a sharepoint developer, I'm already demanded.

A

Why should I spend time on learning this docker fancy things and maybe you're right?

A

Maybe you don't have to if someone prepares the project for running, for example in codespace, which is a fancy technology fancy feature of github here. This is another example. You can just use.

A

You can run this container somewhere in the cloud before we do that. Let me close this container that I run so I just type exit, and now we don't have any containers running at all. You see it was easy, create it like this and then, when you exit it's just removed, it's disposable and very lightweight. You don't need to wait until it starts and shut down all right, so this project is prepared for code spaces, and I go like this.

A

I start the code space. This is a container that will be running in a git github data center. So from this I want to connect to visual studio.

A

Open visual studio code.

A

A

From here I just want to run create a new certificate.

A

And I have modules installed before because I used this workplace or code space yesterday, so it's still holding my files here. I don't need to install again.

A

All right and now I run gold serve no browser.

A

And let's check that we don't, we don't have any containers running on my laptop, so I don't have to install any docker anything on my laptop to be able to develop in this solution. So I just go with visual studio and say: okay github run this container for me and then then it's just running now it's running and I need to run the same snippet for uh handling certificates on my uh browser and we are, we should be good to go. Let's try it out.

A

Here you go, you see, uh that's the future, so um I don't have anything more to present right now um and I will. I will appreciate all the questions. If you put them in the chat, uh I will be glad to to answer them uh back to you, patrick.

B

Great work, thank you alex for that uh really exciting to see uh more and more uh use of docker in these containers across the different pnp solutions and across the different methods of doing development, really cool cool stuff. I need something that I could personally learn a lot more about. So it's exciting to see these demos coming and really motivates me to learn more.