Trying Out New GitHub’s Codespaces
A couple months ago, GitHub announced that they were rolling out Codespaces, but what is Codespaces?
Codespaces is an online IDE (Integrated Development Environment), a program used to write code. It's powered by Visual Studio Code (VS Code) which is a really popular IDE. If you're reading this, you must have heard of it. Why VS Code you may ask? Well, VS Code is Electron-based, was created by Microsoft and GitHub is a part of Microsoft. So that's that.
Let's move on to other topics.
Why?
The question might be why not?
It's on the cloud meaning that you don't have to install anything. If you can connect to the Internet, you can code anytime, anywhere. Setting Codespaces up is quite simple. I'll show later in the next section.
Also, it saves your storage spaces! If you're a web developer like me, you must have been suffering from the sheer size of the node_modules/ directory. In a project, it's fine. Many project combined? I'll let you do the maths.
Another great thing about Codespaces is that it's equipped. You can open any GitHub repository as you like (currently limited to non-organisation owned repositories). Making and committing changes can never be easier. Running Unix command lines? Installing some npm packages? Committing some changes? Boom! You can do it in the terminal easily. No installation needed.
How?
In order to create a codespace, head to your cool repository, (optional) create a branch, then click on the green button that says Code. A dropdown menu will be shown, select Open with Codespaces. Now, if you have created one before, you can choose the existing one. If you haven't or you want to create a new one, click the New codespace button.
You'll be greeted with a bright, light-themed VS Code. My eyes! Being good developers, the first thing we all do is changing to a dark theme (it's 2020 and dark themes aren't default, wtf?). I personally prefer Atom One Dark Theme (akamud.vscode-theme-onedark) I know that it's a matter of taste and I don't want to start a war on themes. I just want you to know that I respect all of your preferences and I won't judge but if you're using other themes (especially light themes), you're simply wrong.
That’s pretty much it. You can now enjoy the glory of Codespaces.
Let’s try it out!
I’m going to initiate a simple create-react-app and run to see if it works for this article and see if there’s any hussle.
I began by creating a repository to host the files.
As I mentioned, npm and node has been pre-installed. I can simply run npx create-react-app to install React.
And… we have it! A React app installed on Codespaces. (Excuse my tabs)
How about localhost?
When I tried creating a React app, my first question was how could I run the localhost?
Of course, GitHub developers thought about this. When clicking on the http://localhost:3000 link in the terminal, it opens a new tab forwarded to https://[random-string]-[port].apps.codespaces.githubusercontent.com and I can browse the newly-created React website easily.
By the way, you can also connect to your lovely locally installed VS Code using the Visual Studio Codespaces extension. It’s in preview and I haven’t tried it.
Costs
On the Codespaces page, it says
Pricing for Codespaces has not yet been finalized. Code-editing functionality in GitHub will always be free. We plan to offer simple pay-as-you-go pricing for Codespaces cloud environments. Codespaces is free during the limited beta.
So it looks like we’re going to have to pay for it but everything costs and nothing is free right? If the pricing is reasonable (hopefully it is), this could be a game changer.
What I LOVE about it
- Ease: It’s simple to get it run and you can code anywhere, anytime. No need to worry about storage spaces. (I’m thinking about using an iPad Pro 2020 (12.9") + Magic Keyboard as a laptop-replacement. If I go with this, I’ll write a review.)
- Continuity: I hadn’t committed the changes to git yet and closed the browser. After reopening the Codespace, the files are there as they should be.
Things that could be improved
- Bugs: With a few days of using Codespaces, I found a number of bugs. Some are fatal; some are dismissable. But hey, it’s a beta right?
- Shortcuts: When I pressed
[Ctrl + W], I expected the current tab in Codespace to be closed, but instead, the browser tab was closed. It happens with[Ctrl + P]as well. This is really annoying since it happens on and off. - Speed: It’s not that slow but it’s slow enough to feel and get annoyed. Being optimistic, it’s a good place to improve our patience.
All in all, I really love GitHub Codespaces. It’s convenient, cloud-based, and equipped. There are still some issues to be fixed before releasing to the public but they aren’t critical. This is something we should eye on.
