If you have dabbled around with programming, chances are, you have probably already heard of the acronym MERN. MERN Stack is a combination of four technologies: Mongo DB, Express JS, React JS, and Node JS.
In this tutorial, we will cover one of our favorite frameworks for web development which has been increasing in popularity over the years. A lot of junior programmers, as well as senior programmers, want to jump and learn this latest framework. We have decided to come up with this tutorial and explain how to build your first application using the MERN Stack (MongoDB, Express, React, and NodeJS Packages). To make this tutorial a bit different compared to all other tutorials out there, we are going to show you exactly how to build an application using the MERN Stack using only your Android device!
What You need?
1. Install NodeJS and npm
Note: If you face any error while creating or initiating folders or installing packages, make sure you have given the relevant storage permissions to the Termux app. Without the required permissions you may either face errors or will be required to create your folders under Termux’s default data storage location instead of your own locations. The default directory is /data /data /com. termux /files /home which is the default home env in Termux. After initiating all modules you can move this folder into your /storage /emulated /0 location.
To install NodeJS on your Android device. Open the Termux App and Run the command below:
pkg update && pkg upgrade && pkg install nodejs npm
The command above will start to update the local catalogs/cache of the package repositories and install NodeJS in our Termux environment. You can use yarn or any other packages if you want however, for this tutorial, we will be using NodeJS. After Installing NodeJS/Yarn we have to install Mongoose, React and Express. We have, at this point, already installed one framework.
At this point, we could create a Progressive Web App (PWA) using only Node and Express but for this tutorial, we will show you how to install React as well.
2. Initialize the Setup
In this step, we will be using Express and Mongoose in separate files and install all of the modules in one folder which will work like our VirtualEnv. To proceed, create any folder in your /storage/emulated/0. Be sure to give your folder a suitable name then cd into that directory and run the command.
by running this command it will start to initiate your Node Project into that directory. where all your package and dependencies are defined and stored.
At this point, our Node package has been created and we will be prompted to enter a name, author, and other information. After initiating Node in this folder, it will automatically add some of the files in it like package.json and other files. Later on, you can install other packages to the project should you wish to. After these tasks are completed, we have to install the Express package and the PUG template engine to make things a bit easier on the development side.
3. Install The Modules and Dependencies
For Installing Express we just have to run this simple command into our work directory folder which we created above and initiated our project in:
npm install express
After, a few minutes, Express will be installed into our project. We can now start working with Express and start a minimal application for testing purposes. After you have ensured everything works fine, we can install the PUG Template Engine for convenience.
npm install pug
Run the command above to install the PUG Template Engine in your project. Thereafter, you can use the PUG Template Engine to render your templates and static files.
4. Creating a Database For Your Project
Now our project is almost completed and we want to connect our project to the database. For that, we will use Mongoose. For this project, we won’t be using MongoDB Compass or the MongoDB Shell in the local terminal.
To get started with this step, we need to create a cluster in Mongo.
- Go to the MongoDB website and create your new FREE account. MongoDB will allow us to create a database cluster on their own servers at zero costs and enable us to connect our application to this newly created cluster.
- After creating your account on MongoDB create a project. You can name this project whatever you wish to call it.
- Now, we have to create a cluster in the project we just created above.
- After creating a cluster create your data set and set the IP access 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 The Database To The 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 the above command in your package where you initiated your project. Now you can use the mongoose package to connect your project with the database. You can refer to the MongoDB documentation to learn how to connect your database to your project. This is a quick and simple process so we won’t be covering it here but the link provided should assist you in accomplishing this task.
6. Install nodemon to Run The Project
npm install nodemon --global
In the same, way we can install react and create our react app easily.
npm install create-react-app
Congratulations! You have now successfully created your first MERN Stack application using only your Android Device!
We hope, our articles helped you to understand the android web development environment & the possibilities that exist. Gone are days where we were limited to only desktops and laptops for development. In today’s world, smartphones have become more powerful and the possibilities they provide are endless! In this tutorial, you have learned how simple it is to develop a MERN Stack web application using only an android device. If you found this tutorial helpful, feel free to share it with your friends & let them know that it is possible to develop using an android device!
Sharing is Caring ♥