How To Code On Your Smartphone (With A Terminal)

Overview

In this article I'm going to show you how to use Termux to install nodejs, set up a react app with create-react-app, and edit the files from a separate coding app all from your android smartphone.

This tutorial assumes some very basic knowledge of the command line and unix.

Motivation

A smartphone obviously isn't most people's first choice when it comes to coding, but for a lot of people it's simply their only choice. I wanted to see for myself how difficult it would be to create a full-stack, production ready, version controlled application completely from my Android phone, but after doing a little first page of Google research I learned that most mobile coding apps were lacking most of the features I was used to...namely integration with some kind of terminal. And as we all know, it is every developer's right of passage to struggle with the command line. Fortunately for us, with a little bit of work, we can make everyone's lives slightly harder.

Let's Do It

All we need is a terminal app and a decent code editor app.

The terminal app that I'll be using is Termux. It's free and does not require your phone to be rooted.

For the code editor I will be using the free version of Acode. Feel free to use whatever editor you like as long as it supports FTP (leave your suggestions in the comments). I'm using Acode because it was on the first page of my Google search.

Note: Acode is fully open source which means you can vent any and all frustrations directly at the developer(s) in the form of github issues or show them some support, it's up to you really.

The first thing to do is to open Termux and install nodejs:

pkg install nodejs

Now we need to make a folder to store all of our projects. I'll just do this in my home directory so that it's easy to find later.

cd $HOME
mkdir projects

Now I'll go inside the projects folder and create a react app using create-react-app, almost as if I was doing this on an actual computer.

cd projects
npx create-react-app my-app

This will take a bit of time but ultimately will automatically create a folder named my-app in your projects folder. You can start the development server by changing directory to the my-app folder and then running the start script:

cd my-app
npm start

This should automatically open your browser to localhost:3000 where you'll see the react starter template. Exciting stuff so far, but how about editing stuff?

In order to edit your project files in Acode (or your FTP editor of choice) we will have to serve them over an ftp server. I promise this isn't as hard as it sounds.

But wait, why? Well Android apps, for security reasons, have all of their files isolated from each other, meaning files you create in Acode can't be directly opened with Termux and vice versa...with one exception -- they both have access to a virtual shared storage folder. The bad news is that you cannot create symlinks in this shared folder, which means that most npm install commands will fail if you try them. Trust me, it's a headache.

The good news is that Acode has a feature that allows you to access and modify files from an FTP server and in Termux it's easy to set one up.

First open a new terminal session by swiping from the right and then pressing "new session" at the bottom. Then run this command:

tcpsvd -vE 0.0.0.0 1024 ftpd -w $HOME/projects

******

EDIT

tcpsvd apparently no longer comes pre-installed on Termux so you may get an error when you try this. tcpsvd and many other great tools are available through the busybox binary. You can install busybox and then create a link to specifically the tcpsvd command with the following:

pkg install busybox
ln -s busybox $PREFIX/bin/tcpsvd

******
This opens up a server on port 1024 and serves up everything inside the projects folder. If port 1024 is already in use, feel free to use any other number as long as it's larger than 1024.

Now open Acode and select "FTP" from the three vertical dots menu in the top-right corner, and then "Add FTP Account." For the hostname field put 127.0.0.1 (this is also known as localhost). Now all the way at the bottom edit the port to 1024 (it might sometimes already be filled in as 21).

Fill in any optional fields you want, click OK, and then click the newly created entry to boot 'er up. Now click the hamburger menu to see a folder with all your files. From here you can go into the src folder, edit App.js, click the save button, and then go back to your browser to see the changes applied immediately.

And that's it. Now you can even do things such as experiment with making an express backend, running redis, postgres, and using up all your phone's storage.

And remember to kill your server when you're done developing or you'll likely see high battery usage.