Microsoft 365 Community Community Demos, 14 Jul 2022

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Getting started on using GitHub Codespaces with your SharePoint Framework solutions

Description

In this 17-minute developer-focused demo, Emanuele Bartolesi opens with a great premier on GitHub Codespaces cloud-based development environment. What it is, what can you do with it, limits during beta, and cost. Step through creating and configuring a basic Codespaces container for a project. Then learn about the presenter’s template - SPFx GitHub Codespaces Container, click the “Use this template” button, and step through setting up a new container pre-configured for your SPFx project in minutes! This PnP Community demo is taken from the Viva Connections & SharePoint Framework Bi-weekly sync call recorded on June 16, 2022.

Demo Presenter
• Emanuele Bartolesi (SoftwareONE) | @kasuken

Supporting materials
• Repo - SPFx GitHub Codespaces Container | https://github.com/kasuken/SPFxGitHubDevContainer
• Site – GitHub Codespaces - Blazing fast cloud developer environments | https://github.com/features/codespaces
• Documentation - GitHub Codespaces overview | https://docs.github.com/codespaces/overview
• Repo - GitHub Codespaces (Default Linux Universal) | https://github.com/microsoft/vscode-dev-containers/tree/main/containers/codespaces-linux
• Documentation - devcontainer.json reference | https://code.visualstudio.com/docs/remote/devcontainerjson-reference
• Repo - VS Code Remote / GitHub Codespaces Container Definitions | https://github.com/microsoft/vscode-dev-containers
• Register - Sign up for the Codespaces beta | https://github.com/features/codespaces/signup

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community - http://aka.ms/m365/community

A

Thank you very much for having me today. It's really a pleasure to be here, and uh so, let's start to see what what is the topic for today today is. The topic is because co-spaces and sharepoint framework, because, yes, we can use co-spaces and support framework to develop our new. Let's say your new project in the next weeks or in the next month or year, but first of all, what is it.

A

Spaces is a kind of uh development environment in the cloud, so you can access your dev environment from anywhere from your mobile phone from your ipad chromebook from a mac, another another machine, a virtual machine, whatever you want- and it's not easy to develop, of course, from a mobile phone, but you can do it if you want also from an ipad, it's not easy, but you can do it and uh in addition, uh what is great with gitapco's pieces?

A

It's also the configuration time because you don't have to configure a new machine if you hire a new developer or if you switch time to time to one machine to another. Like me, for example, I have a at home my gaming machine machine for working, but I have also three laptop one is for working and the two others are for netflix, but uh yeah. I can.

A

I can work also from that machine because I use cosplaces, for instance, so your developer environment is on the cloud and it's very easy to reconfigure everything and in addition, you don't have any local repository. So this is great for two reasons. The first reason you don't have the node modules folder in your on your machine and we have a lot of nodes folder in our machine and the second one is the the letter property because uh you don't have the source code on your machine.

A

So if someone steal your laptop, you don't have any problem about the intellectual property of the source code. Okay and yes, every developer can use his own private cospaces because you are the only owner of your spaces and no one can access to your space directly. So you cannot use as an excuse like it works on my machine and then someone else touch it because it's not possible to access to other cospices and you can work directly online in the browser.

A

If you want, you cannot have, let's say user studio code or visual studio, install it on your machine. So this is why you can work directly from your chromebook or your mobile phone, but you can also connect cosplaces and visual studio code with uh one click if you want, but I will show you later in the demo. Okay and it was also in the user.

A

Studio 2022 is in preview, but uh it works as well and you can configure your container as you want, and I mean if you want to install the node version and 14 or 16, or you want to install the yeoman latest version on the previous version. You can configure your container and it's also on my demo later, because spaces is in general availability at the moment.

A

It's not in beta anymore, but if you were in the beta, you cannot still access your container in beta and with the kind of limitation. But yes, it's possible okay, but how much is cost is that because spaces is cheaper or less than a new machine for working?

A

And it's not it's not very much honestly, because if you let's say take a machine with two cars for instance, and you work for 20 days, you spend 14 each month, so it's very it's very cheap, honestly and uh yeah, and also you have to pay lots of storage, but the storage is cheaper than the machine. So for one gigabyte you spend 0.07 dollars.

A

So nothing at the moment you can access cospaces from your organization account it's not possible at the moment to access cosplaces and use cosplaces for your personal account, but maybe in a few in a few months or years who knows it is possible also to use as a private user, these kind of spaces? Okay.

A

So let's see I am a developer, so I like to share some code as someone sadimus honestly, instead of talk so here this is my github account and if I go to my meetup account- and I create a new repository. Oh sorry, and now here a new repo here called sap001, something similar. It's a public okay. I create repository just like that. Okay, if you are spaces, enabled on your uh on your machine, okay, you can uh just let's say it's better. If I create sorry, I create a new one.

A

I forgot to check.

A

Either read me an ignore file like node.js, node and readme, then create repository again.

A

Sorry for that and here, if I click on code, as you can see here at the local as always- and I have also here my spaces- tab, okay and here from cosplaces. If you have, let's say spaces active on your account, you can create a new spaces directly on the main. So if I click here, I have a.

A

Guitar is creating for me a new spaces and it's built is connecting okay. It takes me maybe more or less 30 seconds or uh okay, less than 30 seconds, maybe three seconds at the moment, and here you have a lot of stuff installed by by default.

A

I mean I zoom a little bit, so you have a python gis, dotnet and and if I click here not mv another version, I have a latest version of node, for instance, and I have also an nvm they're, not version manager, just install it python and stuff like that, but it's not ready to for a sharepoint framework in this moment. Okay, so, but you can configure your uh let's say container as you want, as I mentioned before.

A

So if I click here and I click container from the spaces better spaces, I can configure my development account development containers. Sorry with a lot of uh let's say: personalization. Okay, so I can show you here: excuse your uh alpine or a debian, kubernetes or star for that, for instance, I can also choose alpine okay and the version of alpine and github create for me a new dev container and I can create.

A

I can use this container and then configure my container from this file, but, of course, for sharepoint framework you have to install, for instance, yeoman gulp a lot of stuff okay. So it's not, let's say useful that every time you have to create a new dev container, json, okay. So this is why I create this template.

A

It's on my github account and every time I don't like to let's say to show my to show my stuff, because I know it says, but I it's on my github at the moment. So if you want you can you can follow the project and customize your uh environment? If you want- and here I created a new folder called dev container, so this is a kind of uh let's say best practice. Okay, so here in this folder I create two stuff. One is a json file.

A

Call it that container json and another one is a script file: okay, the dev container- and I I define that my I try to zoom a little bit. Sorry, uh I take the image directly from the our baldic image from uh from docker with the latest version of the sharepoint framework. Okay- and this name of the image of course- and I also open directly the port that we are using for our sharepoint framework project.

A

Okay and you can also add attributes to the port like the name or yes, this label is just a name or stuff like that, and then you can also personalize your visual studio code because, for instance, here I install a lot of extension directly from user studio. You use a pseudo code without every time you add to this project, this exception, okay. So in this case I take the helio uh extension pack for a sharepoint framework and I install everything from there.

A

So in this case you have a your uh let's say, environment up and running in 30 seconds for a sharepoint framework. Okay and at the end I call a bus script that is located in the same folder. Here, spf setup, and also here I call npm install so I don't have every time to initialize with a new npm install every time my new project and I also trust the dev set locally.

A

Okay and time to time, do you have a problem with this comment, and uh so you have to rebuild the container okay, let's see if you are lucky later during the demo? Okay, so how you can use it this template. I mark this repository as a template and if I click on use, template use this template. Okay, I can create a new repo, okay, it's public, but it's okay, and if I create a repository from here, as you can see here, I have a new repository with the same files as before.

A

Okay- and here I can click again here cross places and I can create a new spaces and from here when the let's say the container is ready in this case.

A

It takes more than 30 seconds time to time, because uh it needs to download the image from docker and instance, it's a new container and stuff for that, because the container the default container is just allocated from github. So it's more, let's say fast, but, as you can see here, maybe in less than one minute you have a development environment up and running, but only the first time, because if you open again because spaces after after maybe or maybe after the first time, you have the same environment up and running in the 20 seconds.

A

Okay- and from here I have my environment, so I can start to work with uh with the shepherd treatment directly. Okay, for instance, I can create a new project. Okay, no and from here I can okay, the name of solution is a web part. Hello world react web part so, and you start to build everything, because I I am everything is solid on this container, as I mentioned before, yellowman gold and stuff like that, and I also trusted the certificate. Okay. In addition, I just opened the port here in, uh as you can see here.

A

I have this kind of. Let's say this link is just for you and github try to locate it with your github account at this link. So it's not public, so it's just for you, okay and you cannot access only from your account to this link, uh I think is, is not finished but of course also. This is a let's say. This task is more faster than on your local machine, because you are in the cloud, and uh also the disk for from github is, is a is faster than your hard disk.

A

Of course, now it takes a little bit, so I can open uh a previous project here. Maybe no it's almost finished now. I can open my all the whole project here and here just the container here open. So I can open the container directly. You see. Okay, I just opened it here in another screen.

A

Okay, and as you can see here, I have my project up and running, so what you have to do here. Of course it's go here on server and change your uh server, your initial page with your environment, the environment, okay and then what you you can do is uh open. The terminal also here view terminal your terminal and launch the cool cell. Okay, it's very easy. So it's like you work on the local machine and after let's say, and one second two seconds five seconds. I don't know how many seconds.

A

Okay, you start to build your project and launch your website with uh your dev stuff. Okay, so and then for the rest is the same. I don't have too much time, but the last thing is: you can also use the browser version, but if you want, you can also open everything in an user studio code. If you have you just do your code install it, you don't have to open users to your code and then launch code spaces, but directly in front of spaces.

A

You you can open your code and, as you can see here, you start my visual code locally and you can use your visa studio code directly within everything installed, like your let's say, extensions and stuff like that, okay.

A

So this is what I like to share today with you and uh done here. So this is the repository and in this last video I share also my repository but feel free to open issues open to request. Sorry example request for that, and here you can find my and my contacts, okay, good.

A

Okay, thank you for your attention guys and I hope you start using gitapco spaces from tomorrow. Maybe I don't know very cool stuff. Coach space is a thing I certainly need to learn about. This was a great demo on getting started with that.