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

dhyfullah_ghalebahmed_d1 profile image

Create new action in Laravel nova for download PDF for all websites pages

Dhyfullah Ghaleb ahmed -

mitchell_cheng profile image

Text compression & Code splitting & Modern image formats - Performance optimization

Mitchell -

ipigantenk profile image

How to install SSH Server in Termux

Ipii -

mds05 profile image

Understanding the Spring Security Architecture

Md Shahriar -