DEV Community

gokayburuc.dev
gokayburuc.dev

Posted on

React Development on Termux – Complete Guide

#termux #react #vite #android

React Development on Termux – Complete Guide

You can develop React applications directly on your Android device using Termux. In this guide, you'll learn how to set up and configure a complete React development environment step by step on Termux.

1. Initial Termux Setup

First, download and install Termux from F-Droid. After launching the app, grant access to storage by running:

termux-setup-storage
Enter fullscreen mode Exit fullscreen mode

This creates the /storage directory. It’s recommended to keep all your projects directly under this path. Folders like downloads, music, or videos are just symbolic links and may cause issues due to Android’s file access restrictions.

Warning: Avoid creating projects in symlinked directories like downloads or documents.

2. Updating Repositories and System

To access more packages and keep your system up to date, run the following:

pkg install x11-repo
apt update && apt upgrade
Enter fullscreen mode Exit fullscreen mode

The x11-repo provides access to advanced packages.

3. Installing a Text Editor

For serious development, install a more advanced editor. Recommended editors for Termux include:

  • Helix
  • Neovim
  • Vim

Installing Helix 

pkg install helix
pkg install helix-grammers
Enter fullscreen mode Exit fullscreen mode

Installing Neovim 

pkg install neovim
Enter fullscreen mode Exit fullscreen mode

4. Installing Required Packages Automatically

To streamline the setup, create a requirements.sh script like below:

# requirements.sh

packages=("git" "curl" "wget" "nodejs" "clangd" "lua53" "bash-language-server")

for package in "${packages[@]}"; do
  echo "Now Installing : $package"
  pkg install "$package" -y
done
Enter fullscreen mode Exit fullscreen mode

Run it with:

bash requirements.sh
Enter fullscreen mode Exit fullscreen mode

5. Creating a React Project with Vite

Navigate to the /storage directory and create your first React project using Vite:

npm create vite@latest my-first-react-app -- --template react
Enter fullscreen mode Exit fullscreen mode

Then navigate to the project directory and install dependencies:

cd my-first-react-app
npm install
Enter fullscreen mode Exit fullscreen mode

To start the development server:

npm run dev
Enter fullscreen mode Exit fullscreen mode

6. React Configuration for Helix Editor

For full LSP (Language Server Protocol) support in React projects, install these globally:

npm install -g typescript typescript-language-server eslint
Enter fullscreen mode Exit fullscreen mode

Then configure Helix by adding the following to ~/.config/helix/languages.toml:

[[language]]
name = "javascript"
language-servers = ["typescript-language-server"]
auto-format = true

[[language]]
name = "typescript"
language-servers = ["typescript-language-server"]
auto-format = true

[[language]]
name = "tsx"
language-servers = ["typescript-language-server"]
auto-format = true

[[language]]
name = "jsx"
language-servers = ["typescript-language-server"]
auto-format = true

[language-server.typescript-language-server]
command = "typescript-language-server"
args = ["--stdio"]

[language-server.typescript-language-server.filetypes]
jsx = "javascriptreact"
tsx = "typescriptreact"
Enter fullscreen mode Exit fullscreen mode

Final Notes

You now have a portable and fully functional React development environment on your Android device using Termux. This setup is ideal for lightweight, offline development and quick prototyping.

Tip: Use git to push your projects to GitHub or GitLab for backup and version control.

Top comments (4)

Collapse
 
skeptrune profile image
Nick K •

Woah, this is sick! I typically just do this by ssh'ing into a different computer, but it's cool that you can do it locally.

Collapse
 
gokayburuc profile image
gokayburuc.dev • • Edited

Yes, indeed. You can also do it locally in Termux. Also, I will create a video on YouTube about how to develop React in Termux.

Collapse
 
abdelkarim_log profile image
Abdelkarim •

Hi
When I execute npm run dev , an error appears saying Illegal instruction.
Any solution please ?

Collapse
 
gokayburuc profile image
gokayburuc.dev •

Move your files into storage folder and check the system permissions. Especially Samsung like Android devices restricts some operations in other folders.