React Development on a Chromebook (without Crouton)
Over the past few weeks I've been having trouble finding time to write code. It's usually a consequence of not being right at my desk at all times with my desktop machine. It doesn't help that my laptop is a 15" Macbook from 2013, so it's not the most comfortable hunk of metal to lug around the house.
However, my 10" Chromebook is! I decided to see if it was possible to use this little guy as a lightweight coding machine. After doing some online research, I found these tools to be immensely helpful in getting a Development Environment set up for node.
Notes on Crouton
One popular option I found for creating a development environment on a Chromebook is to use a Linux distribution. While I'd most likely prefer using Ubuntu or another type of Linux OS for development, my goal was to get an environment on the smallest system I own. That being said, I had two problems with the Crouton approach: security and performance. Crouton requires running ChromeOS in Developer Mode. While it's relatively harmless to do this, I do enjoy the sandbox security that comes baked into ChromeOS. In addition to security concerns, I'd most likely experience pretty poor performance on my Chromebook's rudimentary hardware. With that, let's move on to the tools I chose to use.
Termux
Termux is a Linux terminal emulator for Android devices. If your chromebook can run Android apps, then this should work for you. It runs pretty well on my ASUS C100 with a Rockchip processor and 2GB of RAM.
Text Editors
It's worth installing a text editor as well. Termux comes with Vim and has a package for Nano, so those can be used if you're interested. For those not so comfortable on the command line, Caret is a good option. However there are countless other text editors for Chromebooks you can try.
Okay, now we're ready for some development! Let's get Termux configured and try to launch a simple react app!
Install Node
Termux has it's own package manager. You can search that list by typing pkg search <keyword> or view the whole list with pkg list-all. You can also get this info by visiting their page.
At the time of writing, Termux offers two NodeJS installations: nodejs and nodejs-lts. I'm going to play it safe and install the LTS pkg, but either will work just fine. Go ahead and install with pkg install nodejs-lts
Creating a React App
Installing the NodeJS runtime will also give you the NPM package manager! Unfortunately there are some issues around running create-react-app in Termux. I was able to reference this stackoverflow article to get it to work. Follow the steps below to create a project called chromebook-react.
npm cache clean --force
mkdir chromebook-react
touch chromebook-react/.gitignore
npx create-react-app chromebook-reactOn a slower machine like mine, this may take a while. In the meantime, feel free to pick up an energizing hot beverage ☕
Running the Development Server
Great! Now you can set up the development server for React the same way you would normally: npm start.
There is a quirk about running the server in the Termux emulator. Even though the displayed address will be something like http://localhost:3000, your Chrome browser will not be able to access the server via localhost. You will need to get the IP of the Termux terminal.
You can do this by typing ipconfig in the window and seeing Termux's IP address. It's been a consistent value of 100.115.92.2 at the time of writing this. So, once the server is up, you should be able to access the React page by typing http://100.115.92.2:3000/ in your browser!
And that's it! You should be able to edit some files in the React project and see them change on save in your browser. This environment won't work for heavier workloads, but it's really nice to have the flexibility to do development work on a cheap 11" chromebook.
I hope you found this useful! Please feel free to share your thoughts with me at mitch.gollub@gmail.com