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.
Fundamental Knowledge of Installing and downloading software
Basic Understanding of Linux Commands
AWS account login with EC2 instance
Internet connection
IMPLEMENTATION STEPS:
Ensure you login with your details to your AWS console via https://aws.amazon.com**
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 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 )
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 and 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.
sudo apt update
Then we proceed to upgrade the packages and Type YES to continue.
sudo apt update
Still upgrading and finally completed as shown below
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
NODE.JS INSTALLATION
Now we need to get the location of Node.js using a node source PPA
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
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
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
Next we install node package manager and body-parser package
sudo apt install -y npm
sudo npm install body-parser
And then proceed to create the folder named Books and change directory to the new Books folder.
mkdir Books && cdBooks
npm init
In the Books directory ,we initialize the npm project and add a file into server.js
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
We create the folder named apps and change directory to the new apps folder. Edit the route.js file and input the codes below
We create the folder named models and change directory to the new models folder. Edit the book.js file and input the codes below.
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.
We would creating a new folder named index.html and edit the file and input the codes below.
We would then navigate back to Books and start the server by running a command.
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
Add a new rule.
Type in the port range 3300 and click “Anywhere ipv4”
Click the “Save rules” Button
Inbound rule successfully modified
Open any browser of your choice and access the URL
Book web page successfully displayed.We have to test the web page by inputting data and get it to be populated below
Refresh the page and see the data below
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💚👏
Subscribe to my newsletter
Read articles from Emmanuel Yewande directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by