How to Use Codespaces as an Environment for Learning About Web Development: One Noob's Experience
- rachel
- Mar 26, 2024
- 7 min read
Updated: Sep 16, 2024
Are you trying to learn about web development but have a Windows operating system? If you’re wary of the challenges of installing a Linux system and can’t afford to splurge on a Mac, I suggest giving GitHub Codespaces a try. It may not be as exciting as cat zoomies but it's pretty cool. I had started the Learn Enough series of courses using Amazon Web Services’ Cloud9 for my IDE (integrated development environment), as I wrote about in my first blog post. It worked out fine, but since I was nearing the last few months of my free trial period with AWS I needed to find an alternate IDE. I didn’t feel comfortable with their opaque billing system.
Reading some good things about Codespaces, I decided to try it out. In several weeks I was able to finish the Learn Enough HTML to Be Dangerous course, completing all the work on a codespace. As a cloud-based IDE, it enables you to use Visual Studio Code (VS Code) as your editor, and it provides a Linux terminal and smooth GitHub integration. In fact, since Codespaces is part of GitHub, when you’re making commits you don’t need to enter your personal access token each time you push your files to GitHub!
Codespaces is free to all GitHub accountholders for the first 60 hours per month (or 90 hours as part of their Student Developer Pack, which is available if you’re enrolled in a degree-granting program), and $0.18/hour (USD) thereafter, assuming you choose the simplest machine type for your codespace, a 2-core machine. You also get 15 GB of free storage per month. In my experience, I didn’t exceed these thresholds but your mileage may vary. Even if you go beyond 60 hours, working for 8 hours in a day at 18 cents/hour will cost $1.44, less than a cup of coffee at Starbucks.
Being hosted in the cloud, Codespaces enables you to work from the web browser of any device with Internet access, using a web version of VS Code which is provided by default. You can also choose, however, to work from a native VS Code installed on your machine, accessing your codespace from this local editor. (You can also use Jupyter and JetBrains IDEs according to the Codespaces website, but these are beyond what I’m familiar with.)
The only downside to using Codespaces is that you’re dependent on your Internet connection, as is the case with AWS’ Cloud9. If you lose your service, it could be an unproductive day for you, unless you happen to have cloned your repository to your local machine before losing your connection. Is it worth it to do this every day before logging out? I wonder what happens if your Internet service goes out while you’re working – can you save your work locally? These are things to look into. Meanwhile, I’ll continue to make use of this great coding environment.
How to Start a Codespace for a New Project
Here I’ll give instructions using the Learn Enough HTML to Be Dangerous project as an example. These parallel the ones given in the first part of Section 1.3, “Starting the Project”. You can easily use these directions to start any new repository, substituting your own repository name and description in step 2 and doing your own work in step 5.
1. From your GitHub personal homepage, click on “New repository” from the pull-down menu in the upper right-hand corner of the screen indicated by a “+”-symbol (see nearby picture).
2. Type in “sample_website” in the blank box under “Repository name”. Then, in the blank box under “Description”, type in “A sample website for Learn Enough to Be Dangerous”.
3. Choose whether you want to make this a public or private repository. Important: check the box to add a “README” file, because the system will not permit you to create a codespace for an empty repository. For this project, I ignored the remaining options. Then click on the green box that says “Create repository”.
4. You’ll now be at your new repository page. Click on the green button that says “Code”, and then choose the tab that says “Codespaces”. Next click on the green box that says “Create codespace on main”. Wait a few moments, and then -- voilà, your own codespace! Note its funny assigned name in the blue rectangle at the lower left corner of your screen. Just as in the desktop VS Code interface, the code editor area is in the top pane, the terminal is in the bottom pane, and on the left is the Activitiy Bar containing icons for the Explorer (showing files and folders), Search, Source Control (Git), etc.
5. Resume the Learn Enough tutorial at the place where it says to create the file “index.html” using the touch command at the command prompt. (Skip the part about logging in to githhub.com and creating a new repository, since you did that already.)
6. When you’re ready to sign out, click on that blue rectangle in the lower left corner. Select “Stop Current Codespace”. This doesn’t delete your codespace, but merely stops it until your next work session. If you’re accessing your codespace via a browser your files are autosaved periodically. If you’re using VS Code running on your desktop, autosave needs to be turned on if you want to use this feature. Nevertheless, it’s always best to save your work manually, and to add, commit, and push it up to GitHub as appropriate before stopping a codespace.
Previewing HTML Files
In order to see the effects of your HTML code in a pane side-by-side with your code’s pane, installing an extension is necessary in VS Code whether or not you’re using Codespaces. Installing the “Live Preview” extension (or any other similar one), however, is a simple step that’s definitely worth it.
1. On the VS Code Activity Bar on the left side of the screen, click on the Extensions icon, which looks like a square cut into four smaller squares with one quarter floating off. Search for “Live Preview” and then install it.
2. With your code open in your active editor window, direct your mouse arrow to the upper-right corner of the screen and look for the icon in the second row that has two side-by-side rectangles with a tiny magnifying glass over the right rectangle (see picture below). This is the preview button. Click on it and a preview of your web page should appear in a new pane right next to your code pane!
Working With Time and Storage Allotments
Remember, while your codespace is running, time is ticking on your free monthly allotment. GitHub, by default, will stop a codespace which is idle for 30 minutes. If you wish to change this setting, click on the circle containing a green and grey blocky image in the upper-right corner (this is where your photo is if you’ve uploaded one for your user profile). Choose “Settings”. Then, on the left side of the screen, choose “Codespaces”. Scroll down to “Default idle timeout” and then choose and save your preference.
If you wish to check on your usage, go to “Settings” as in the last paragraph. Then, on the left side of the page, open the “Billing and plans” drop-down menu and select “Plans and usage”. Scroll down to “Codespaces” under “Usage this month”, and there you’ll see how many hours and storage space you’ve used out of your total free allowances for the current month.
How to Access Your Codespace From VS Code Running on Your Desktop
I actually prefer working this way because when I access a codespace from a browser, the VS Code interface looks slightly different from the one I’m used to on my local version. In addition, certain VS Code keyboard shortcuts don’t work as expected, probably due to conflicts with the browser’s keyboard shortcuts. For example, `Ctrl + Shift + P` (to call up the command palette in the desktop VS Code) opens up a new window for private browsing in Mozilla Firefox. Also, when you open the desktop VS Code, it displays your recent projects, and clicking on one running in a codespace will directly connect you to it, with no need to log in manually to GitHub.
If you’d like to use your locally installed VS Code to work in a codespace, here's what to do:
1. You first need to install the GitHub Codespaces extension. In the VS Code Activity Bar on the left side on the screen, click on the extensions icon. Search for “GitHub Codespaces” and install it.
2. Then, hit `Ctrl + Shift + P` to get to the Command Palette and choose “Codespaces: Connect to Codespace”. Select the codespace you want to work in. Your work environment and files should then appear after a few moments. That was easy, wasn’t it? And as I had mentioned, upon being opened, VS Code shows your recent projects, and from now on, all you need to do to access your codespace is to click on it.
3. If you'd like, install the “Live Preview” extension on your desktop VS Code to be able to see previews of your web pages, as described in "Previewing HTML Files" above.
How to Delete a Codespace
1. While logged in to GitHub, look in the upper-left corner of the screen and click on the icon that has three thin bars on top of each other. Then click on “Codespaces”.
2. Scroll down to see a list of all your codespaces under “Owned by [your user name]”. Click on the three dots which are on the right side of the codespace which you want to delete, and then click on “Delete”.
If your codespace is inactive for thirty days, you may get an email saying that your codespace will be deleted soon. Just start using it again if you wish to keep it.
From what I’ve read, Codespaces can especially come in handy when collaborating with others. Among other benefits, you can standardize the coding environment for all the developers and avoid the little glitches that can occur otherwise. Similarly, Codespaces also has huge potential to be used to teach various computer science courses and make the learning go more smoothly with all students using the same basic setup. Students and teachers of online courses, especially, would benefit.
I hope this simplified introduction to Codespaces is helpful. The GitHub website, of course, has documentation for more detailed information, as well as more information about billing.
At some point I’ll probably need to bite the bullet and install Linux on my laptop. Until then, however, I plan to live by one of my personal mottoes: “Don’t be put off today by what you can put off till tomorrow.” Codespaces enables me to continue on in a pleasant, cutting-edge coding environment. Thank you, GitHub!
Please feel free to leave me a message if you catch any errors, have any suggestions, or just want to share shop talk. How’s you coding journey going? What kind of set-up are you using (coding editor, IDE, operating system)? Are you satisfied with it so far?
