Web Programming on Android
Using Termux, Vim and the development stack of your choice
This article is a short foray into how I setup my development environment in on an Android phone to do some web programming.
Before we begin
A question that I had to deal with initially was whether the need is there to do such a thing. We live in an world where my virtual server at a place like DigitalOcean is an ssh connection away from being accessed. Why setup a complete, standalone server on my phone at all?
The intrigue. The possibility. That’s all I can offer for an answer. It’s not a novel idea at all. But the usability of such a setup has not really been explored. How far you can get development on a phone? What can be done on a form factor that is rarely considered a development device? My initial experience was very rough around the edges. Moving from an IDE like VS Code was difficult. Moving from a physical keyboard to a less than programmer friendly touchscreen keyboard was a hassle. Moving from a window desktop environment to the command line was not that bad but had to have some getting used to.
All in all, it’s great for a hobbyist web programmer like me. I been using this setup for a couple of months now and prefer to work on the comforts of my bed and as a way to pass time while I use public commutes. It sure beats carrying a laptop around.
Even though I use the term ‘phone’ extensively through out this discussions an Android Tablet can also be used for this same setup.
Setting up Termux
The greatest terminal emulator
If you are Linux enthusiast, than Termux is really a godsend. The main distaste I had for Android phone is that even while using the Linux kernel (or patched kernel), it doesn’t feel linux-ey. Not at all. While this may have worked out in it’s popularity for the mainstream, it left an unscratched itch for people like me.
Sure, there were terminal emulators from the beginning but they were very basic. It was also possible to get a full Linux distribution running on a rooted phone but I’ve not been comfortable rooting devices (voiding warranty has never been my cup of tea).
Termux successfully satisfied all the needs that plain Android and it’s terminal emulators never could.
Termux is a like a patched Linux distribution for your Android. Well it’s not even that. According to the developer’s description:
“Termux provides a package ecosystem similar to the one in Linux distributions. However you should be aware that Termux is just a regular application running on Android OS” — Termux Wiki
Don’t let that distress you. Great thing about Termux, compared to other terminal emulators available on Android is the list of packages made available to you. If that list is exhaustive, you can even install a full Linux distribution, on top of your android system, even without a root device.
First install Termux from Playstore. If you would like to support the developer it’s a good idea to buy the couple of extensions that are available.
After installing Termux and reading up on how it’s package management works, it’s time to decide your development stack. PHP? MySQL? Apache? Ruby on Rails? NodeJS? It’s all there in the Termux repos. Termux wiki gives a straightforward installation guide to most of these packages and whether there is any Termux specific tasks that need to be done.
Irrespective of your programming language, libraries and frameworks you choose, you’ll probably want to install the following anyway.
- Git (for version controlling and pushing code to production site)
- OpenSSH (ssh connections back and forth from your phone)
You might also want to change the default shell (bash) to something more feature full such as zsh or fish. Oh-my-zsh and Oh-my-fish packages are also works just as well as they do in Linux distributions.
Setting up Vim
The greatest editor?
Vim deserves all the accolades of praises it gets, at least in my book. But the text on my book might vary from what you follow, so it’s fair to suggest that this step is not really a requirement. You can go for another text editor available in the repos:
- Emacs
- Nano
- Vi
- The list really goes on…
Another possibility is to hookup your development files to a directory that’s also externally available on your Android system¹. Then you can get a code editor from PlayStore and get on developing from there. Your development is still local to the phone.
I prefer Vim. The use of an external code editor outside of the command line may seem appealing to some, specially those coming to Termux after using an IDE or even a code editor like VS Code or Sublime. Much about Vim has already been said before elsewhere by more competent developers than me so I’ll not go into that discussion. To install Vim on Termux run the following.
pkg install vim
After installation of all the dependencies and the main packages you are good to go. Just type the command as you would on any other terminal.
vim
Vim is extensible with loads of plugins but after some research I decided to keep vim as vanilla as possible. The type of plugins you would use depends on your workflow and the language you are going to use. It may seem appealing to go and install some fancy plugins that are out there such as NERDTree and YCM² but note that some of these plugins are not really for mobile use.
Setting up Vim to be the way you like it may take some time and if you have no experience using Vim, the learning curve will surely be steep but its worth the while.
The plugins I use for Vim in my development are
- Vundle (plugin manager)
- AutoPairs (for bracket completion)
- Vim-vue (syntax highlighting for Vue.js)
- Snipmate (for snippet suggestion) and some additional dependent extensions
- Vim-snippets (snippet engine that supports Snipmate)
All of those plugins are really only for my use case. If you don’t use Vue, for example, you would not need Vim-vue. If you have a preference for a plugin manager other than Vundle, for example Pathogen, you would use that instead.
Handling some caveats
Web developer tools
There is one caveat to web development on your android phone which needs to be addressed. If you open up Chrome (or any other mobile web browser for that matter) you will find that none offers web developer tools. No access to a console, no debugging tools, not even a way to check the HTML code! This was all for naught, you might be thinking.
Chrome web browser does offer a remote way of checking mobile pages on the desktop browser’s web developer tools. I’ve never used it. It beats my purpose of doing all my development and debugging on my phone. It may not be the case for you so a small research should help you decide if that’s the path you would go.
A better and more preferable choice for me was to use Eruda.
A web developers tool bar directly integrated into your web application, courtesy of JavaScript. It offers pretty much everything I need, and is neatly tucked away from view with the use of a hover button to activate and deactivate it. Needless to say, without Eruda, my foray into web development on mobile would have been a total failure. To put it simply, as of now, Eruda is a must for me and probably for you as well.
Keyboard
Another difficulty is the keyboard. All your useful brackets are usually hidden away, and finding the caret is a pain. One option is to use a more programmer friendly keyboard. These keyboards, although useful, was not the best experience, as they needed to be switched out constantly when you are using your phone for not programming, like any normal person. The button sizes are also another inconvenience.
Where to next?
With the setup in place, you have a powerful and capable, development environment directly in your hand, literally. Both the front end and back end development within your grasp. How you would use it depends on what you are trying to create. You could:
- Install LAMP stack or LEMP stack. Install composer and use Laravel, in a manner you would usually do so on your PC.
- Install MEAN stack and use one of the many libraries (sails.js, feathersjs, ember.js, react) alongside Webpack³
- Install Ruby and go ahead with development using Ruby on Rails
You will encounter problems that you will need to sidestep and create solutions for. Termux, is not a fully fledged Linux distribution so all the packages that you get have been patched in one way or the other to work on your Android device. I’ve had problems getting some NPM packages that relied on other programs that could not be ported to Termux. Such instances have been very minimal in my experience.
Irrespective of the experience, this is the most fun I’ve had in web programming in a long time.
- Termux files are not accessible from the Android system, but the Android SD card can be accessed from Termux
- To get YCM (You-Complete-Me) to work, you will need to go about a lot of hassle and install vim-python instead of vim. I was not able to get it working after many attempts
