MERN STACK Project on a Simple To-do Application
MERN STACK PROJECT IMPLEMENTATION ON A SIMPLE TO-DO APPLICATION
The main aim for this project is to explain the DevOps concepts and processes using a MERN web stack on a simple to-do application. Some developers use this set of frame-work and tools to develop software products. We would be carrying out this project in the AWS platform. MERN is an acronym of sets of technologies used to develop a technical software product.
MongoDB
Express
ReactJS
NodeJS
PROJECT:
Pre-requisite for the projects is the following.
1) Fundamental Knowledge of Installing and downloading software 2) Basic Understanding of Linux Commands
3) AWS account login with EC2 instance
4) Internet connection\
IMPLEMENTATION STEPS:\
i) Ensure you login with your details to your AWS console and click on the EC2 link to create instances.
iii)Click on launch instance dropdown button and select launch instance .
iv)Fill in all relevant details to the LEMP project such as:
Type in the name and additional tag to the project (mern). Select ubuntu from the quick start option .Also note that the Amazon machine image selection varies from user to user
Select Ubuntu server 22.04 LTS (HVM),SSD Volume Type (Free Tier )
v)The instance type selected in the configuration is the t2 micro-free tier.
Click on the "Create new key pair" link.
Ensure the Checkbox remains unchanged on the "Create security group".
vi)Type in the key pair name, chose the default key pair type and private key file format (rsa and .pem) and clicked the "Create key pair button"
vii) The .pem file was downloaded successfully
viii) I have deliberately chosen default settings to allow SSH traffic from anywhere as well as the storage volume given by AWS.
Then we proceed to launch our instance finally.
Instance successfully launched and click to view Instance details with the IP address.
Click the "Connect" button and copy the ssh client details we would be using on the git bash console.
Open git bash on visual studio code or whichever console is convenient to use. We are using git bash here with Visual Studio Code
Type YES to connect.
You have successful connected to the EC2 instance launched on AWS via ssh\
Type clear to have a clear console and proceed to updating the lists of packages in the package manager.
Then we proceed to upgrade the packages and Type YES to continue.
Still upgrading
Now we need to get the location of Node.js software from the ubuntu repositories by typing the command below.
We can now install Node.js on the server and confirm the versions of the node and npm package managers as shown below
Once versions are confirmed. We created a directory called To-Do project and verify the directory is present .We then change directory with the cd command to the new directory we just created .
After which we initialize the project with the npm init command as seen below.
The reason for this is to create a new package.json file .This files contains the application and its dependencies it needs to run and we need to press the Enter button several times to confirm the details we intend to use for its documentation and finally click "yes" to proceed .
An error appears which states we should install a new minor npm update from 9.51. to version 9.6.7 as seen below
Lets run the ls command to confirm the package .json file is created.
Next, we will install ExpressJS and create the Routes directory
INSTALL EXPRESSJS
Express is a framework for Node.js which further simplifies
development and makes things work seamlessly. Express helps to define routes of the application based on HTTP methods and URL's.
We install the npm package modules for express and create an index file. Ensure to verify with an ls command to see the newly created index.js file.
We then install the dotenv module
Edit the index.js file with the vim command and type in the code below. Please take note of the port :5000 that was in the file .This would be required late when we want to get it working on the browser.
Save with the esc :wq Enter. Next step is to start our server to see if it works
Our server is running at port 5000. We need to click Ctrl C to exit from the message caption . We would need to create an inbound rule to open at port 5000\
Click on the security button
And click the security group link.
Click on "Edit inbound rules "in order to add a new rule for port 5000
Add a new rule.
Type in the port range and click "Anywhere ipv4"
Click the "Save rules" Button.
The inbound rule successfully modified
Open any browser of your choice and access the URL
ExpressJS default page successfully displayed.
From the MERN stack, we have implemented with Linux and now have Express ready\
We would need to perform some actions in our simple to-do application which are the following:\
1) Create a new task.
2) Display all tasks.
3) Delete all tasks.
Please note that each task is associated with some particular endpoints and would use the standard HTTP request methods namely: POST ,GET AND DELETE\
Each task would require us to create routes that define the endpoints that the to-do application would depend on .
So we create a folder route and change the directory to the new folder
We create a file called api.js
Edit the file and paste some code inside it .press ESC , save and exit with ":wq
After this has been done, we would need to create models because we would be making use of a NoSQL database called MongoDB. These models function at the helm of JavaScript-based applications and make it very interactive. Models are also used to define database schema which is the blueprint of how databases are constructed including other data fields that aren't required to be stored in a database known as virtual properties.
To achieve this we need to install Mongoose which is a node package.
The next step is to change the directory back to the Todo folder and install Mongoose.
Create models folder and change directory into the new folder Create a todo.js file and edit the file and paste this code inside it .
press ESC , save and exit with " :wq" command
We need to change the directory to update our routes and edit the api.js in the routes directory to make use of this model as illustrated below.
Replace this previous line of codes with the delete command :%d
With this new set of codes. Press ESC , save and exit with " :wq" command
After completion we need to create the MongoDB database
MONGODB DATABASE
A database is needed to store data and we would be making use of MongoDB database provided by mlab as a service solution. It is expected to have signed up for an account and select AWS as the cloud provider choosing a region close to you .
When we click on browse collections we have access to the database name and collection name created . We would need these details when configuring the .env file .
Please note: When you sign up ensure you change the time of
deleting the entry from 6 hours to 1 week and for the testing purpose we would allow access to our database from anywhere for study purpose but not secure to do that .
When we click on connect, we connect to our application through the drivers as seen below
We then cope the connection string and edit the parameter to fit our details ,then input it into our application code in this format
DB = 'mongodb+srv://<username>:<password>@<network-address>/<dbname>?retryWrites=true&w=majority'
Create a file in Todo directory called .env and edit the file and paste the connection string from the database inside it .press ESC ,save and exit with " :wq
Then we need to update index.js to show the use of .env so that node.js can connect to the database
Simply delete the existing content and update the previous codes with the code below.
Replace this previous line of codes.
With this new set of codes below. Press ESC, save and exit with ":wq" command
Using environmental variable is very important and most secure and best practice to store sensitive or secret data from the application.
We would start our server using the command below and our database should be connected successfully.
Now we open our postman to be able to perform some API request as mentioned earlier. We have to test that all API endpoints are working as expected .
First task would be to create a POST request. Click the header and select the right key-value pair as shown below.
Click on the body and raw, select JSON format .Then type the details as seen below
Then 200 OK status is displayed to confirm it is working as expected.
Second task would be to send a GET request and with the relevant details we get the Then 200 OK status is displayed to confirm it is working as expected.
Third task would be to delete any request as seen below.
After deleting, try to get the same data , You would find out it has been deleted from the database
Now that we are done with the 3 task , we would then proceed to create the frontend
FRONTEND CREATION
It is time to create the user interface for a web client to interact with the application via API. To start out we would need to use the command below to scaffold our app.
This would create a new folder called client in the todo directory and this is where we would add the react code.
We would now 2 dependencies
1)Install concurrently which is used to run more than one command simultaneously from the same terminal window.
2)Install nodemon which is used to run and monitor the server. If there's any change in the server nodemon would always restart automatically and load the new changes
Then we would open the package.json file in the todo folder and change the scripts and test section from the file and replace with the code below
Change directory to client and edit the package.json file and add the key value pair to the file . .Press ESC, save and exit with " :wq" command
Now ensure you are inside the todo directory and run the npm run dev command. You should see that the application was compiled
successfully.
Your application should open and start running on localhost:3000. We would need to create an inbound rule to open at port 3000
Click on security button
And click the security group link.
Click on "Edit inbound rules "in order to add a new rule for port 5000
Add a new rule.
Type in the port range and click "Anywhere ipv4"
Click the "Save rules" Button
Inbound rule successfully modified
React app launches successfully at port 3000
From our todo app, there would be two stateful component and one
stateless component. This is because we want to make the code
modular and reusable
Change directory to client and move to the src directory.
Create another folder names components and change directory into the new folder\
Create 3 files as earlier explained (be two stateful component and one stateless component) input.js ListTodo.js Todo.js\
Open the input.js file and paste the code below.
Then we try to install Axios which is a promise-based HTTP client for the browser and node.js.
Move back twice to get to the client folder and install Axios Move to component directory and edit ListTodo.js
We would then navigate to the Todo.js file and copy the code below
inside it.
We need to make a little adjustment to our react code. Delete the logo and adjust our App.js to look like this
Move to src folder
Logo has been deleted and replaced\
Next step would be to pass the new code below into the App.css file and exit it
Next step would be to pass the new code below into the index.css file and exit it
Navigating back to the todo directory Running the command npm run dev
Our To-do application should be ready and fully functional with all functionality working perfectly.
Creating a task, deleting a task and viewing all your tasks.
Simple to-do application deployed in a MERN stack\
A Front-end application using React.js that communicates with the backend application written using Express.js.
Created a MongoDb backend for storing tasks in a database
If this post was helpful, Would be great if you could click the clap button 👏below to show your support.
Thank you for reading💚👏