Github Codespaces for React Native

When Github released Codespaces, I honestly didn’t think I would ever drop my editor for a tab running in my browser. Well, I was wrong.

It is quite difficult to realize we got this far

Premises

What React Native accomplished amazingly well in the first place was to simplify mobile development. Everything you had learned about web could now also be used for mobile apps.

Although this was a big jump following the Cordova/Ionic era, a major problem remained: native knowledge was still required to get somewhere, whether it was XCode or their gibberish Objective-C.

Fortunately, if you have been using React Native lately, you must have heard of Expo and how it has exponentially improved over the years. Expo managed to simplify all the bits and bobs of React Native that still made it difficult to use, namely native libraries and tools.

Now you might be wondering where I am going with this. Bare with me.

Altogether, we turned two codebases into one for a cross-platform application using React Native. We then went from using many tools and sometimes different native languages to only one with Expo.

Today, we are going from a computer with enough storage and RAM to run an application to literally any browser on any machine — which theoretically includes your phone too.

Let’s dive into React Native with Codespaces.

A toolbox in your browser

In case you missed it: since VS Code runs in an embedded browser, it can also run in a regular browser.

So what’s the craic? In a nutshell, Codespaces are virtual machines running projects hosted on Github, all visually packed in VS Code. This means you can work on any git project you have, from anywhere and on every device.

Your mobile application in a browser

Since VS Code includes all the plugins you need and has an incredibly powerful Intellisense (especially if you are all into TypeScript), this is everything you need to run an Expo project.

If you don’t have Codespaces access yet, take a look here.

Tell me how

To start using Expo in Codespaces, the way-to-go is to create a project on your machine first. Run the following from any folder:

expo init your-application

Then you will need a Github project to send all your local code over there. Create a repository:

If it all worked out well, you should get quick commands to push your code over to Github:

Copy/paste the following in your terminal

Once it’s done, you can delete your local repository since we won’t need it again. Now hit refresh, go to Code, Open with Codespaces and New codespace:

And voilà! Your codespace should open with your Expo project in it.

Now, we have a few steps left to get it running inside the Expo Go/client on your phone:

• Open a terminal in Codespaces
• Install Expo CLI with npm install -g expo-cli (or its yarn equivalent)
• Install your project dependencies with npm install
• Log in with your Expo account with expo login
  This is required to get your app showing on your phone automatically.
• Important: run expo start --tunnel
Since your code is running on a virtual machine far, far away from your internet network, the only way to get access is to use a tunnel that will grant you access over a different network using a URL given by Expo.

Your React Native application is now ready

If you followed the steps till now, you should see your app showing up in your Expo client:

Here it is!

You are not dreaming, this is your application running right from Github Codespaces. You can run this from any other device and all you need is your Github account.

Thoughts

When you think about it, this is amazing. You can develop an entire cross-platform native mobile application from your browser.

6 years ago, I remember one of my friends being so excited over Sublime Text Monokai theme. What this means is that 6 years ago, both VS Code and React Native were still not out there and all we could be excited about were the premises of modern technologies.

At first, we have seen concerns over yet another Electron-based editor and a merely-good cross-platform alternative. Today, they both turned into the simplest way of creating a mobile application, all even from a browser.

I cannot express how much I feel excited about all the progress that has been made in such a short time. I even myself wouldn’t have ever thought of coding in a browser…I mean really, a browser mate?

Looking at how fast Expo and Github are growing makes me extremely hopeful about what is lying ahead. This was the first time I coded an entire app from a browser, and I am all in now.

Note: this new application I mentioned above helps you achieve more of your daily tasks. It is simple and well-designed, you should give it a shot.