Code a React website on your Android smartphone or tablet like you never imagined

tl;dr

Use Android with Termux to code and host your React webapp from your smartphone.

The beginning

Sometimes when i hang around i just cannot keep myself from thinking about coding, this is one of the worst things that can happen where you’re a developer because is somewhat alienating but on the other hand it can lead to something good for your application!

Well, if you’re like me and you really love having crazy ideas when you’re in a shopping center or driving, in those moments you are probably feeling that something is missing… like a nice keyboard under your fingertips.

After a while i was perceiving this as a problem, but it was showing up mostly when i was bored so after all it was good to keep me alive in some situation!

Well, in the end here’s what I came up with: I always thought that smartphones were meant to something more than mass surveillance, and entertainment and yes they are a great aid for teamwork and productivity, but to me is not enough.

I want to work on my smartphone/tablet.

And i want to do it the way (or the most similar one) i would do with my Mac.

Here’s what you should do

The best keyboard for the job is Hacker’s Keyboard, the better is an external bluetooth keyboard.

Install Termux, launch and update it with the apt command.

$ apt update && apt upgrade

then reach the external storage.

$ termux-setup-storage

install some core utilities and other.

$ apt install coreutils$ apt install curl$ apt install tar$ apt install zsh$ chsh -s zsh //to set zsh as the default login shell$ apt install gnupg$ apt install vim$ apt install nano$ apt install nodejs$ apt install git

if you want to remote your shell you can use OpenSSH (thanks to The Oliverse for this part).

$ apt install openssh

# create the permission file$ touch ~/.ssh/authorized_keys

# Set Permissions to the file$ chmod 600 ~/.ssh/authorized_keys

# Make sure the folder .ssh folder has the correct permissions$ chmod 700 ~/.ssh

# generate OpenSSH key pair (skip passphrase with enter)$ ssh-keygen

# add the key to authorizex_keys file$ cat ~/.ssh/id_rsa.pub >> ~/.ssh/authorized_keys$ chmod 600 ~/.ssh/authorized_keys

# test from the device itself$ ssh localhost -p 8022 -i %PATH_TO_KEY-FILE%/%NAME_OF_KEY%

# then you can copy ~/.ssh/id_rsa to your client (your computer)# with this command you will find the file in the root of your device$ cp ~/.ssh/id_rsa ~/storage/shared

# change the file name and copy it on your ~/.ssh folder on the computer or into ~/.ssh/known_hosts file

# access your device from the remote shell like this$ ssh <device_ip> -p 8022 -i ~/.ssh/<your_new_filename>

Let’s React!

Let’s now try to setup a minimal development environment for React.

# install yarn with npm$ npm install --global yarn

# test yarn$ yarn --version

# install react$ npm install -g create-react-app

# go to your home and create a project folder$ mkdir projects$ create-react-app my-app$ cd my-app/

The command npm start won’t work so you have to edit package.json file in your project adding another property to the script part of the json. you can use nano package.json command to do it.

"onandroid": "node node_modules/react-scripts/scripts/start.js"

Now you can start the server using the script you just wrote.

$ npm run onandroid# you can access your react website from http://localhost:3000# or from another host of the net from http://<device_ip>:3000

From now you can access your React website from http://localhost:3000.

Or you can even access it from any host of the network you’re connected with using http://<device_ip>:3000

Watch your page while you code

If you really want to enjoy this you should try using Termux:Float (paid app). With a Termux normal session you can reach your project folder and start the development server with npm run onandroid, then after it started launch Termux:Float and you will have a resizable moving shell window where you can code with Vim! You can also open http://localhost:3000 with the browser and keep it in the background. Now code on the floating window and watch the page change at every save thanks to livereloading!

Conclusions

Thanks to Termux in a short amount of time you can make your mobile device a satellite development station and code way more comfortably that you ever imagined. When you’re done you can commit the changes with git and keep your normal workflow.

Other links

Termux Help page.

Another great article about developing on your mobile with Termux: Building a Node.js application on Android — Part 1: Termux, Vim and Node.js and Part 2.