ReactJS is becoming widely popular due to it’s easy syntax and components based architecture.
I tried to set react localhost environment on android device and it went well, So here I am going to describe how I did that.
Gather resources to get started
First of all you need an android device ofcourse.
Your android device should be android OS of version 7.0 as minimum.
I used these 4 applications excluding a browser (Chrome) to run localhost.
- Termux ◼
- Material files app Ⓜ️
- Acode editor ?
- Hacker’s Keyboard ⌨
You can find all of them at Play Store but I would recommend to get Termux from F-droid
Here is How to get Termux
Open your android browser (Chrome) and go to this link
Now you have two options..
- Download F-droid App and then download Termux via it ( This will help you to keep up with updates)
- Directly download Termux apk from the F-droid website.
After downloading and installing Termux ◼
Install Material Files app Ⓜ️ from Play Store here
Install Acode Editor app ? from Play Store here
and Hacker’s Keyboard ⌨ as well
Set your default keyboard to Hacker’s Keyboard
How to setup termux storage
Now we will setup Termux ◼ to access our device’s storage. so that we can store and edit our react project files.
Open Termux and type the following code ?
It will ask you to access storage permission, so allow acess to storage and grant storage permission.
Now you’re able to run common commands like cd, ls, pwd, rm, rmdir, mkdir etc.
If you wanna learn basic commands used in termux here you can learn with this blog post.
Now your termux is ready to install packages.
Installing Node JS and npm
To install React, We have to install nodejs and npm first but before that let’s update all available packages in our system.
Now clear the termux screen with clear command or create a new session.
Update all the packages and dependencies installed on the system with this command.
apt update && apt upgrade
Now we are going to install nodejs with this command
pkg install nodejs
This will install both nodejs and npm.
You can test installation of nodejs with checking version of nodejs and npm with following commands
To check npm version, type
Installing react into the system
After installing nodejs successfully, run the following command to install react
npm i -g create-react-app
This will install ReactJS globally in your system.
Now let’s create a sample app project.
Go into storage folder
Make projects directory with this command
Now we will move into projects directory, type
Let’s create react app
We will create a react app here.
To do this type the command below and hit enter
npx create-react-app my-app
I have named this projects as my-app, you can name your project aanything.
It will start installing dependencies and will create a new folder ‘my-app’ into projects directory.
Ensure a good intetnet connection to install it without fail.
If you fail somehow, you can try again with above command.
Once you finish installation, it will show you this
Now follow these last commands to see magic of termux in localhost
It will take you into ‘my-app’ folder.
Now type following command and hit enter
This will take you to your browser and it will open a tab with localhost:3000.
If it’s not showing this, you can open it manually
Where you’ll find something like this.
Now give yourself a treat, you have installed and run ReactJS in android successfully.
How to access react files in android
Everything went well till now, but here’s a catch.
⚠️ You won’t find projects directory in your device file manager because these folders are located in root directory of your device and you can’t access or edit react code files until you root your device.
But we have a solution here.
That’s where Material Files App Ⓜ️ helps you. It is a root explorer who let’s you access root files without rooting the device.
It makes you to acess Termux storage folder easily.
Let’s see how.
Open Material Files App
Allow storage access permission.
Open Sidebar and click on ‘Add storage…‘
Select ‘External Storage‘ Option
This will take you to termux storage where you need to allow it to access termux storage.
After that you will see another storage in sidebar of material files app Ⓜ️ named home
This home direcrory is storage access to termux which will take you to storage folder.
Here you can access projects folder and within it lies our my-app folder.
In my-app directory, you will find all react code files you need.
Edit your files with Acode editor
Now you can edit them with Acode Editor ?
Acode editor is perfect for editing react codes on android device.
For easy access to my-app folder, you can make a shortcut of this folder at your home screen.
That is how you can create react app on android device.
That is all mates! Let me know if you’re having any kind of problems in this tutorial.
Comment and share.
Thanks for reading this far. Hope you liked it
You can join my newsletter for informative and interactive content about programming, design, art and doodles.