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
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.-
Update Termux
Open the Termux app and run the following commands to update the package list:
$ pkg update && pkg upgrade -
Install Git
Git is essential for version control. Install it by running:
$ pkg install git -
Install Vim
Vim is a popular text editor for developers. Install it by running:
$ pkg install vim -
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 runhttp-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
-
Set Up Storage Access
To access your phone’s internal storage in Termux, run:
$ termux-setup-storage -
Navigate to the Internal Storage
After running the above command, you can navigate to the storage directory by typing:
$ cd storage/shared -
Create a Project Folder
Create a new directory for your project:
$ mkdir project $ cd project -
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
-
Open the HTML File in Vim
Use Vim to open and edit your index.html file:
$ vim index.html -
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> -
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
-
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 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.
Top comments (0)