I'm personally really excited about GitHub Codespaces. This is coming from someone who's always been passionate about their IDEs and local setup. This past weekend I was hacking some really amateurish React Native using Expo.io. I decided I was tired of locally setting up IDEs on every new or formatted device. It's 2020, I should be able to get my dev environment completely setup in the cloud, so I can jump to action on any device, anywhere with the same user experience.
What I'm about to show, especially for folks experienced with Expo and React Native, is nothing special or new. Expo is an amazing framework and and most of the magic of this tutorial is due to those tools. Having said that, I'm still blown away with the fact that to run a test or do an experiment on a native mobile app, I just need to launch a codespace, run expo and see the changes live on my phone without even cloning a repo.
This 30 sec video will explain what this guide is all about:
- A GitHub account (I guess everyone has one of those), otherwise go create one;
- Access to the GitHub Codespaces beta. If you don't have access to the GitHub Codespaces beta, you can request early access.
- An Expo.io account and Expo installed on your mobile device
If you don't have access to the GitHub Codespaces beta, I still think it's worthwhile checking the rest of the tutorial for when it becomes available.
Usually guides like this start with
Clone this repository or a screenshot of how to fork a project. But we're talking about Codespaces and with it, you can launch any project, not just yours, directly on a new codespace. Go straight to https://github.com/bitoiu/expo-start-octocat and click
Code -> Open with Codespaces:
Not long after you click that, you'll see your codespace ready for code:
The expo client is doing the heavy lifting in this demo, so we'll need to install it by getting a Codespaces terminal and up running first. Open a terminal with
View -> Terminal, then run:
npm install -g expo-cli
At this point I'm assuming you have an Expo.io account, and you also downloaded the mobile client to your phone. Now let's ensure you're logged in both on your phone, and on our codespace. To login from the expo-cli in our codespace just run:
Back in the terminal run:
expo start --tunnel
If everything worked as expected you should be seeing a QR code. Scan the QR code with the Expo app (Android) or the Camera app (iOS). In any of the scenarios, you should be seeing the application loading and a status bar on the Codespace terminal.
The first time loading the app could take a bit of time, and you might have to click
Reload JS if you get an error in slow connections. In fact, via this method, the codespace and your phone might disconnect with inactivity so if you see a
Disconnected from the Metro server just literally shake your phone to get the Expo devtool menu and click
Reload. When it all works you should see this screen:
For the grand finale, go into your codespace and locate what should be line
20 where you have
backgroundColor and change it to
pink for example then save the file (⌘S). If the phone is still connected you should see it change color automatically.
ℹ️ Remember if the device disconnected from our codespace, just shake it to bring up the Expo menu and click reload.
I find it awesome that I could create or clone a fully fledged app, on a fully configured cloud IDE. Not only that, but I can easily test a small change or develop across the world in a minimum spec laptop I just borrowed.
I think Codespaces have the potential to be a key catalyst in the years to come for:
- Faster open source contributions;
- Faster ramp-up and time to productivity within companies;
- For those that prefer VS Code and Codespaces, the ability to have your settings and your IDE as you've customized it anywhere, anytime;
As I write this there are some things I still haven't completely figured out, but I plan to and will update the article accordingly. Those involve accessing the Expo Dev Tools on the codespace and ensuring the tunnel connection is more stable.
Stay safe ;)