Microsoft 365 Community Community Demos, 26 Nov 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Speed up developer onboarding with GitHub Codespaces and VS Code Remote Development

Description

In this 16-minute Developer-focused demo, Garry Trinder concentrates on how to use Containers for isolating development environments between projects. This is the same remote workspaces model used by GitHub Codespaces that enables the use of containers directly from cloud without any need to install specific apps locally. This is a great way to get your development machine configured in order to contribute to PnP projects. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on November 26, 2020.

Demo Presenter: Garry Trinder (CPS)| @garrytrinder

Supporting materials:
• Document - Remote development in Containers | https://code.visualstudio.com/docs/remote/containers-tutorial
• Site – Codespaces | https://github.com/features/codespaces
• Document - Developing inside a Container | https://code.visualstudio.com/docs/remote/containers
• Document - Configure Codespace Environments | https://docs.microsoft.com/en-us/visualstudio/codespaces/reference/configuring
• VS Marketplace - Visual Studio Code Remote - Containers | Remote - Containers - Visual Studio Marketplace

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 gary trinder, I'm a microsoft, mvp, pmp team member, I'm here today to talk about how to speed up developer onboarding, using visual studio code and remote development, and also how that works with the github code spaces. What we'll first do is we'll basically just go through what remote development actually means.

A

Remote development actually means developing inside a container. In this um scenario, it's a docker container, and so what we're doing is we're creating an isolated environment where we can install all of our dependencies and for our code to run in without actually having to install anything on our on our main machine. That means, if we've got multiple projects using containers, we can swap between different containers, use different versions of frameworks without having the headache of trying to manage um all of those different versions on on one system.

A

The one thing that sets the visual studio code approach aside from just developing with docker containers, is that the extensions within a visual studio code allow you to basically define your development environment alongside your code. So when you clone a repository, you've got files within that project that will define the dependencies for you to be able to build run test.

A

Do anything that you might need to do with with that that project and that's a really powerful thing, especially with working in open source as well, because you go to a different project, everything's different, there's, different versions, and it can become quite painful to get your machine ready to uh to actually develop against some of these projects.

A

So it's very easy to get started. So there's a there is a very good tutorial. Essentially the prerequisites are you need visual studio code?

A

You also need docker installed on your uh on your machine, and you also need to install a visual studio code extension called the remote containers, which makes all of this all of this work, and what I'm going to do, I'm just going to jump straight into a scenario really and I'm gonna show you the scenario of of how we are using visual studio code, remote development to really help with onboarding to the cli for microsoft. 365 project. So you know we're an open source project like every other project.

A

We have some build instructions you can clone. You need specific versions of node. That is the bare minimum. You can just build. You be able to contribute, but if you start to look at some of our guides, you actually need a bit more, so we actually use python uh for generating our documentation. So that's another dependency um that that you need to install we're, also a pro that is cross-platform. We work on different shells, so it may be that you want to install powershell as well.

A

Another thing you need to install so what we've been doing is looking to use this technology to really simplify this this process. So I'm on my machine at the moment, I'm actually using the bsl too, um but for the moment just think of this as your your desktop machine, if you're in on windows you're in on mac, this is your. Your machine. You've got docker running I'll, just show you that docker is running on here.

A

So there doc service is running. I don't have node, which is needed for um for development. I also don't have some of the package managers for for python either. um So what I'm going to do is I'm just going to open up our project, um so I've got the cli already already cloned down onto my machine. So there are the source files, I'm going to open visual studio code.

A

So here is my project and I'm just going to call out there's a few extensions that I've got installed. We've also seen down at the bottom that visual studio code knows that there's a development environment within this project that it's actually prompting me. Oh, do you want to open it um in that development environment, and this is defined by these files within the dev container folder. So we have a devcontainer.json file. This describes our basically our development environment. We can define its name.

A

The docker contain all the build instructions, the extensions that we also want to use. So this is going even further and saying well, actually we're not even going to standardize the dependencies of our projects, we're actually going to standardize the extensions that people can use as well and we can pre-install those. So again we we're trying to help you get up to speed as quickly as possible and we've also defining what shell to use and also when this image is built, we're actually going to run all of the install commands for you as well.

A

So when all this is finished, you will literally just be able to run the code and be able to develop and be able to test and be able to run the documentation as as well.

A

So if I go to the doc file, so one of the things that we we have done here and so we're using a public image, we're actually using a powershell image because we want powershell to be bundled uh for you to be able to to use- and this is using the latest version of ubuntu uh we're installing all of our dependencies.

A

So we've got dependencies on python, some other tools um as well, uh we're installing our packages for building our documentation, creating a specific user to develop with, and also we're actually going to customize the the shell we're going to add extra features into the command line so that when you're using it you've got auto complete for git commands and you've got a very good history. You've got syntax highlighting, so you know when you're going to execute a a command on the command line. It's it's going to work.

A

If I look at the extensions one of the things that I said was a dependency was docker to be installed. You also need the this package here. It's the remote containers when you install this extension, you'll find that there'll be a little icon like this down in the bottom left. That means that you're kind of ready for for using uh remote development, so that needs to be installed. First.

A

So by installing that it also gives us options in the in the command palette that we can open, and I can then say I want to reopen this project in the container. So now it's opened a new instance of visual studio code and we can see that it's starting the dev container.

A

So in here you can see there are tons of instructions that are happening. So what it's doing is just checking that docker is actually installed on the machine and then it's going to start and instruct the build for the uh for the.

A

A

There we go so that has built my image and I'm now running in a remote container. So I'm going to open my terminal, I'm using the z shell prompt. You can see that my prompt now has completely changed from what I had before on my machine, which was this um oops. Let's just move back back to my terminal.

A

I can now see that I have my version of node.

A

I can run commands so I can run the watch. Oh he says that was not a very good example.

A

Oh, this is where the demo gods are getting me and every time I did this before it was working.

B

It doesn't matter how many times you try, it's always the life and production. When it actually fails, that's happens. It is so.

A

We'll just let that run and then hopefully there we go so the install just didn't quite run on that one, um but that one's running and I can then uh also open a new window. I can run my docs mk docs serve, uh so you see that little feature there is the syntax highlighting. So I know that mk docs is in there. I can hit set.

A

Oh if I actually go to the right, that'd be fine, that's now running and when this is running and it's building all our documentation, one of the things is we're running in a container, and obviously this is going to build documentation. It's going to be a a website.

A

What a nice thing about this is is it will automatically detect that the container wants to open a port, and it will actually give you the option to say. Are you happy with this, and it will create a tunnel from your local machine through to the uh the service that is running within the container.

A

In a second when it gets to that, we've got a lot of docks, so it's probably churning through quite a bit.

B

So as it's doing that, just to kind of over uh simplify things for those who don't quite understand what is a docker and everything else, so this is kind of a virtual machine which is then being set up for development without anybody installing anything to the host machine is that right way? Yes,.

A

It's really pretty much yeah, it's it's! Basically a you you're running everything on one host uh rather than having multiple virtual machines and then deploying code to them. uh Docker is providing you with that space that um isolated area for you to put your source files and dependencies.

A

So there we go. It's basically exposed that the port is now open, so I can actually now see our documentation and that's running from here. If I make any changes, I can then just refresh the page and it's there and it's running, um but I've not had to then go through the pain of trying to configure what python version I need what dependencies I I need for for this to run as well. um I'm sure if anyone's tried to install pi different versions of python on one machine, it's an absolute nightmare.

A

um So this makes it a hell of a lot easier.

B

This is a family show gary family, sorry.

B

But yeah so there's a one question which is: is this virtual machine set up in nashville? No, it's actually virtual machine or a isolated virtual machine locally in the developer's box, but yeah.

B

The beauty of this one is that now, if you have multiple different projects and multiple different customers and some of them require npm, whatever version, some of them require different setup of installations, you can isolate the setup and environments in docker and having this resource to the code and and the kit uh github integrations and which will basically it it makes it easier for people to get started than in the github projects. So the project can define that these are the basic setup and configuration environment of value, variables and installations to get started and poof.

B

While your environment is ready to go.

A

It's exactly that your option is to have multiple versions of node installed on your host machine and by using nvm, um which you know david is going to be uh david hughes, showing here how to do that in their career sharing. This is just a different approach and, interestingly, to take your point about. Is this running in in azure? No, that was running on my local machine to take this a step forward using the same technology.

A

Github code spaces, which is currently in preview, is essentially going to use this development environment definition that's in the project and allow us to have a one-click setup for development environments. So as a contributor, you can just come along to the project and hit a button, and it will build everything for you so here I have a branch that has um my dev container files in here and where I'd usually come to actually clone the repository.

A

I've got an option of opening code spaces because I signed up to the the preview and I've already got one pre uh created here. So I can click this and this is creating the container, but in a machine uh I think it'll be in in azure, but completely remotely. So I could be using an ipad for this with just a web browser and I'm able to effectively create my development environment within a browser and have the same experience as if I am running locally.

A

So I've got visual studio, open and, albeit in the browser, it's checking out all of the code from the repository. It's also built all of the dependencies as well. um I included those in the uh in the code space and, if I remember rightly, to open my terminal prompts. I have exactly the same terminal prompt. I can run the npm watch.

A

Oh now, npm run watch.

A

I can start our.

A

A

So that's going to build the docs and in the same way, that it opened a port on my local machine, so I could access it locally because I'm running in github code spaces, it's actually going to create me a a website. It's going to create me a url which then I can access the same documentation but completely remotely.

B

And what's the cost related on that.

A

So the cost at the moment on preview is it's free. Once it's out of preview, it's going to be cost per usage, and so it'll be based on how many code spaces you want to create and use different prices for different specifications of code spaces as well. I don't think there's many details around that, but the the one thing I like about this is that by using remote development locally, even if you've not got code spaces at the moment, you can still benefit from the isolation of working in this kind of way.

A

It just makes things a lot easier to handle your your dependencies.

B

Absolutely absolutely cool are we? Are we good gary? We are good, yes, excellent, so really cool and the basic idea of this one is behind well the larger way of thinking this is that index click of a click of a button in the internet browser you can set up a vm or an isolated, it's kind of a vm, but it's not vm, but it's a virtualization in the cloud which has everything but needed for development.

B

So nobody has to install anything locally and that's mind-blowing, because you can just move between the projects regardless of the project dependencies with the click of a button and you'll say something else, that's really great. It's it's a really innovative way of doing things, and obviously, let's see when this will catch in the community as well.