How to Install MERN Packages on Android

Install React on Android, Mern Package android, Web App on Android

Hello Guys, Today we are going to cover our favorite framework for web development which is popular these days. Everyone wants to work with this latest framework. So, guess what we come up with this blog to use all Express, MongoDB, React, and Nodejs packages in this one and only on your Android device to develop a website without any hassle.

What You need?

  • Android Phone
  • Termux App
  • Working Internet

1. Install Nodejs and npm

So, we going to start with installing the Nodejs package which is necessary for running javascript on the bash console. npm will be installed after installing Nodejs, we don’t have to worry about npm (Node Package Manager).

To install Nodejs on your Android device. Open Termux App and Run this command:

pkg update && pkg upgrade && pkg install nodejs npm

The upper command will start update the local catalogues of the enabled package repositories and install Nodejs in our Termux environment. You can use yarn or any other packages if you want. but for this tutorial, we will be using Nodejs. After Installing Nodejs/ Yarn we have to install Mongoose, React and Express. we have already installed one can Create a progressive web app using only Node and Express also but we will also tell you how to install React.

2. Initialize the Setup

Now, we will be using Express and Mongoose in separate files and install all modules in one folder which will work like our VirtualEnv. Create any folder in your /storage /emulated /0. Give it a suitable Name then cd into that directory and run the command.

npm init

by running this command it will start initating your Node Project into that directory. where all your package and dependencies are defined.

Note: If you face any error while creating or initiating the folder make sure you have gave storage permission to your termux app or you may create your folder in under termux data storage like /data /data /com. termux /files /home which is the default home env in Termux then after initiating all modules you can move that folder into your /storage /emulated /0.

Our Node package has been created and it will ask some name, author, etc. After initiating Node in that folder, it will automatically add some of the files in it like package.json, and other that later you can install other 3rd party modules in that package. After these works are completed we have to install the Express and pug template engine for our convenience.

3. Install Module and Dependencies

For Installing Express we just have to run this simple command:

npm install express

Into your newly created folder where you had initiated your project. After, a few minutes the express will also get installed in your package. Now, you can start working with Express and start a minimal application for tests. After everything works fine now we can install pug template Engine for convenience.

npm install pug

Run the above commands to install the pug template engine in your project and then you can use the Pug template engine to render your templates and static folder.

4. Create Database for our Project

Now our project is almost completed and we want to connect our project with the database. For that, we will use Mongoose but we don’t want to use a compass or CLI in the local terminal.

So, Let’s create a cluster in some servers.

  • Go to the MongoDB website and create your new account. This can run our mongoose client in their own server at zero costs and we can connect our application to MongoDB from the local server.
  • After creating your account on MongoDB create a project name there with any name.
  • Now, we have to create a cluster in that project name that we create in mongoDB.com.
  • After creating a cluster create your data set and set the IP to 0.0.0.0/0 to access it from anywhere or you can add your own specific IP as well. So, that database can be only accessible by you.

5. Connect Database to our Project

Now, After setting up our MongoDB we have to connect to our mongoose client locally using the mongoose node package.

npm install mongoose

Run this above command in your package where you initiated your project. Now you can use the mongoose package to connect your project with database. you can refer to the documentation to know how to connect your database to your project. that’s a very easy process.

6. Install nodemon to run the Project

Now, we have installed all necessary modules and we had almost done everything to code a progressive web application. But we will use nodemon package to run our file. It helps to track the changes in our javascript files and automatically reload the webpages to save time while developing.

npm install nodemon --global

Install in it your default Termux directory so that it can run properly. For debugging javascript. we can use Eruda In chrome which gives us developer tools of chrome in an Android phone.

In the same, way we can install react and can create ours react app easily.

npm install create-react-app
create-react-app my-app

And the other process is the same as mentioned above just make sure if you are facing some error you can install all your package in /data /data /com. termux /files /home then can move it to /sdcard /0.

Hope, our articles helped you to understand the android web environment. How these things work on android and how you can use that. If this helped you in any point make sure to share this with all your friends and comment below if you are face any error. we are always ready to help you.

Sharing is Caring ♥

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *