Introduction to GitHub Codespaces

Part 1/2

The speaker provides an insightful exploration of GitHub Codespaces, starting with an introduction to its concept and practical applications. It delves into the functionality of codespaces, highlighting its ability to streamline development processes and accommodate diverse team setups. The discussion includes a comparison with alternative platforms, offering insights into codespaces’ unique features. A walkthrough of setting up codespaces is provided, covering repository creation, configuration, and tool installation. Additionally, the transcript demonstrates the creation and configuration of a codespace, emphasizing its flexibility and cost-effectiveness. Overall, the transcript serves as a comprehensive guide to understanding, setting up, and optimizing GitHub Codespaces for efficient software development workflows.

Summary

Introduction to Codespaces:

• Overview of what Codespaces on GitHub entails, its benefits, and potential usage scenarios.

Explanation of Codespaces:

• Discussing Codespaces’ functionality, advantages, and suitability for various development environments.

Comparison with Alternatives:

• Comparing GitHub Codespaces with other similar platforms like AWS Workspaces and Code with Me.

Setting Up Codespaces:

• Walkthrough of the setup process, including creating a new repository, configuring settings, and installing necessary tools.

Creating a Codespace:

• Demonstrating how to create a new codespace, understanding its unique identifier, and accessing it through SSH.

Configuring Codespaces:

• Exploring configuration options for codespaces, such as selecting machine types and managing costs.

Podcast

Check out on Spotify

Transcript

0:00

Hey there, hope you’re doing well. In this video, let’s take a look at GitHub Codespaces. Let’s just understand a little bit at a high level about what they are, how you could use them, how you could get set up, etcetera, etcetera, right. Without further ado, let me just get right to the actual content of the video.

0:18

So before we get into the weeds, at least to the extent possible in a short video, let’s just see what Codespaces is like. So if you go to GitHub Codespaces, they, you know, if you can just peruse through the first homepage, it tells you that it’s essentially using VS Code in the browser, right.

0:41

You could also hand it off to your desktop but if you want to understand this really quickly if you’re hiring contractors or remote workers and if you want to get started really quickly, in other words, you don’t want to ship a machine to them. Maybe they’re not even located in the same country as you are and you want them to be up and running in a few minutes from when they actually get started, right?

1:03

There’s many ways to skin the cat, but this is one of the ways which actually works quite well so you can read through the documentation. I typically don’t state the obvious, at least what I think is the obvious in my podcast, so I’ll just give you the practical usage of it, at least to the extent we can see in a short video.

1:21

Again, the documentation you can read up online, but as this page says, essentially you can spin up new environments really quickly. And depending on the kind of laptops you or your team has, this can actually be a whole lot more powerful, right?

1:37

How much computing power you need in here depends on the type of work your team is doing. But sometimes I’ve seen that even developers today in 2022 have like 8 gig machines with like 4 cores, which is almost salvageable, if you will.

1:53

But if you’re doing 10 things at the same time, if you don’t want to shut one down before you start the other, it becomes problematic, right? And hardware is a whole lot cheaper than human resources. So I always propose that you provide people with the best hardware that you as a company or an individual can afford.

2:12

So you can go look through these pages and in terms of comparison what are the alternatives, right. So GitHub Codespaces is, I would say it’s a little bit like AWS has something called Workspaces, but I believe they also have something called Cloud 9 if memory serves.

2:29

We haven’t used that, but I think that is very comparable. Maybe right comes it’s apples to apples person I believe with workspace, GitHub, codespaces. AWS Workspaces is probably slightly different and it gives you virtual computing power, the whole machine and whatnot right?

2:46

But you can look those up and again there are even more alternatives if you want to. If you’re like a Ruby Mine user, you could use Code with Me, which is, you know, you could do pair programming or more programming with the other developers in your team via the editor.

3:05

So with Ruby Mine, you do it within Ruby Mine or IntelliJ, one of the family of those JetBrains editors with Codespaces, you’d be doing it using VS Code, right? So that’s what we’re going to see today, right? So I did a bit of setup already because sometimes it’s kind of not easy enough to do it while you’re recording it, just because you run into some issues and you have to get past them.

3:28

So there is a little bit of setup done but I’ll try to jog my memory and show you at least most of what I recall doing. Okay so first thing is when you go to GitHub and you have to create a new repo. I picked up this example.

3:45

You can create these base repo on a template. So GitHub provides templates and this is the one that I had picked up right. So you go and again I since I’ve created this I might be forgetting the actions that I’ve performed. But if you essentially go to GitHub, let’s say if you go to GitHub.

4:04

Create new codespace or something like that. Let’s see what it comes up with. You go to this page. It’ll tell you that you have to go through a few steps. So just look at this page and it’s pretty well documented.

4:19

I think I may have installed something and I probably also went to like my GitHub settings. Let me see if I go to GitHub. And then if I go to GitHub settings here. Oops, where is that?

4:36

Yeah, and if I go to codespaces, I’m trying to see what I did here. My apologies, I don’t exactly. It was like a few weeks ago that I did the initial setup. It’s not terribly difficult.

4:51

You can go through the documentation. So I’m going to tell you what I remember of what I had done. So I had to set this up and maybe I’ll do a subsequent video, but I actually showcase the settings and the configuration side of things.

5:07

Maybe. Maybe I. Remember, maybe I don’t. I do recall having to set up like a billing plan for codespaces. I don’t know if I did it under my personal account or a company like Snapal account. But anyways let’s, sorry the last two minutes have not been super productive in the podcast but at least it hopefully gave you some indication as to what this is.

5:33

You can go here and just go through the procedure of the process. I believe I had to install like the GitHub maybe some CLI to be able to run these commands. So I essentially I did that right to establish myself as a codespace user if you will right?

5:53

And then I think this is where I went creating new codespaces and after I let me go back here, let me just jump ship. For a second, let me do GH. And it’s going to give me the usage I’m going. To say GH codespace.

6:14

Right. Yep, OK Yep. So using this you can actually create a new codespace. I guess you could do a create dash R you give your owner that’s like snow pal slash something and then you can do A-B to just create a new branch essentially, right?

6:29

That’s probably what I had done. So I created this. This just went through this and created the codespace and at that point let me close these. Other windows. Let’s go back here and what I did with. Essentially I created a very simple Next app.

6:47

I mean it’s super simple, like maybe a page, you know, maybe. I’ve probably found an example somewhere because the essence of it was not so much what the app does, it’s more to understand how you would actually build something, you know, using codespaces right? So I created this repo going back to this GitHub let.

7:05

Me go here, close this one. OK, so I created this repo off of this high code for codespaces so you can take a look at this one. They might have some, you know. Like it says it’s a quick note project template for demoing codespaces.

7:25

That’s literally what I had essentially used right? So I created this basic repo. It’s it’s a very. I mean I probably have like maybe no changes or minimal changes. I created the repo and then I had a local Next app that I was trying out for something right.

7:42

So Next.js is a react framework for building react apps. Essentially TypeScript apps. If you want to do server side rendering and whatnot you could use Next. I’d probably do a different podcast just talking about next as a framework. But essentially I had something local and I I want to just try to get that running on GitHub codespaces.

8:03

So after I created this repo I did a few things, but let’s go step by step and again, I don’t have like a script written down and I come to this. So this is more like a developer podcast and if you watched my other podcast you probably are with me and you hopefully are not lost at this point, right?

8:20

So let’s say let’s start here. Let me go clear my screen. Exit out of here. One of the first things we have to do is we have to, you know, do a GitHub Codespace. I’m trying to, I’m going to SSH into my actual codespace here.

8:37

Right? And as to what this actual codespace name is, I’m trying to remember where actually that comes from. Maybe, maybe we’ll we’ll go back to it. You know, not in any particular sequence.

8:53

I’m trying to think how where I where it actually told me that this was the name of the codespace, but essentially. You know what? I’m just curious now. I’m really curious code.Namespace codespace is sample. That’s part of the repo.

9:09

That’s my username, the company name. The account codespace is sample is the repo. And then this unique ID must come from somewhere. You know what? Maybe you can do a GitHub codespaces list. Is that what it is? Oh yeah, right, so I can do a.

9:26

This has been a few weeks. Memory’s not super clear anyway. So if you do a CS, let’s do a CS and see what the usages are. Just like we create one. I did a list and this is the only codespace have. That’s exactly where you get that from.

9:42

So you’re going to copy this and then you go and do SSH and as you see that it basically. SSHed into that and that’s like a Linux machine and you can configure and this is where I remember when we go to settings.

10:00

And maybe I will switch to your codespaces. And then single sign on, blah blah blah. Oh yeah, change machine types.

10:16

Yeah, I’d pick the basic one. You can pick like 4 cores, 8 cores, 16 cores, you know, whatever you want, right? And the cool thing is, again, if memory serves me right, you only pay for the time you’re actually using it. So you could get a really cool machine and then once you’re done, you shut it down, right?

10:32

So then you should be, you shouldn’t have to worry about paying when you’re not actually using it. So it gives you the luxury of sort of leasing borrowing?

Part 2/2

The speaker provides a detailed walkthrough of using GitHub Codespaces, highlighting its ability to facilitate remote development. They start by discussing SSH access to a Linux machine and configuring settings like machine type selection. The speaker demonstrates copying files between local and remote systems and connecting Visual Studio Code to GitHub. They emphasize collaborative coding capabilities, including hot reload features and synchronized code changes between local and browser-based environments. The speaker explores various commands and functionalities of GitHub Codespaces, underscoring its utility for onboarding new team members and facilitating remote collaboration. They conclude by expressing the benefits and potential applications of GitHub Codespaces in enhancing development workflows. Overall, the walkthrough aims to familiarize the audience with GitHub Codespaces’ features and benefits for remote development scenarios.

Summary

Introduction to Codespaces:

• Explanation of accessing and configuring Codespaces.
• Overview of selecting machine types and payment structures.

Connecting to a Codespace:

• Steps to connect to a Codespace using SSH.
• Configuration options and machine types.

File Transfer and Setup:

• Secure copying (SCP) of files from local machine to cloud server.
• Installing dependencies and running the application.

Visual Studio Code Integration:

• Connecting Visual Studio Code to GitHub.
• Using remote windows to access Code Spaces.

Collaboration and Development:

• Collaborative coding features, including live updates and hot reload.
• Benefits of Codespaces for team collaboration and onboarding.

Additional Commands and Features:

• Overview of various commands for managing Codespaces.
• Exploring features like port listing and log access.

Conclusion:

• Summary of the benefits and potential applications of Codespaces.

Podcast

Check out on Spotify.

Transcript

0:00

Exactly where you get that from. So you are going to copy this and then you go and do SSH and as you see that it basically SSH D into that and that’s like a Linux machine and you can configure. And this is where I remember when we go to settings and maybe I will switch to your code spaces and then single sign-on, blah blah blah, Oh yeah, change machine type.

0:34

See, I pick the basic one. You can pick like 4 cores, 8 cores, 16 cores, you know, whatever you want, right? And the cool thing is, again, if memory serves me right, you only pay for the time you’re actually using it. So you could get a really cool machine and then once you’re done, you shut it down, right?

0:50

So then you should be, you shouldn’t have to worry about paying when you’re not actually using it. So it gives you the luxury of sort of leasing, borrowing these machines for dev purposes. OK, let me move my face here. So I picked the basic one. So that’s one of the other things I had essentially done.

1:07

So now let’s go back here. Now we’re connected to that machine and let’s say here is the repo and I’d actually done a secure copy of code from my machine, the next JS code to the, you know, to the one on the server.

1:23

I have to remember how I did that. So I didn’t, I don’t know if I was able to find the example like that command on that place, but I was able to like literally SCP secure copy from my machine the files to to the one in the cloud because that’s how I have the code there essentially over and beyond the basic tutorial that I had downloaded.

1:47

Anyway, So now that we connected there, in this particular terminal window, we’ll just look at the app. But before we do that, let me let me just run it. Right. Let’s just run it first. So let’s do a yarn install. And then we’re going to do if I go to package dot JSON, OK, I’m just going to do a yarn run next.

2:13

I’m sorry, yarn run dev. It’s going to run in this port. Let it start up. Oops. What’s going on there? Oh, it’s already in use. That’s because I actually went OK, so let’s come back. I’m just jumping all over the place.

2:30

But you know, before I go there, how do I launch it from here? Create code spaces on main, configure and create. That’s not what it is. I have it running. But before I can tell you how I got here to be running it, I’m just trying to think what exactly I had done.

2:51

Oh boy, I wish. I but this better. So let’s actually, I don’t know if this is the exact sequence, but let’s let’s try this. So I open Visual code on my machine. This is running locally and then I connected to GitHub, right.

3:08

So if I if I sign out, I can sign back in, but I’m not going to do it. But you know let’s say you don’t have, you’re still signed in. You’re basically going to. I’m just going to make it. I can’t make it any smaller. You’re just basically going to sign in through your account to GitHub, right?

3:24

And then you need to obviously have access to the code space repo. If somebody else, if an admins creating it, just make sure that they grant you access to the repo. And then after you sign in here, hit this green area that says open a remote window And then you see a bunch of options and you can say, I’m going to go here, I’m going to hit this, you know where it says connect to code space, just hit connect to code space and notice that it’s going to pull up your code space.

3:49

Because you’re signed into GitHub, you have access to this code space because somebody granted you, you know, right, or higher access. So you’re able to actually see it. Now I see this, I only have one code space. It tells me which what machine type I’m using, yadda yadda yadda.

4:06

So I’m going to pick that. Essentially I’m going to hit it. Now what it’s going to do is it’s going to actually connect to it locally, right? So basically this editors which VS Code is running locally and it’s going to actually connect to my code space. So this is the code, right? Let’s let’s ignore what’s in the code when I’m going to go back here and do a Yan install.

4:26

Not that it made any changes, so this is unnecessary, but I’m still going to do it. And I’m going to do a run dev. It’s going to say the port is already in use because it is actually in use. So I’m going to kill something here. Ignore that window for a second. I’m going to come back here and do run dev.

4:43

It’s going to start the server on 4001 and let’s wait a second. It’s going to pop up the actual URL. Sometimes it takes a couple of seconds, but we should actually see it.

5:02

Would we not see it here? Because this is the IT says open and I don’t want to go here. This is where it’s actually I’m going to close that window, right? I’m going to close that window and I’m going to cancel this.

5:19

I’m going to run it again. I want to see where it. I expect for it to actually tell me you know what there is an alternate URL, but let’s say let me hopefully I get back all the memories from the few weeks as we go through this video anyway, still then you basically go to 4001.

5:49

Now our app is running right now. This is essentially we we connected to code spaces. So this is not using up any resources on my machine whatsoever. It’s it’s running it on on the GitHub cloud server, the machine type that we procured and it’s essentially running it over there.

6:11

It’s here it says your application is running open in browser. I don’t need to do that. It it took a while. That’s what I’d expected. It takes a while, but if you’re impatient, as as anyone would be, you can just hit here and go to the URL and then this other URL would also work.

6:28

But I have to see. So this is essentially. Is that the name of the code space that we connected to? That might very well be it. Let’s see GitHub code spaces list. Is that the URL? Yep, I copied that whole thing there with a dot GitHub dot dev and I promised I didn’t add that manually, so I just it actually told me where to go find that.

6:54

Anyway, so we figured out how we could maybe after you run this, there is a way to say go to the one that’s running in the cloud, possibly remote explorer, blah blah blah.

7:12

That’s not the one trying to see where it actually told me Anyway, so we’ll figure that out. Now you notice that you’re running this, We’re running this in the browser, right? So we the the cool thing about code space is obviously is the fact that if you have a new person join a team, a contractor or employee who whoever it is remotely or what not you can have them running in no time like I said earlier.

7:39

So they can even if they don’t have you know VS code they don’t have to even install it locally. They can just go to the browser and literally start coding and the experience is going to be exactly the same right? And sometimes people prefer to do it there. I prefer it to be local, but it could be a combination of two things.

7:55

And then if you’re Co working, collaborating with your members one or more people if you’re doing padding or mobbing this makes life much easier in that sense, right. So now we we have code and this code is also here and we are running it here.

8:10

So this is like I said this is the next app, next JS app. So let’s say I have a simple so we have this, it says you know it says list of colleges, right. All that I’m going to do here is basically, you know, let’s keep an eye here.

8:26

You can keep an eye on the left side as well. I’m going to go here and let’s say one of your devils, hey, you know your PAP programmers is making some code changes. They change it. Boom. You know what? You see it locally as well, right? Pretend that this browser is not me. It’s somebody else in your team situated somewhere else running it.

8:44

And then this local, this editor is you. So you’re Co working. You can you can open a browser vendor as well obviously. But you can, you know you can use your ID. That’s local. Your team could use a browser in any combination, permutation combination, right. We make the code changes and then if you notice here, you know it just there’s a hot reload.

9:03

So I can even pull this vendor down just so you can see it. Let me pull it down. Let’s keep it nice and small. OK, So I’m going to go here and say colleges, two banks is too many, one too many. So I want to remove it and I’m going to just save it.

9:19

Notice that it changed there. It changed here as well, right? So the in other words you you don’t have to you know you’re not like sharing your screen. You’re not doing zoom anything of that nature. You’re making code changes your your settings get carried over. You can you know sync settings on VS Code here and go back to to your local set up and literally you know, just just just collaboratively work, you know in in this pad fashion when you’re fixing complex issues or or if you work in an organization where pairing is, is the way to go right?

9:55

I do pair quite a bit but for situations that required not so much like 100% pairing where there are some organizations that do it works for some people, not for everybody, but as a team you got to collaborate. The more you collaborate the better of you are.

10:12

And you know it’s just, it’s just getting used to it, right. So this it’s a notion of how much you pair or mob changes from team to team with the fact that you have to or we’ve all been doing it over the years, even if we didn’t use that terminology to address that. Is is is is a given, right. Anyway, so this is on the browser.

10:29

We saw it here. What else do I want to show editing. Let’s see what else is of interest here. It says stop your current workspace, close your remote connection. If I did that, it’s going to it’s just going to shut this thing down. And if it’s idle for for a while, it automatically like shuts it down if I remember correctly.

10:45

So if you forget to do it, I think it might just shut it. But maybe if multiple people are using it, I don’t know how it exactly works. So you know you want to look that up just so you don’t end up overpaying, right? What else? Of course, I think from what I can tell, you have to be using VS Code.

11:02

So if you actually like Sublime or other editors, how you use GitHub code spaces with another editor that’s not VS Code, I don’t know, Maybe they support it, maybe they don’t know. Given that Microsoft actually owns GitHub, maybe, maybe only support is on VS Code.

11:17

But it’s a pretty nice editor. Even though I actually use that alongside other editors, there are lots of people who use that exclusively, right? So it should probably just work fine. Let’s look at some other commands of interest that I might have here. Let’s see, Let’s try the history.

11:35

Not there. Maybe here, right? I want to exit out here. I want to do GitHub. OK, let’s see what commands were of interest. Clear. OK, these are. You can ignore those ones. OK, these were all SSH. And then there was there was a bug I had to file. You know, I’ve created a ticket for GitHub and was open for like a month I would say. And then she came back and and told me what the issue was. I was able to connect to this code space from my other machine, my laptop, but not from my from my studio.

12:17

I don’t know what happened there but essentially they fixed something I presume and they asked me to do a authrefresh-hyouknowgithub.com and codespace and then it popped up a browser window. Opened a browser window at login and then into this 8 digit number that it pops up here over there and then it was good to go.

12:37

Then I was able to access the code spaces still then I was not. It was like a 403 error if I remember correctly right? And then what we did, we did see a few other commands like GitHub code spaces. Yeah, Oh yeah, copy. You know I mentioned ACP, I guess it is not ACP, it’s just CP, right? Just copy. So you do a CS copy between local and remote file systems. So you have you can do A-R I think for recursive upper keys are if I remember correctly, to copy everything.

13:08

That’s what I did. Take it from local my machine to the one on the server. Creating code spaces, deleting, Editing it? Sure, what exactly editing means? Opening it someplace else? Listing it? Accessing logs. Oh, that’s interesting. Let’s see.

13:33

Well, it. Let’s see. It. Let’s see. Can I do A-F? Tail. Dash F maybe. Maybe that’s tail. Let’s try to make some changes here. Well, I’m not seeing any log activity here, so maybe it’s not so much http://logging.

14:06

I’m not sure. Let’s see GitHub CS log tail. I’m just curious to see if there’s a way to tail all kinds of activity we’ll have to go through this to figure out.

14:29

I’m not exactly sure this thing is still the dash F did something, it’s just sitting on it like as though it’s tailing and I’m trying to see what it is actually logging. I am curious, I want to do it after I end this.

14:45

But you know what? Maybe maybe we will say go to settings and I am not exactly sure what it’s actually going to be logging here. Yep, so that’s what it’s worth.

15:04

GHCS ports. OK, I guess it’s telling us all the the ports that are possibly in use, right. So I guess it’s. Yeah, you can just play with that and figure out.

15:21

And then you know we saw hot deployment. We saw the code changes. What else? Right. Maybe we we can worry about debugging later. This is the explorer. I don’t know what. Oh yeah, this might be useful.

15:36

See, I installed code spaces for sure right? So you may you have to install that extension. I don’t know if I probably didn’t install anything else, anything else specifically for this that you would probably have to do and then try to see if there’s any other command of interest that I may have actually run.

16:05

Nope, it doesn’t seem to be anything else here. Yeah, that’s that’s basically you know, a high level overview, but hopefully it gives you an idea right? Just go create, you know use the template. Just to recap, create the, create a base code space repo.

16:23

If you have some code you know a repo just export or copy it. So you can replace all the base code with this this new code from from local or just start creating or writing new code on on in the browser after you create the, after you create this code space, you know, try sharing with their fellow teammates and then start, you know just start using it and see see how it goes right.

16:47

To me, I think it was a pretty pleasant experience and I think that I see a lot of value in in a few different ways, particularly if you’re trying to onboard people or you’re hiring contractors maybe part timers. You know, you know, if you’re if you’re doing, you know finding people for like a three month gig, short gigs, maybe six month projects, whatnot, you want them to help in certain aspects.

17:08

You have micro front ends and micro services, small repos. You want to create this quickly and have them start contributing to it. You’re not worried about, you know, hey, I can run this, What are the 10 things I need to do get this up and running and all of those typical dev onboarding problems, right?

17:24

I feel like it’s going to actually mitigate all of that stuff and then gives you a really powerful machine for doing cool stuff. And so if you’re in a place where you don’t have the best of machines, you, you know, your new hired happens to not live, go live in wherever you live.

17:40

So they basically, you know, remote and they they have an already machine and you’re not able to ship them a new one. So you can have set up a pretty cool, you know, machine here and code spaces and then and then go from there, right. So hopefully this gave you some indication.

17:57

Obviously we didn’t go into the code. To me that’s kind of irrelevant to the discussion here. I just want to cover the idea and the notion of code spaces, say, and I think we’ve covered. Good, good chunk, good bit. Yeah. If you have any questions, obviously feel free to hit me up.

18:15

That’s about it. Thank you and have a good one. Bye.

Snowpal Products

• Backends as Services on AWS Marketplace
• Mobile Apps on App Store and Play Store
• Web App
• Education Platform for Learners and Course Creators

Subscribe to our newsletter on products.snowpal.com so you do not miss a beat about Technology (in general) and everything we do at Snowpal (in particular).