I seem to end up powerwashing my Chromebook all of the time, to the extent that the process of regaining my full development environment in under an hour has become as minimal as I intend to make it.
Since I feel that I've gone as far as I can, I figured documenting the steps involved might be of some value to you. I've tried this on a number of different Chromebooks, so you shouldn't hit any major stumbling blocks*. However, if you do, feel free to tweet me @cawfree.
*arm-v7
So, here's the no deep sh*t guide on how to make your Chromebook React Native ready.
From scratch.
Crouton unlocks the power of your Chromebook by providing you with a full-fledged Linux distro that can run in parallel to ChromeOS. This is where we'll be doing our development.
Open the Chrome Shell using Ctrl + Alt + T, then we'll get into chronos by entering:
shell
Then, download crouton to your Downloads folder.
For my standard development environment, I usually do most things from the command line, although it's occasionally useful to view the output of software using a graphical interface. For those rare occasions, I choose xiwi, a crouton extension which renders output from Xorg directly within a native Chromebook window. This has the downside of being limited to software rendering only, since hardware acceleration isn't supported for this kind of interface, but it is productive enough for most use cases where you really need a UI, and helps retain the ChromeOS UX.
In addition to this, I install the extension plugin, which allows your browser to "talk to" your crouton target via the official crouton integration plugin. This helps you share clipboard data, for example.
Here's the crouton cheat sheet in case you're interested in what properties can be configured for your new target. The full list of targets can be found here.
sh crouton -t extension,xiwi # requires root
Now, sit back and relax. In a little while, you'll be prompted to specify a UNIX username and password, but I wouldn't worry about that just yet.
Whilst we're waiting, you might want to check out some of the Chrome Web Store plugins that I can't seem to develop without:
- Redux Devtools - What app is complete without Redux? This is an in-browser analyzer for your redux state, which is great for web apps.
- Screencastify - Free and sophisticated tool to record demos of your latest React Native Web apps to
.mp4. - Stylus - Helps customize the themes of your most frequently visited webpages, so you don't hurt your eyes whilst you're wide awake at four in the morning debugging.
Twiddles thumbs.
We done? Okay, cool. Log into your brand new chroot using sudo enter-chroot.
This is the fun part. First, let's be sure you have all of the native stuff you need to compile all those ones and zeroes we have the luxury to forget about in JavaScript land.
sudo apt-get update
sudo apt-get install git software-properties-common adb vim curl
sudo dpkg --add-architecture i386
sudo apt-get install libbz2-1.0:i386
sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1
sudo apt-get install openjdk-8-jdk openjdk-8-jre
Next, open your ~/.bashrc where we can define a few default global variables for our shell.
vim ~/.bashrc
Use Shift + g to jump to the bottom of the file, and hit o to create a new line. Then add:
# configure java
export JAVA_HOME=/usr/lib/jvm/java-8-openjdk-amd64
Then hit Esc to leave edit mode, and type :wq followed by Enter to save your changes.
Next, let's refresh our ~/.bashrc so that our newly added variable becomes available.
source ~/.bashrc
Then you can verify this is all working by checking your Java version:
java -version
# openjdk version "1.8.0_212"
# OpenJDK Runtime Environment (build # 1.8.0_212-8u212-b03-0ubuntu1.16.04.1-b03)
# OpenJDK 64-Bit Server VM (build 25.212-b03, mixed mode)
Next, let's start getting native by installing the Android dependencies we need to build and execute your app. We're not going to install Android Studio, because you don't really need it when developing for React Native. But you can if you'd like (just be sure to run the installer via xiwi, or whichever renderer you opted for).
Here's the condensed instructions on how to configure Android from the command line, thanks to wenzhixin:
cd ~/Downloads
wget http://dl.google.com/android/android-sdk_r24.2-linux.tgz
tar -xvf android-sdk_r24.2-linux.tgz
cd android-sdk-linux/tools
./android update sdk --no-ui
Sit tight, maybe even put the kettle on. I'll still be here by the time you've finished.
Done?
Great. Let's update our ~/.bashrc so that the Android SDK directory can become another path variable. Add the following to the bottom of the file:
export ANDROID_SDK_ROOT=$HOME/Downloads/android-sdk-linux
export ANDROID_HOME=$ANDROID_SDK_ROOT
And remember to source your ~/.bashrc again.
Finally, the Android SDK is often a little tetchy about letting you compile code before accepting the licenses for the SDK versions. We'll quickly just set it up so we accept them all by default.
You'll see that we downloaded a pretty old version of the SDK, so lets cd into $HOME/Downloads/android-sdk-linux and then run ./android update sdk. (Yes, more licences.)
Once you're finished, head into $ANDROID_SDK_ROOT/tools/bin and automatically accept all future licences:
yes | ./sdkmanager --update
This part is the easiest, no doubt because of the awesomeness of JavaScript.
Find the version of Nodejs you'd like to download from nodesource, or just paste the below for v12.x:
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install -y nodejs
Great, now we have Nodejs! This means that all there's left to do is globally install some of the packages we use most commonly when developing with RN.
sudo npm install -g create-react-app create-react-native-app create-react-native-web-app react-native-cli
That's it. Really.
Now your Chromebook is ready for React Native development. Here's something to start you off with:
react-native init hello
cd ./hello
react-native run-android
Have fun!