I long suspected React Native / Expo development could work on a Chromebook. Expo’s managed workflow eliminates the Xcode/ Android Studio-specific build steps, instead serving your app for debugging to the Expo client on your phone, and then building your iOS and Android binaries using their cloud services. The only thing you really need a Mac for is to upload your app to App Store Connect, and you can rent a Mac in the cloud by the hour if it’s really an issue.
But I had never tried it until now, mainly due to lack of available hardware. That all changed when it was time to replace my lovely wife’s** old MacBook Air, and we had picked up a pre-owned Pixelbook for a song on Swappa.
** My wife was rather annoyed when she caught me writing this blog on her laptop, and said I could only continue writing if I made reference to “my lovely wife” in the post. Despite the spouse-mandated nature of this disclosure, my wife is indeed quite lovely.
In conclusion, being a Linux laptop, it is indeed possible, with some limitations, to develop in the full Expo/ React Native environment on a Chromebook. So here’s how to do it!
Step 1: Get Linux on your laptop
The reason this works at all is because ChromeOS is essentially Linux under the hood, and the Expo toolchain (like most JavaScript toolchains) is compatible with Linux. So, your first order of business is to get a Linux command prompt running on your Chromebook.
There’s old ways of getting a Linux shell (like Crouton), and there’s really heavy-handed ways (like dual-booting), but it appears that most modern Chromebooks are now compatible with the Chromebook Linux Beta. This is probably the best and easiest way to run Linux right along side the rest of ChromeOS. The shell is just another window, pretty nice! Follow those directions and you’ll end up with this:
I’m not 100% sure, but I think this is the evolution of what used to be called Crostini. It’s Linux running in a VM on… Linux… because ChromeOS is Linux… right?
Step 2: Install Developer Stuff
I’m pretty sure git was already installed, but in case it’s not there, that’s easy, just run:
sudo apt-get install git
You’ll also want a text editor, like Visual Studio Code. They have some nice directions for installing VS Code on Linux. I skipped the “Snap Store” steps and went straight for the Debian/ Ubuntu instructions. What’s really cool is that you can just click on the link to the .deb file, it downloads, and then you double-click on it in the ChromeOS file browser and it installs. It had a really weird name in the ChromeOS app listing (it was like “Code — OSS (headmelted)”), but it was indeed there and I could pin it the taskbar.
Now you can get onto the Expo-specific dependencies:
- Node.js: I did this so fast that I can’t remember it now, but I’m almost positive that was able to download the .tar.gz file and install it just like the .deb file from the file browser. If that doesn’t work, there’s always apt-get.
- Yarn (I mean, you don’t have to, but… just do it): Follow the Debian/ Ubuntu instructions.
- Expo CLI: You could follow the instructions as-is from Expo, but that got me the infamous “EACCES: permission denied, access ‘/usr/lib/node_modules’” error, which isn’t that hard to fix. But instead, I ran yarn global add expo-cli, which seems to clear up that issue without further intervention.
Step 3: Clone your git repo
Obviously, if you’re starting fresh, you can run expo init to kick off a project. In my case, I not only wanted to clone my existing code, but also that code base has dependencies that are links to private GitHub repos. On MacOS, I setup keychain as a credential manager so I don’t have to deal with SSH. I wanted something similar, and apparently the answer is libsecret. I followed the directions here, but ran into some errors when running make. So I had to run:
sudo apt-get install make
Then I got more errors, so I ended up running:
sudo apt-get install zlib1g-dev
sudo apt-get install tcl-dev
sudo apt-get install libssl-dev
sudo apt-get install gettext
and then I was able to complete the libsecret instructions (this resource was helpful for troubleshooting).
From there I could run git clone, it would ask for my credentials, and then download from all of my private repos without issue.
Step 4: Run Expo!
Next, run expo start to start serving your app. Your QR code will pop up and you can scan it in the Expo app on your phone (or login to Expo from the CLI and see the app appear in Expo on your iPhone).
Oh, wait, but when you scan the QR code, you get the Expo Blue Screen of Death! It can’t load your app! What’s going on?
Remember how I said that Linux was running inside a VM on ChromeOS? Well, that means that Expo is serving from the VM, which has its own IP address. Check the command line and you’ll see above the QR code an address that’s something like: exp://100.X.X.X:19000. Your phone isn’t on that network, so it can’t download your app.
So, we need to switch things over from LAN to tunnel, so you will then be serving an app from a publicly-available IP address. So, let’s just open up the in-browser developer tools, and…
CRAP! There’s that proxy issue again. The Chrome browser can’t reach http://localhost:19002, because that’s hosted on the VM. To fix this, copy the exp://100.X.X.X:19000 address, paste it into your browser, and change the “exp” to “http”, and change the port to “19002”. Then you should get the developer console:
Flip the Connection switch to Tunnel, then scan that QR code again, and…!!!
You should be running your app served from your Chromebook on your phone in the Expo client. Try editing some code in Visual Studio Code and hopefully it reloads automatically with your changes.
Stupid Tricks with ChromeOS Android Support
Somewhere in doing all this, I remembered that ChromeOS has Android app support on some devices, like the Pixelbook. So, I installed the Expo client from the Play Store and ran the app from there just like I would on the phone.
One weird thing…I can’t figure out how to perform a shake gesture, so I can’t start the debugger (yes, I tried (lightly) shaking the Chromebook). Which brings me to…
Running the Chrome Debugger… Sort of…
So, back to running the app from the Expo client on my phone. I shake and turn on Remote Debugging. It reloads, but I get the following error:
error Google Chrome exited with error:, Error: spawn chromium ENOENT
I googled a bit and saw a few ways I could maybe solve the issue, but I took the easy way out and installed Chromium with:
sudo apt-get install chromium
and then it worked! Well, it definitely connected to the debugger, but things were super-slow. Remember that now the code is running in Chromium and talking back to the phone over the Internet through a tunnel. Though, I swear I’ve tried this before on MacOS and it wasn’t this slow. So, my next step is to see if I can get around this tunnel stuff. I’m thinking like a reverse proxy to give the VM a local IP address (I’m no networking genius, so this will take me a bit of researching).
Miscellaneous Weirdness and Limitations (not previously noted)
- VS Code is a bit pokey
- The Pixelbook is one of the few Chromebooks where I’m confident the hardware could handle the workload, with 8 GB of RAM and a Core i5. I definitely wouldn’t try this on a Chromebook with less than 4 GB of RAM.
- Sometimes I had to close the Expo client on the phone and restart it. It would get to 100% downloaded and just hang there until I did this.
Conclusion
While I certainly wouldn’t recommend developing React Native apps for a living with only a Chromebook, I’d happily give this a whirl in a pinch if I needed to get some work done and my main computer was out of commission. Even though we use ExpoKit, we still often use the Expo client for speed and ease of development when we’re working on features that only involve JavaScript code changes (see “Using the Expo client and web in the bare workflow”), so it’s a workable solution for a lot of my workflow.
More importantly, it’s cool because anyone, with virtually any hardware, can start to build cross-platform mobile apps, something that previously required a MacBook. Of course, they could always demo something quick on Expo Snack, but, be it MacOS, Windows, or ChromeOS, you can even keep going on a project you’ve been building on the Expo CLI or start a new one.