MEAN STACK Project for beginners

MEAN STACK PROJECT IMPLEMENTATION

The main aim of this project is to explain the DevOps concepts and processes using a MEAN web stack on a simple to-do application. Some developers use this set of frameworks and tools to develop software products. We would be carrying out this project in the AWS platform and these concepts are very similar to the LAMP, LEMP AND MERN web stack concepts.

MEAN is an acronym for sets of technologies used to develop a technical software product.

MongoDB Express AngularJS NodeJS

MongoDB is the document database that stores and allows it possible to retrieve data. Express JS is the back-end application that makes a request to the Database for reads and writes and gets a response from the database. AngularJS is the front-end application that handles Client and Server requests.Node.js is the JavaScript

The 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:

  1. Ensure you login with your details to your AWS console via https://aws.amazon.com**

  2. Click on the EC2 link to create instances.

image

image

iii)Click on launch instance dropdown button and select launch instance .

image

iv)Fill in all relevant details to the MEAN project such as:

Type in the name and additional tag to the project (mean). Select ubuntu from the quick start option .Also note that the Amazon machine image selection varies from user to user

Select Ubuntu server 20.04 LTS (HVM),SSD Volume Type (Free Tier )

image

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”.

image

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”

image

vii) The .pem file was downloaded successfully

image

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.

image

Instance successfully launched and click to view Instance details with the IP address.

image

Click the “Connect” button and copy the ssh client details we would be using on the git bash console.

image

Open git bash on visual studio code or whichever console is convenient to use. We are using git bash here with Visual Studio Code and Type YES to connect.

image

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.

sudo apt update

image

Then we proceed to upgrade the packages and Type YES to continue.

sudo apt update

image

image

Still upgrading and finally completed as shown below

image

image

Now we add the certificates. Type YES to continue and check the node version

sudo apt install dirmngr gnupg apt-transport-https ca-certificates software-properties-common

wget -qO - https://www.mongodb.org/static/pgp/server-5.0.asc | sudo apt-key add

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/5.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list

image

image

image

NODE.JS INSTALLATION

Now we need to get the location of Node.js using a node source PPA

image

We can now install Node.js on the server and confirm the versions of the node and npm package managers as shown below.

curl -sL https://deb.nodesource.com/setup_16.x -o /tmp/nodesource_setup.sh vi /tmp/nodesource_setup.sh sudo bash /tmp/nodesource_setup.sh sudo apt install nodejs node -v

image

image

image

image

INSTALLATION OF MONGODB

MongoDB stores data in flexible JSON format documents and can vary from document to data structure which can be changed over time .Here we would be adding a book records to the database containing the book name ,ISBN number ,Author and number of pages .We run the following command as shown below to download MongoDB

sudo apt install dirmngr gnupg apt-transport-https ca-certificates software-properties-common

wget -qO - https://www.mongodb.org/static/pgp/server-5.0.asc | sudo apt-key add

echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/5.0 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-5.0.list

sudo apt-get update

image

image

image

Once installed we have to start the server and verify that it is running as expected as shown below . MongoDB is active and running

sudo apt-get install -y mongodb-org sudo systemctl start mongod sudo systemctl enable mongod

image

Next we install node package manager and body-parser package

sudo apt install -y npm sudo npm install body-parser

image

image

And then proceed to create the folder named Books and change directory to the new Books folder.

mkdir Books && cdBooks npm init

image

In the Books directory ,we initialize the npm project and add a file into server.js

image

image

INSTALLATION EXPRESS AND SET UP ROUTES TO THE SERVER

Express is a minimal and flexible Node.js web application framework that provides features for web and mobile application .We would be installing a Mongoose package which provides straight forward ,schema-based solution to model application data

image

We create the folder named apps and change directory to the new apps folder. Edit the route.js file and input the codes below

image

image

We create the folder named models and change directory to the new models folder. Edit the book.js file and input the codes below.

image

image

ACCESSING THE ROUTES WITH ANGULARJS

AngularJS provides a web framework for creating dynamic views in your web applications. We would be changing the directory back to Books and then we create a new folder named public and change directory to the new folder. Edit the script.js file and input the codes below.

image

image

We would creating a new folder named index.html and edit the file and input the codes below.

image

image

We would then navigate back to Books and start the server by running a command.

image

We see the server is up at port:3300

For this to happen we need to open TCP port 3300 in our AWS Web Console accessing the security group through the EC2 instance

image

Add a new rule.

image

image

Type in the port range 3300 and click “Anywhere ipv4”

image

image

Click the “Save rules” Button

image

Inbound rule successfully modified

image

Open any browser of your choice and access the URL

http://54.89.144.227:3300

image

Book web page successfully displayed.We have to test the web page by inputting data and get it to be populated below

image

Refresh the page and see the data below

image

Congratulations we have successfully launched our Web Book Register

If this post was helpful, Would be great if you could click the clap button 👏below to show your support.

Thank you for reading💚👏

0
Subscribe to my newsletter

Read articles from Emmanuel Yewande directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Emmanuel Yewande
Emmanuel Yewande