Create the simplest Django and React server on your phone

Photo by Yoal Desurmont on Unsplash

We will be creating the simplest app we can build with Django and ReactJs frameworks. This tutorial aims to give aspiring coders who don’t have access to a computer starting point if they want to code on their phone. Steps and procedure explained here should be practised on Android phone.

1. What is Termux and Termux API?
Termux is an Android terminal emulator and Linux environment app that works directly with no rooting or setup required. Termux API work with Termux to provides an interface to access Android and Chrome hardware features. We will be using termux, to run the terminal commands on the device. learn more on how to use termux here

2. Installation of Termux and Termux API.
We will need to install both Termux and Termux API they can both be downloaded on google play

3. Installation of Python
In order to install and run the Django server, we will need to have Python programming language installed first on our device. Read more about python here.

When you have finished installing the Termux and Termux API application,

• open Termux.
• Run pkg install python to install python.

• When python has finished installing you can run python on Termux to confirm the version of python installed.

Congratulations!! you have just installed python on your phone.

Creating a virtual environment
We will use the virtual environment to manage our project packages. If you are not familiar with the virtual environment in python, this great tutorial is for you.

• Exit the python CLI by running exit() on your Termux terminal.
• Run python -m venv my_venvon your Termux terminal to create a virtual environment named venv that we will be using for this tutorial.
• Run ls on your termux terminal and notice that a new folder has been created named my_venv — that folder will hold our environment packages i.e Django.

• Run source my_env/bin/activate to activate the virtual environment.

Installing Django
Now let us install the Django framework

• Install Django by running pip install django on termux terminal.
  When Django has finished installation the below message will appear.

Run Django Server
It’s time to run our Django application and test it but in order to run the Django server, we need to start a Django project. I will recommend you read more about Django and how to make a more comprehensive application with it here if you are unfamiliar with it.

• Run django-admin startproject myapp to create a Django project called myapp.
• Run lsand notice there is an additional folder created named myapp.

• Run cd myappto switch to our project folder.
• Run lsand notice there is a file named manage.py we will be using it to run the server.

• Run python manage.py runserverto run the Django server. The following screen should appear.

Congratulations!! you have just created mobile Django app.
Open your mobile browser and use localhost:8000 as the url, you should see content similar to the image below.

4. Installation of Nodejs and React.
The Nodejs and React installation procedure isn’t that much different from python and Django installation, but we will need a different session to create the react server app. I assume by now you are already familiar with termux so I won’t be posting a lot of screenshots please observe it from your terminal.

• Slide the screen from left to right to open Termux navigation drawer.
• Select new session option a new window of Termux session will be opened.

We will create the ReactJs server in this session. Just like Django and python in order to run ReactJs server we need nodeJs to be installed first. If you are not familiar with NodeJs please read more about it here

• Run pkg install nodejsto install nodejs on your phone.
• Run node -v to check if nodejs has been properly installed and also to know the version of nodejsinstalled.
• Run npm install create-react-app after Nodejs has finished installing. We will use this library to create react app. You can learn more about Reactjs here
• Run mkdir reactapp after create-react-app has finished installing. This command will create a new folder project that we will use to build the react server app.
• Run cd reactapp to switch to the newly created folder named reactapp
• Run npm init react-app myapp this command will set up and install everything you need to run a react app on your phone.
• Run cd myapp to switch to your react project
• Run npm start to start the react server, wait for the server to build and open your phone browser enter localhost:3000 on your URL address field.

You will see a beautiful react log similar to the screenshot below rotating

Congratulations you have just created a Reactjs app.

5. Conclusion and Recommendations
Termux is a cool terminal emulator, you can use git and clone projects from GitHub and run them on your phone. Termux can also be used with Vim as the text editor. Now the power in your hand has been unlocked I want to see what you will build with your phone. 😀 😀