GitHub Codespaces: Developing and testing React Native apps just with Expo and Codespaces

#expo #reactnative #codespaces #github

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:

What do you need before you get started?

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.

1. Jumping straight into a Codespace 🚀

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:

2. Installing the expo-cli

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 ^` or View -> Terminal, then run:



npm install -g expo-cli

3. Login to Expo

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:



expo login

4. Start your app and check this out 😍

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.

Exciting future

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;

Improvements

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 ;)

Top comments (9)

Abraham Hernandez • Sep 6 '20 • Edited

This was really interesting, but I wasn't able to get it working : (, always got:

Runtime is not ready for debugging.

Make sure Packager server is running
Make sure that Javascript Debugger is running and not paused on a breakpoint or exception and try reloading again.

Update:

Actually it does work, I created an app from scratch and it works, I was traying to run another app, and I couldn't get it to work propertly.

Vitor Monteiro • Oct 12 '20

Hi Abraham, sorry for not getting back to you. I'm not getting notifications for these comments, but I'll fix that right away? What did you think of it in the end?