Setting Up Termux and Node.js on Android for Web Development

Brix Mavu - Jul 22 '22 - - Dev Community

Want to start web development on your Android phone? This guide will show you how to use Termux and Node.js to set up a web development environment and create your first project.


Step 1: Install Termux and Node.js

  1. Download Termux
    Termux is a powerful terminal emulator for Android. Download it from F-Droid, and make sure to get the latest APK file from the bottom of the page.

  2. Update Termux
    Open the Termux app and run the following commands to update the package list:

    $ pkg update && pkg upgrade
    
  3. Install Git
    Git is essential for version control. Install it by running:

    $ pkg install git
    
  4. Install Vim
    Vim is a popular text editor for developers. Install it by running:

    $ pkg install vim
    
  5. Install Node.js
    Node.js is a JavaScript runtime that allows you to run JavaScript outside the browser. In this tutorial, we will use Node.js to run http-server , a simple tool to serve your web projects locally. To install Node.js, run the following command:

    $ pkg install nodejs
    

Step 2: Start Your First Project

  1. Set Up Storage Access
    To access your phone’s internal storage in Termux, run:

    $ termux-setup-storage
    
  2. Navigate to the Internal Storage
    After running the above command, you can navigate to the storage directory by typing:

    $ cd storage/shared
    
  3. Create a Project Folder
    Create a new directory for your project:

    $ mkdir project
    $ cd project
    
  4. Create Your First Files
    Now, create the HTML and CSS files for your project:

    $ touch index.html style.css
    

Step 3: Writing Your First HTML Page in Vim

  1. Open the HTML File in Vim
    Use Vim to open and edit your index.html file:

    $ vim index.html
    
  2. Add Boilerplate HTML Code
    Copy and paste the following code into index.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>My Website</title>
    <link rel="stylesheet" href="./style.css">
    </head>
    <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    
    <script src="./script.js"></script>
    </body>
    </html>
    
  3. Add Some Basic Styling
    Next, open the style.css file and paste this CSS code to style your HTML elements:

    h1 {
    color: red;
    }
    
    p {
    color: blue;
    }
    

Step 4: Serve Your Project Locally

  1. Install HTTP Server
    To preview your project, you need to use a lightweight web server. You can run one easily using npx:

    $ cd storage/shared/project
    $ npx http-server
    
  2. Access Your Website
    After running the command, Termux will display a local address (e.g., http://127.0.0.1:8080). Open Chrome or any web browser and paste the address into the URL bar to see your website in action.


You’ve successfully set up your Android phone for web development and created your first project! You can now experiment and build more complex websites using this setup.


. . . . . . . .
Terabox Video Player