Developing a website from your phone

Introduction

Can you get an IDE, Git management, and full terminal experience in your pocket? You absolutely can! There are definitely pros and cons. Here I'll walk you through setting things up, then I'll cover my experience building a web-app from my phone.

Prerequisites

A phone running Android.

Then, you will need the following apps to get started:

• Termux. This is an emulated Linux terminal.
• Acode. This is an Android IDE.
• Material Files (alternatively FX File Explorer which is closed source). You'll use this to give Acode access to any repository you download with Termux.
• (Optional) Unexpected Keyboard. This keyboard makes coding easier. No autocorrect messing up your variable names and HTML tags, just a keyboard.

Not all of these can be found on the Play Store. You can either download them directly from their Github repos, or install F-Droid which is a FOSS app store. The required apps are all there.

Setting things up

One the apps are installed, open up Termux. Run the following commands:

// Update and upgrade any outdated packages
apt update
apt upgrade 

// Let Termux access your storage (tap "Allow")
termux-setup-storage

// Pick ONE to install Nodejs
// For node v18
pkg install nodejs-lts
// For node v20
pkg install nodejs

// Install Git and Git CLI
pkg install git gh

Authenticate with Github through the following command:

gh auth login

The easiest path for me to login was the following:

• Choose "GitHub.com" with the Termux arrow keys and hit enter.
• Choose "HTTPS".
• Choose "Login with a web browser".
• Copy the code it gives you and hit enter.
• Paste in the code in the browser page (login first to your browser if you need to) and authorize.

Now let's give Acode access to Termux's scoped storage.

• Open Acode.
• Hit that hamburger menu, make sure you're on your Explorer tab.
• Hit "Open Folder".
• Hit +.
• Hit "Add Path".
• Hit "Select folder".
• Make sure you're opening Material Files (or the alternative if you know what you're doing).
• Hit the hamburger menu, the choose "Termux" from the list
• Hit "USE THIS FOLDER" and then "Allow".
• Back in Acode now, hit OK and then choose "home" from the directory list.
• Hit the checkmark, then OK.

You should now see the HOME directory from Termux listed in the Explorer.

Get coding

At this point, things should seem familiar. I want to point out some options you have at this point:

• Look through Acode's plugins. I have used and like the following:
  • Github - this doesn't do a whole lot, but you can look at code from your repositories. I had to authenticate by getting an access token from Github and pasting it in for this plugin to use.
  • Prettier - excellent for formatting your code. I went into Acode's settings and enabled "format on save" for an excellent life improvement.
  • "AcodeX - Terminal" - This plugin provides documentation, don't miss it! You can link your Termux session to Acode for an integrated terminal.
  • PathIntellisense, Snippets, Path Linker - with varying success they help make things a little easier.
• Clone any repository in Termux using gh repo clone <repo path>.
• Run git init to initialize any coding project you start here.
• Use npm install -g <package_name> to install a CLI for your framework choice. In my case it was Angular, and it worked great!

My workflow consisted of the following:

• Clone an existing repo of mine from Termux.
• Run npm i then npm run start.
• Open my browser to localhost:4200.
• Switch to Acode, and start tinkering away at the code.
• Debug through the browser (Firefox has a Mobile DevTools extension that's handy. Kiwi browser has dev tools as well).
• Switch back to Termux when I'm done, stage (git add -A), commit (git commit -m "commit message here"), and push (git push).

NOTE: There is a hidden slide-out menu in Termux (from the left). You can start another terminal session from there so you can serve your project and manage your repo through Git at the same time.

My experience

So I have some thoughts. Some are good. I'll start with those:

• Once set up, hopping into a coding session on the go is pretty easy. This is excellent for when I need to make a quick fix on an existing project that I had missed. I can do it from bed, the couch, the car as a passenger, wherever in about 5-10 minutes.
• Coding on a phone notwithstanding, the experience is pretty smooth. It all just works.
• I was able to create a quick flashcard webapp for myself using mostly my phone. More on that later.
• All the tools are open source, and provide flexibility for any web project (and even non-web projects) as needed.

Here are my qualms:

• This eats up a lot of RAM. My phone has 8 gigs, which isn't impressive. In fact it's rather average. You may find that Acode sometimes gets killed if it isn't in the foreground. Luckily Acode is great at reloading the exact spot you were before if this happens. If you have a 12gb phone model, you'll be alright.
• NVM (Node Version Manager) does not work on Termux. Like at all. If your project doesn't work on Node v18 or v20, you're out of luck. This sucks, and I'm sorry. NVM relies on some sort of prefix that Termux already uses. This may change in the future, or you can find a way to install a specific version of Node. I didn't have any luck until I learned you can install nodejs-lts to go back to the last major version, which luckily solved my problem.
• Code snippets and autocomplete are hit or miss; mostly miss. They tend to remember what you've typed before and suggest that. I use Angular, so your mileage may vary.
• Import paths don't have suggestions. There are extensions that are supposed to do this, but didn't work for me in Angular. I had to find all my own paths and type them in manually.
• Oh, the strain! Doing all of this on a small phone with a tiny keyboard is not the most ergonomic. It's not even comfortable. If you wanted something long-term you could hook up a Bluetooth keyboard and prop up your phone. But isn't that like... using a laptop? At that point you might as well switch back to a computer. Well shoot, we just went full circle here. Figure out your use-case, enjoy the power the FOSS community gave you, and stay practical with your technologies.

I mentioned previously that I "mostly" made a webapp through this method. And indeed I did! You can check it out here: Angular Flash Cards for Language Learning. It's nothing special, but it works and it's mine. So how'd it go? Well, everything was fairly simple! The few exceptions were as follows:

• Moving files around to different directories.
• Trying to find all the import paths for packages, like when writing Angular Animations.
• Bulk work, like editing large object or array constants.

For each of these, I found myself returning to my computer to knock it out in a tenth the time it would take me on my phone, then going back to Acode after.

Conclusion

If you're working on a toy project, experimenting with code, or doing small fixes on the go, then this setup is perfect. For anything else, it will quickly be cumbersome and you'll wish you had sat down in front of your computer instead. But in theory, if you had to, could you do all your personal projects this way? Absolutely!