DEV Community

Cover image for Running a Node.js App (Angular/React) on Android using Termux
Radu-Alexandru B
Radu-Alexandru B

Posted on

Running a Node.js App (Angular/React) on Android using Termux

#tutorial #android #webdev #node

Hello everyone!

In this tutorial, we will run an Angular Node App (and also a React App) on Android, and host it on localhost by using the Termux app. We will also use the Acode Editor application to browse and easily change our code files. NO ROOT IS NEEDED.

Disclaimer:

  • The chances of encountering any issues that may affect your Android device are minimal to none. However, I'm not responsible for any damage, data loss, or malfunction that may occur to your Android device after following this tutorial.

Prerequisites:

Table of Contents:

Installing Termux

First, we need to install Termux (terminal) App from F-Droid * (or from the Termux GitHub Repository). We will not install the Termux from Google Play Store due to lack of updates there.

* Please make sure that you don't press the big blue "Download F-Droid" button as it will download the F-Droid store instead of the Termux App!
Currently latest available version as of now (September 24, 2023) is Termux Version 0.118.0 (118) added on 2022-01-11

Installing apt package manager and other dependencies

Now that we are in the Termux app on our Android device, we can run the following:

  • Update and upgrade Termux's pkg package manager 
pkg update -y
pkg upgrade -y
Enter fullscreen mode Exit fullscreen mode

Note: In Termux you can click and hold to show the copy/paste menu (in order to copy-paste these commands)

  • Install apt Package Manager as well as updating and upgrading (Note that we add the -y option to automatically say "yes" to the install when asked) 
pkg install apt -y
apt upgrade -y && apt update -y
Enter fullscreen mode Exit fullscreen mode
  • Install openssl-tool dependency 
apt install openssl-tool -y
Enter fullscreen mode Exit fullscreen mode
  • Some other packages might come in handy, such as git 
apt install git -y
Enter fullscreen mode Exit fullscreen mode

Installing Nodejs

Now, time to actually install Node.js

  • We just need to run: 
apt install nodejs
Enter fullscreen mode Exit fullscreen mode
  • And check the installed version 
node --version
Enter fullscreen mode Exit fullscreen mode

Running Node 20 in Android Termux

Note: If we want a different version of Node.js

  • We can get the apt package for nodejs 16 by running the following and update the apt package manager including this version
curl -sL https://deb.nodesource.com/setup_16.x | bash -

apt update
  • And then just install it
apt install nodejs

node --version

Resource: https://computingforgeeks.com/how-to-install-node-js-on-ubuntu-debian/?expand_article=11

Installing and Running Angular (ng)

Let's install Angular "globally" by running:

npm install -g @angular/cli
Enter fullscreen mode Exit fullscreen mode 
ng version
Enter fullscreen mode Exit fullscreen mode

And also let's create a quick demo project:

  • First, let's create a separate folder 
mkdir projects
cd projects/
Enter fullscreen mode Exit fullscreen mode
  • And create a new Angular app within angularapp directory 
ng new angularapp
cd angularapp/
Enter fullscreen mode Exit fullscreen mode 
ng serve --open
Enter fullscreen mode Exit fullscreen mode

Running Angular App in Android using Termux

Installing Acode Editor App

With Acode App from F-Droid installed, we can now browse through Termux's created directories and files within its emulated storage.

Running Angular App in Android using Termux

And of course, edit files and see changes in real-time (without refreshing the app).

Running Angular App in Android using Termux

Installing other packages in Termux

Running React App (npx)

We can also create a React application.

  • Just run the following (also write "y" if prompted to install the "create-react-app" package) 
npx create-react-app reactapp
Enter fullscreen mode Exit fullscreen mode 
cd reactapp
Enter fullscreen mode Exit fullscreen mode 
npm start
Enter fullscreen mode Exit fullscreen mode

Running React App in Android with Termux

Installing Java

As a bonus, we can also install other APT packages such as openjdk to run Java:

  • We can search any available packages within APT (compatible with an ARM-based CPU) by running apt search java
  • We see that we can install Java 17 by running 
apt install openjdk-17
Enter fullscreen mode Exit fullscreen mode 
javac --version
java --version
Enter fullscreen mode Exit fullscreen mode
  • Now let's do a quick test 
cd projects/
mkdir javaapp && cd javaapp
Enter fullscreen mode Exit fullscreen mode 
vi Hello.java

# Note, you can also install vim by running
apt install vim
Enter fullscreen mode Exit fullscreen mode 
public class Hello {
  public static void main(String[] args) {
    System.out.println("Hello World");
  }
}
Enter fullscreen mode Exit fullscreen mode 
cat Hello.java
Enter fullscreen mode Exit fullscreen mode
  • Compile and run 
javac Hello.java
java Hello
Enter fullscreen mode Exit fullscreen mode

Running Java 17 in Termux on Android

Conclusions

I wrote this mini tutorial as I didn't see that many quick tutorials on this topic so I thought I should write my own (or at least for my future self).

The little mind-boggling idea is the mobile devices that we use every day (smartphones, tablets) are getting more powerful year by year - e.g. see the performance comparison between Snapdragon 888 (2020) vs Snapdragon 8 Gen 2 (2022) - therefore it feels like those devices aren't used by full their extent.

Performance-wise, mid-range devices (such as Lenovo Tab P11, Samsung Tab S7 FE, Xiaomi Pad 6, or Samsung Galaxy S21 FE) are on pair with budget laptops from around 2020 (at least from the bench scores).

However, the weird part is that I use my budget laptop for multitasking tens of heavy-load applications. On a laptop equipped with a quad-core Intel I5 gen 10 CPU with 16GB of RAM (that scores around 3000 MultiCore points in Geekbench 5) I always have 20-30 Chrome tabs open while running 2 to 3 FullStack Docker Apps (with MySQL/Java/Nodejs and other microservices), while also playing videos in the background and compiling with maven java projects, while also doing some quick edits in Excel (Sheets) or Word (Docs) - and the performance/smoothness is fine (not great, but okay). So why can't we use our mobile devices as well for all these tasks?

Maybe the mobile devices are still early for such tasks and the software is not yet there. Maybe the limiting factor is the different architecture (ARM based on RISC vs. x86 based on CISC), however, Apple's M1/M2 chips might have proved this wrong. Maybe the general public will never use their smart devices for high-load multitasking and productivity work (and only use them for media consumption and fast email/news checking, as these devices were intended).

We will see.

Until then, I hope that this article at least sparked some curiosity!

Have a great day!
Radu

Top comments (1)

Collapse
 
radualexandrub profile image
Radu-Alexandru B •

One more note: You can also use Kiwi Browser Android App for arm64 to have the Dev Tools panel when testing a web app.

Read next

aortega profile image

Introvertish to Extrovertish

Alverto Ortega -

hugaidas profile image

Bug of the month: Cannot convert a BigInt value to a number

Victoria -

dev_dcpushpa profile image

Step-by-Step Angular 17 & .NET 8: Build a Secure Auth App (FREE Course)

Pushpa Raj Dangi -

adityaoberai profile image

Social media authentication: convenience vs privacy

Aditya Oberai -