Microsoft 365 Community Community Demos, 18 Jun 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Using Codespaces with SharePoint Framework

Description

In this 14-minute developer focused demo, Paul Schaeflein introduces viewers to Visual Studio Codespaces - a viable cloud-hosted dev environment (development container) accessible from anywhere. Essentially, Visual Studio in a browser. Connect to existing Azure DevOps or GitHub Repo. Developers can create a container and configure it as an SPFx environment. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) call recorded June 18, 2020.

Demo Presenter: Paul Schaeflein (AddIn365) | @paulschaeflein

Supporting materials:
• Using Visual Studio Codespaces for SPFx development | https://www.schaeflein.net/tag/codespaces/
• spfx-codespaces | https://github.com/pschaeflein/spfx-codespaces
• spfx-codespaces/.devcontainer/spfx-setup.sh | https://github.com/pschaeflein/spfx-codespaces/blob/main/.devcontainer/spfx-setup.sh

Resources:
• Learn more about the SharePoint developer community at: http://aka.ms/m365pnp
• Visit the SharePoint PnP Developer Community YouTube channel: https://aka.ms/spdev-videos

A

I want to cover a couple of tips: I've stopped using with SPF X over the last couple months or so using Visual, Studio code, spaces or I. Guess you could say github as well as well as react cooks. So a little bit about me. I work on 365, I co hosts a podcast. If you don't hear enough of my voice today, you can certainly find out more I will say that we recorded the gem of code spaces that earlier this week, so that'll be published in the next couple weeks.

A

So if you want to learn more, you can certainly get it from there I'm happy to answer questions on the Twitter and/or email happy to follow up any questions that you guys might have as well. So real quick I want to show a little bit about Cote spaces. I confirmed it's one word with one capital letter, so code spaces is currently public preview which lets you connect to a cloud hosted: development environment using the browser or vs code or Visual Studio and there's the link in there.

A

We can get these links posted up as well pretty straightforward, but the idea of course are on this. Is that Microsoft will then host or github will host a development container and you can connect to it using your various tools, so I want to switch first over to the web page and here's studio code spaces now I've connected using my Microsoft account that has an azure subscription. You have to connect to a measure via subscription and so I've done that you can see. I have no code space, so I'm gonna create a blank one now.

A

So we'll call this demo one for the moment and the idea on this is that you would come. You can't connect to a repository. I'm gonna leave it blank for now, just to show you what you get when you launch this and so I'm in the browser it's gonna go through and do all this work and then we'll eventually load Visual Studio in the browser. So you can see here online that Visual Studio comm is coming up. It's thumbies preparing my environment and off.

A

It goes well so that's kind of interesting, but at the end of the day, I want to be able to do something right, and so the first impression might be it's like a VM, so I can then do yo, T or yo Microsoft SharePoint. If I want. However, the the idea around this really is that perhaps you have a github repo already or a Azure DevOps repo that you would then connect to, and then you can work on that code.

A

So that's kind of the scenario that I typically do so next I want to switch over to visual studio code and I, have an empty windows and Visual Studio code here, and it would install the extension called remote explorer and this connects again to the same code spaces. Let me just do a quick refresh here and so I'm going to create a new code space. However, this time I'm gonna connect to a repo that I already have.

A

In this, repo has just an out-of-the-box one that 10 SharePoint web part. The recipe FX web part already created to it, and so the idea here, of course, now is I- would want to work on this web part or perhaps I need to review PR or perhaps I just need to make a quick change. My full development I don't have it locally, so this will go through and do the same thing now. If I go back to the browser one you can see here, it's done all its work.

A

It's created, I can do the terminal and if I look here and I do node you'll notice that what I get out of the box is that version 12 of nodejs, which is not what SharePoint is built on at the moment, however, it node version manager is installed on the VM, so I can do that information right to switch over to version 10. So now what I've done in this SPF xcode space is rebo. Let me switch over to that real quick that would be here.

A

I've created a called a dev container folder and in this dev container, folder I have a JSON file that describes the environment, and this is a couple of things that will all cover this, but the first one I'll talk about is it's doing the SPF X setup, and so, if I go back to this container and look at this script, what will happen is, after my environment is created, it'll switch, you know to launch node version manager, install version 10 and since I've reinstalled node for all practical purposes, I'm going to need gulp, so it'll do an NPM, install gulp globally under build version, 10 and then it'll run npm install against the project in the current directory.

A

And now, if I look in here, you'll see here that it's done the work it's gone through part of what code spaces does is it will talk clone. So if I look here so you can see it's on a git clone of the repo that I provided to it and then further out here now.

A

You won't see this because it's gross, but if you look what's happening in the lines you'll see that it has actually done downloading and installing node version 10 and further down is actually doing the door or the npm install for for gulp. I'm gonna then connect, and now you see the window refreshes and now in my code spaces list here on the side. It will show what connected it will show the project. Now it looks like it's building it again, but it's really not it's just doing a different connection, but here we are.

A

We now have our our SPF project. If I open this up here, I can do my gulp it alright. So that should work. Everything is fine. If I go back to my dev container file, part of what I've done here is I've configured forwarding ports. These are the ports that are used for the local workbench and if I go back to my extension here, you can see here. Those ports have been forwarded.

A

Now that you can do these manually, I can right click and create a new one, but the idea of using a dev container file is that I can have these pre-configured and let that work right. So if I were to run this now, I'm gonna get the problem, because the developer certificate is not trusted so I step. I have to do here.

A

First of all, I want to create the desert and when I run, this is now in this remote environment, I'm running under Linux, and it tells you so for Windows or Mac OS it'll automatically trust that, but for Linux will not so the file was created here in this folder right, so I'm gonna, because I run the browser. I have to run the browser locally, because I'm connected to a container that has just the Linux on it. So first of all, I'm gonna do is I'm gonna copy this OH.

A

My shortcut is to go up here. So it's slash home. Yes, online I've copied that folder from from where the the trust deficit does- and here is the certificate files right here right and so I can right. Click on this and download Mitchell studio knows that I am connected remotely so it'll. Let me do this so I just put this in my research folder here real quick and give it a name and if I switch over to that folder and you'll see paradis here now.

A

The next step is to is to actually install this locally in my machine, and so the command that would be run by the gulp task is to cert util on Windows oops I forgot to do this.

A

And so now I can my typical you're about to install certificate. Yes, now that I've done that I can view this in the workbench. So to do that, go serve I put these in my notepad, so I can paste them here.

A

Well, then, I'll run and gulp serve. Then, of course, we'll run start to our bench for me, and so let me open the browser. Real quick I haven't seen that the read X, the redirects don't normally work so great, so I just put in the workbench URL, and now you see boom there. We are with the workbench and we have our wonderful hello world. Web part. Life is good, so these steps are summarized on my blog I'll post.

A

That link in the when we're done, but that's tibia around Cote spaces is that I can connect quickly SharePoint framework or any environment running now right now, it's only Linux and Windows is on the way and again studio full studio for the six or eight of us who still use it. Yes and private people, but that's available as well.