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.
Top comments (14)
Unfortunately the above command didn't work for me :
Can you help ?
Interesting. I might be misremembering, but I thought
tcpsvd
came pre-installed with termux.I believe you can also get it from busybox by using
pkg install busybox
.You could also use other (and probably better) means of starting the ftp server, such as the one listed here: wiki.termux.com/wiki/Remote_Access
Let me know if you're able to figure it out. I'll try and do some more investigating and get back to you.
I already have it installed . It won't work
Hey I did some testing and can confirm that tcpsvd doesn't seem to come with newer installations of termux, but it is still available form busybox.
After installing busybox you're meant to run tcpsvd (and any of its other commands) by putting
busybox
in front of it.If you prefer you can also run this command
Which will allow you to run
tcpsvd
without prefixing it with busybox like normal.Thanks for your help anyway
Good stuff, thanks. I tried doing this a while back, but gave up when termux didn't see the files I created with the code editor I was using.
Finally got the ftp server up. But it doesn't show any files on Acode when I connect it to the server; it's just blank. I can't create a file or folder on the "blank" server either. This happened in another ftp client I connected to the server.
But I connected Google Chrome and it worked! Folders and files were displayed and all. What's up with that?
After a lot of hassle, I installed the react app. (I really don't know; termux closes by itself when the installation is complete)
However, when I go into the my-app folder and run "npm start", this is what it shows:
npm ERR! missing script: "start"
It's can be because you are running "npm start"
outside of termux folder
Hello if you have error connection Ftp between trimux and acode do this :
Warning: plain FTP is deprecated and insecure anyway. Termux FTP server supports only anonymous login, there no any authentication and everyone on your network can access files on your device. Use SFTP (OpenSSH) instead!
Termux FTP server is based on busybox and service is managed by [Termux-services]. If you decided to use FTP server, install these packages:
pkg install busybox termux-services
After installation you need to restart session or source this file:
source $PREFIX/etc/profile.d/start-services.sh
Now you ready to enable and start the FTP daemon service:
sv-enable ftpd
sv up ftpd
FTP server will run on port 8021 in read-only mode.
If you need to stop server, run sv down ftpd.
Thanks for the article. For me
Worked after granting Termux file storage permission
Didn't work. This is the response.
Could not get ftp server up. Did some research and this helped get the ftpd up. wiki.termux.com/wiki/Remote_Access
Cant get the ftp up