Engineering

Use Your Phone to Make a Simple Django and ReactJS Server

Gidraf Orenja
By Gidraf Orenja
  • Blog
  • Engineering
  • Use Your Phone to Make a Simple Django and ReactJS Server

In this Termux tutorial we will be creating a simple app using Django and ReactJs platforms. The purpose of this article is to show coders who want to learn outside the framework of a computer how they can use some simple and downloadable programs to create on their phones. This particular tutorial will utilize an Android device to facilitate all of the coding.

The Termux tools we’ll be using

The simplest way to build an Android app is by using Termux because it is an Android terminal emulator and Linux environment that allows the user to build without additional rooting or setup. In addition, we will use the Termux-API to link an interface to both Android and Google Chrome hardware. The Termux app will be running the terminal commands on the device for our purposes. To access more information about Termux terminal before we begin check out this link.

Termux and Termux-API installation

You can download both Termux and the Termux-API by accessing them on the Google Play store.

Installation of Python

The Python programming language will be required in order to utilize and run the Django server. To learn more about Python, find additional information here.

Once you have successfully installed Termux and Termux-API, follow these steps:

– Open Termux
– Install Python by running pkg install python.

Once installation is complete, run Python on Termux to make sure that Python has installed correctly.

Congrats! You have successfully completed the first step by installing Python on your phone.

Making a virtual environment

For this tutorial, you will need to create a virtual environment to work on your project packages. In case you don’t know the specifics of a virtual environment in Python, here is a great tutorial which explains everything. On the Termux terminal run exit() to leave Python CLI.

Create a virtual environment called venv by running python -m venv my_venv on your Termux terminal.

Run ls within the Termux terminal and you should see that new folder called my_venv has been created. Your environment packages (ie Django) will be contained within this folder.

Start your virtual environment by running the following: my_env/bin/activate.

Installing Django

The next step we will tackle is installing the Django framework.

To install Django, run the following command: pip install django on your Termux terminal. Once Django has installed you should see the message below.

Run Django server

A best practice is to test run the Django application by running the Django server, but to run a test you must first start a Django project. If you are unfamiliar with Django or how to create a comprehensive app, you can read more about the process here.

To create a Django project named myapp, run django-admin startproject myapp.

Run ls and after you complete this task there should be a new folder called myapp.

To change the project folder, run cd myapp.

Run ls. Take notice of the file named manage.py. You will use this file to run the server.

Run pythonmanage.py runserver and you should see the following screen.

You did it! You used Django to make a mobile app. To see it use localhost:8000 and you will be able to see something like the image below.

React and Nodejs installation

The process for installing React and Nodejs is very similar to installation of Python and Django, except that you will need to create a different session for the React server app. Because we have already gone through Termux several times, I won’t be including the screen shots for this part of the project, just follow along with the instructions on your personal screen.

Open the Termux navigation drawer by sliding the screen from left to right.

Create a new window of Termux session by selecting new session.

Much like with Python and Django, to create a React Js server for this session, we will need NodeJs to be installed first. If you need a tutorial on how to install NodeJs there is a great lesson here.

To install node.js to your phone run pkg install node.js.

You will need to know which version of node.js has installed to your phone, so first run node-v to check if node.js has been properly installed and you should also be able to view the version that was installed.

Run npm install create-react-app after Nodejs has finished installing. You will be using the library to create a React app. If you would like to learn about ReactJs, check out this tutorial.

Run mkdir reactapp after create-react-app has finished installing. By doing so you will be creating a new folder project that will be used to create the React server app.

Switch to the new reactapp folder by running cd reactapp.

Run npm init react-app myapp to set up and install all the tools and commands you need to run and build the new react app on your device.

Switch to your React project by running cd myapp.

Run npm start to start the React server. Once the server has been built, open your browser and enter localhost:3000 in the URL field.

You should see a React log similar to the image below on your screen (it should be rotating).

Wow, you did it! You have now created a ReactJs application on your phone!

Conclusion and Recommendations

Termux and Termux-API are very versatile and exciting emulators. You may consider utilizing git to recreate projects that can be found on GitHub using your phone. Another option is to pair Termux with the text editor Vim for creative new projects. By mastering these early skills, the sky’s the limit on the apps you can create. Don’t forget to share future projects with me, I love to see the apps you can build with your phone.

Are you a Python or ReactJS developer looking for your next role? Apply to join the Andela Talent Network today.

Gidraf Orenja
Written by
Gidraf Orenja
A passionate self-taught developer, Gidraf Orenja is a full-stack engineer who sharpened his technical skills with Andela training programs. He is based in Nairobi, Kenya.