DEV Community: Asim

Setting up a personal blog with Gatsby and Contentful CMS

Asim — Sat, 13 Feb 2021 17:03:50 +0000

Scope:

In this tutorial, we will learn how to set up Gatsby with Contentful CMS and then deploy the application on Netlify for free.

Background:

Prior to this, I had my blog site running on AWS(deployment post) that required extra effort to set up, and publishing content on it was a bit tedious. Moreover, I had a free tier plan that got expired, and the relevant services(EC2 t2.micro & RDS db.t2.micro) were being billed at around a dollar a day.
I wanted to revamp my blog site and improve the content management flow in particular so started looking out for other options and got to know about Static Site Generators and was amazed at how incredibly easy it was to work with them. I chose Gatsby to build the front-end layer of the blog and integrated it with Contentful CMS to fetch data from there.

Setting up Gatsby:

Install Gatsby CLI globally on your machine by running the following command from the terminal.

npm i -g gatsby-cli

To generate a new project run:

gatsby new your-project-name

This will create a new project folder with all of the starter files. Switch to the project directory and run
gatsby develop
This would start the gatsby server on the default port of 8000.

Gatsby Starter

Starters are basically boilerplate code that is maintained by the community to facilitate the development process. We can add another argument to our project setup command that is the URL of the starter that we want to use.

I initialized my project by using this starter and running the following command:

gatsby new gatsby-blog https://github.com/W3Layouts/gatsby-starter-delog

I found the markup, styling, and dark mode feature super cool so went with it to speed things up. I did some customizations and changed the CMS to Contentful which was more powerful. The final site can be found here.

Setting Contentful CMS

A CMS is pretty useful as it offers a nice interface for managing content and exposes APIs to pull data from it.

Head over to contentful.com and create a free account.
Create a space for your project content from the sidebar menu.
Next head to the Content model tab, which could be thought of as schema for your actual content or blog posts. It will have fields like the blog title, description, publishing date, etc.
Click on the Content model tab to add a content type and click on the Create button.
Add relevant fields in your model by clicking on the Add Field button. I had added the following fields:
Save it and head to the Content Tab to create your first post by clicking on the Add Blog Post button.
Hit the publish button once done and now we can start accessing this data from the Gatsby site.
Prior to it, go to the Settings dropdown menu and click on the API Keys and generate a new key by clicking on the Add API Key button. Copy the Space ID and Access Token that will be required later.

Gatsby Project Setup:

Project Github link: https://github.com/Asim1996/gastby-blog
In the installed starter project run the following command to install the Contentful plugin:

npm install gatsby-source-contentful@2.3.12

The source plugin is required for pulling content types, entries, and assets into Gatsby from Contentful spaces. Add the plugin to gatsby-config.js file

module.exports = {  
siteMetadata: { ... },
 plugins: [    
{      
resolve: 'gatsby-source-contentful',      
options: {        
spaceId: process.env.CONTENTFUL_SPACE_ID,        
accessToken: process.env.CONTENTFUL_ACCESS_TOKEN      
},      
forceFullSync: true    
},
...
]
}

Create .env file in your project root directory and paste the Contentful Space ID and Access Token in it.
Modify your development script in the package.json file to fetch data from the .env file.

"develop": "env-cmd .env gatsby develop"

For fetching all blog posts data the allContentfulBlogPost node would be used in the GraphQL query.

The above query returns the list of all posts available in Contentful which is then passed as props to the Card Component to generate a view for all posts.
Rather than fetching the post body too in the initial index page and passing it as props down the child component, we will be creating dynamic pages with the help of slug content-type defined in our blog schema and adding configurations in the gatsby-node.js file as defined below.

const path = require("path")
// Create blog pages dynamically
exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions
   const blogTemplate = path.resolve('./src/templates/blog.js')
  const res = await graphql(`
    query {
      allContentfulBlogPost {
        edges {
          node {
            slug
          }
        }
      }
    }
  `)
  res.data.allContentfulBlogPost.edges.forEach((edge) => {
    createPage({
      component: blogTemplate,
      path: `/blog/${edge.node.slug}`,
      context: {
        slug: edge.node.slug,
      },
    })
  })}

The above code dynamically generated blog pages basis the markup defined in the template file and the slug that is being fetched from Contentful in the building process of your Gatsby site.
In your project src directory create a new folder named templates and create a file named blog.js in it.
The following code is used to fetch the relevant blog post basis the slug that comes from the context object from the gatsby-node.js file.

...
export const query = graphql`
  query($slug: String!) {
    contentfulBlogPost(slug: { eq: $slug }) {
      title
      publishedDate(formatString: "MMMM Do, YYYY")
      description
      backgroundImage{
      title
             fluid(maxWidth: 300, maxHeight:200) { 
             ...GatsbyContentfulFluid       
             }
             file{
        url
        fileName
        contentType
      }
     }
     body{
       json
     }
   }
}
`...

The JSX in the file can be modified or styled accordingly basis on the data we now have as props.
To render the Rich Text content(blog post body) install the following package:

npm install @contentful/rich-text-react-renderer

and for syntax highlighting then use the following package:

npm i react-syntax-highlighter

The template file can then be modified to use the above packages and render the content in a more appealing way.

Deploying to Netlify

Push your code on Github(or any other Git provider) and signup for a free account on Netlify. Then, click on the New site from Git button and choose your Git provider and the repository that needs to be deployed. Add your Environment Variables by clicking on the Show advanced button on the deploy settings page.
Click on the Deploy site button that will trigger the deployment process and once it is complete you'll see your site URL. And that's it, a few button clicks and your site is live on the internet.

Optional Setups:

Mapping a custom domain: If you have an existing domain bought from any external Domain Name provider (GoDaddy, BigRock, etc). Head to your domain name provider and create an A record and link Netlify’s load balancer IP with your domain name to complete the entire setup.
Helpful links: Custom Domains, Configure External DNS

Netlify Forms: In your contact form just add the following attributes

<form class="form" name="contact"  method="post" data-netlify="true" data-netlify-honeypot="bot-field">
 <input type="hidden" name="bot-field" />               
<input type="hidden" name="form-name" value="contact" />

Netlify's bots will automatically detect the attribute data-netlify="true" when you deploy your site and process the form for you.
Head to Settings > Forms > Form notifications and receive an email alert anytime a new submission comes through.
Helpful Link: Netlify Forms

Configuring a Netlify build hook: If you make changes to your Contentful post data, you can either trigger a deploy manually from Netlify or generate a Netlify build hook (that you can add to Contentful CMS) to trigger an automatic redeploy of your site.
From the Netlify dashboard, navigate to the "Settings" for your site, choose "Build & deploy", and scroll to "Build hooks".
Click Add build hook that then generates an HTTPS URL that responds to requests by triggering a build and deployment of your site. Copy the URL and navigate back to the Contentful web app. From the Settings choose Webhooks and paste the URL that Netlify provided into the form.
Helpful link : Netlify Build Hook

Adding Disqus to Gatsby: Having a comment section in your blog post can be pretty helpful and that could easily be set up signing up on Disqus. Post that, install the following package:

npm i disqus-react

Add the following config in your template file:

... 
const disqusConfig = {    
url: `https://404found.tech/${props.data.contentfulBlogPost.slug}`,    identifier: `${props.data.contentfulBlogPost.slug}`,    
title: props.data.contentfulBlogPost.title,  
}
<Disqus.DiscussionEmbed shortname="404found-tech" config={disqusConfig} />
...

Thanks for reading.
Cheers!!

Setting up Social Logins(Google + Microsoft) with Node.js and Passport.js

Asim — Wed, 07 Oct 2020 20:08:32 +0000

Before diving into code, let's first briefly discuss what the heck is Oauth?

What is Oauth:

OAuth(or Open Authorization) is one of the approaches for authenticating a user in an application. It makes it much easier and faster for an end-user to choose a social login(Google, Outlook, or Twitter, etc) to signup on an application rather than the traditional (email/password) signup form.

Simply, it is a way to provide third-party websites or apps access to user's data(name, email, etc.) without requiring them to share their credentials.

Oauth Abstract View

A lot of things are happening behind the scenes and a detailed explanation is provided in the below image as to how we are going to set this up in our Node app.

Oauth Developer's View

Let's now set up the above login flow by first setting up our app on Google and Microsoft Console.

Step 1: Google - Create client ID and client secret

Head to Google API Console and sign in using your email id.
From the project drop-down create a new project by filling in the project name and organization(optional).
In the sidebar under "APIs & Services", select OAuth Consent Screen, choose the appropriate User Type basis requirement. For public-facing app select external.
Fill in the application name, logo(optional), support email(optional), and hit Save.
Switch to Credentials tab from the sidebar and from the Create credentials drop-down list, choose OAuth client ID.
Under Application type, select Web application.
In Authorized redirect URI add http://localhost:5500/auth/google/redirect for dev env, for production env, this will be the server IP address or domain name followed by /auth/google/redirect
Press the Create button and copy the generated client ID and client secret. This will be used later in the Node app

Step 2: Microsoft - Create client ID and client secret

Head to Microsoft Azure portal and sign in using your email id.
Search for App registrations from the search bar.
Select New registration from the top and fill in your application name.
Choose Account type basis your requirement. For our application, it will be personal accounts + organizational directory.
In Redirect URI add http://localhost:5500/auth/microsoft/redirect.
Press the Register button to register your app.
From the sidebar select Overview tab and copy the Application (client) ID. To generate the client secret head to Certificates & secrets from the sidebar and click on New Client Secret from the Client secrets section. Copy the generated secret for future use.

Step 3: Passport Setup

It is an authentication middleware and can be easily configured with express. It provides a comprehensive set of strategies supporting authentication using a username and password, Google, Facebook, Twitter, and many more.

Install the following packages:



npm install passport passport-google-oauth20 passport-microsoft --save

Step 4: Routes Setup

We will be setting up token-based redirection basis social login in our app. This flow is helpful when we have an existing app with email, password setup, and social logins are being added as an enhancement.

Use express-generator to set up the basic boilerplate for the express app.

Setup the following routes in index.js:



app.get('/auth/google', passport.authenticate('google', { scope: ['profile', 'email'], session: false }));
app.get('/auth/google/redirect', passport.authenticate('google', { session: false, failureRedirect: `https://localhost:3000/login` }), (req, res) => {
  res.redirect(req.user); //req.user has the redirection_url
});

// Microsoft Routes
router.get('/auth/microsoft', passport.authenticate('microsoft', { session: false }));
router.get('/auth/microsoft/redirect', passport.authenticate('microsoft', { session: false, failureRedirect: `https://localhost:3000/login` }), (req, res) => {
  res.redirect(req.user);
});

Over here the route /auth/google or /auth/microsoft is called when the user clicks Log in with Google or Microsoft in the browser. Behind the scenes, passport communicates with Google/Microsoft and directs the user to their respective consent screen.

The consent screen tells users who is requesting access to their data and what kind of data the app is asking to access. The latter part of the statement comes under scope. In our app, we need access to the user's Google profile and email address, thus added it to the scope object. Redirect routes will be discussed later.

Step 5: Google and Microsoft Strategies Setup

Create a new file(google_oauth.js) in the project root directory and add the following code.



const passport = require('passport');
const GoogleStrategy = require('passport-google-oauth20').Strategy;
const jwt = require('jsonwebtoken');
passport.use(new GoogleStrategy({
  callbackURL: `http://localhost:5500/auth/google/redirect`,  //same URI as registered in Google console portal
  clientID: process.env.GOOGLE_CLIENT_ID, //replace with copied value from Google console
  clientSecret: process.env.GOOGLE_CLIENT_SECRET,
},
  async (accessToken, refreshToken, profile, done) => {
    try {
      let user_email = profile.emails && profile.emails[0].value; //profile object has the user info
      let [user] = await db('users').select(['id', 'name', 'email']).where('email', user_email); //check whether user exist in database
      let redirect_url = "";
      if (user) {
        const token = jwt.sign(user, process.env.JWT_SECRET, { expiresIn: '1h' }); //generating token
        redirect_url = `http://localhost:3000/${token}` //registered on FE for auto-login
        return done(null, redirect_url);  //redirect_url will get appended to req.user object : passport.js in action
      } else {
        redirect_url = `http://localhost:3000/user-not-found/`;  // fallback page
        return done(null, redirect_url);
      }
    } catch (error) {
      done(error)
    }
  }
));

In a similiar fashion, create a new file(microsoft_oauth.js) and copy paste the above code. Just make the following changes to it:



const MicrosoftStrategy = require('passport-microsoft').Strategy;
passport.use(new MicrosoftStrategy({  
callbackURL: `http://localhost:5500/auth/microsoft/redirect`,  
clientID: process.env.MICROSOFT_CLIENT_ID,  
clientSecret: process.env.MICROSOFT_CLIENT_SECRET,  
scope: ['openid', 'profile', 'email']  
}

A brief explanation of the arguments in the callback function:

accessToken are used to make API requests on behalf of a user. Not required in our app.
Generally, access tokens have a limited lifetime so a refreshToken can be used to obtain new access tokens.
profile will contain user profile information provided by the service provider.
done the callback function which gets invoked upon successful look-up and supplies passport with the user that gets authenticated. The first argument to done is the error object which is null in our code thus telling passport that things are fine and there is no error.

When an end-user approves our app in the consent screen, the redirect api's(/auth/google/redirect or /auth/microsoft/redirect) are invoked , req.user object is already set to the appropriate redirection URL through passport and the user lands on a page basis that.

Since we are not maintaining session through cookies thus an additional session: false key was passed. If we have to set up an app using cookies, then this is not passed. Furthermore, we need to require cookie-session and use passport serializeUser and deserializeUser functions to effectively manage the saved cookie basis google/microsoft unique profile id. Though, it is recommended using the user id present in the database.
Require the above two files in index.js and test the application locally.

Optional: App Verification

Though it is not mandatory if sensitive scopes are not accessed. For production apps, this should be done irrespective of the scope requested.

For Microsoft, it is pretty easy to get our app verified, head to the Azure portal, and from the sidebar to the branding section.

Over here, you can upload the app logo. Add in Terms of Service, Privacy statement link if needed. To verify the publisher domain just upload the microsoft-identity-association.json file in .well-known folder on your website s3 bucket.

For Google, things are a bit tricky. Though some explanation is provided here.
We can Submit our app for Verification from the OAuth Consent Screen(Google Console Portal) after providing the appropriate Authorized domain, Homepage, Term of Service, and privacy policy links. The process takes around 4-5 days if no sensitive scope is being requested. A few rounds of follow-up emails from the google team if needed and that's it.

Apart from getting verified, the benefit of this is that a user can see our App logo and App name in the consent screen which makes it more professional.

Thanks for reading and congrats on making it till the end.

Cheers!!

System Design Getting Started

Asim — Sat, 18 Jul 2020 22:06:11 +0000

Taking a real world example to cover the basics of designing a distributed system.

Let's say you got an idea of running a fast-food restaurant.

You start by finding a perfect market place, hiring staff, and managing other expenses.

Assuming the business goes well, and the restaurant goes popular in the niche market and you are handling hundreds of orders every day. Now, it's time for you to decide how to scale up the business.

Time To Scale

You got two options:

Pay your current staff more and ask them to work for more hours. This is known as Vertical Scaling wherein you are increasing the throughput by using the same resources.

You can also look out for optimizing the current process by doing some preprocessing before the actual order, let's say preparing some stuff beforehand in the non-peak hour which maps to the usage of a cronjob in system design.
Hire more staff to scale up your business and manage the orders effectively at peak hours. This is termed as Horizontal Scaling.

In real-world scenarios, a balanced or hybrid approach is used as there is always an upper limit to how much you can scale a machine vertically. You can even look out to hire some backup chef to make your restaurant/system more resilient.

Expanding on the Strength

As a manager, to make sure your business runs smoothly you brainstorm and divide the current chefs into teams based on their expertise.

Suppose, Team A can be responsible for handling pizza orders, Team B can be utilized for handling burgers and Team C for Sandwiches, and so on.

In a way, you have divided responsibilities amongst the team, and you can route orders to a team basis their specialty can get to know the status more easily plus moving forward you can scale up a particular team based on business requirements.

This is the central idea behind microservices in designing systems. As applications become easier to build and maintain when they are broken down into smaller units which work together. Each unit is continuously developed and maintained to handle the overall product.

Introducing Distributed Systems

At this stage, your shop is doing well, you have divided the chef's basis their specialty and your system is available at all times.

Now consider the case when there is a power outage, your staff goes on strike that would mean a loss of business for that day or maybe you want to expand your business even more.

So you can look out to start another shop in a different location that delivers orders, initially the numbers of chefs may be lesser but at least you have a backup and your business isn't impacted much. With this approach, you have distributed your system.

A distributed system is a system with multiple components located on different machines working together and it appears as if a single computer is processing the query to the end-user. These machines work concurrently and can fail independently without affecting the whole system’s uptime.

Apart from scaling the other advantages of a distributed system are:

Fault Tolerance is the property that enables a system to continue operating properly in the event of the failure of (or one or more faults within) some of its components.
Low Latency: Latency is a networking term to describe the total time it takes a data packet to travel from one node to another. With distributed systems, we can have multiple nodes and routing traffic to hit the node that is closest to it thus reducing the latency.

With this, the level of complexity has increased in the system, as it would now get a bit difficult to maintain and handle requests across the system.

Handling orders effectively

Now when a customer places an order through a phone call, the responsibility to route his order to a particular shop is on you basis his location and the order processing time of each shop.

Balance the load and making sure not every request is sent to one single shop/server is done by a load balancer.

A load balancer acts as the “traffic cop” sitting in front of the servers and routing client requests across all servers in a manner that maximizes speed and capacity utilization. If a single server goes down, the load balancer redirects traffic to the remaining online servers. When a new server is added to the server group, the load balancer automatically starts to send requests to it.

Tracking metrics

You can maintain a track of every event that's happening in each shop, such as order processing times, most ordered food items, most delivered location, etc basically the success metric to analyze and leverage it for future use.

Similarly, track for failure too like whenever there is a fault in a machine or deliver agent not showing up early which can hamper your response time if not handled well.

Apart from these, a system should be extensible meaning you can easily build something totally new on top of it. Maybe start a bakery shop and take orders for that too.

The above used approach when designing a system is termed as High-Level System Design.

I hope through the above example you got some basic info related to system design.

Hoisting in JavaScript

Asim — Wed, 27 May 2020 14:14:44 +0000

Demystifying one of the quirks of the language.

This article is originally posted here.

Consider the following code sample

var myName = "Bruce Wayne"  
function getCity(){  
   console.log("Gotham");  
}  
console.log(myName);  
getCity();

Executing the code will return Bruce Wayne and Gotham which was kinda expected.

To make things interesting, try running the following code:

console.log(myName);  
getCity();  
var myName = "Bruce Wayne"  
function getCity(){  
   console.log("Gotham");  
}

In most programming languages this would throw an error as code is executed line by line. But with Javascript that's not the case, upon execution, the output will be Gotham and undefined.

And you are introduced to one of the many quirks in the language. This phenomenon is known as hoisting.

If you look up for the term Hoisting online, in many places it is explained as if the variables and functions in JS are moved to the top by the JavaScript Engine

To gain a bit more understanding and why this happens we need to dive into the Execution Context and how it is created.

What is an Execution Context?

Execution context (EC) is defined as the environment in which the JavaScript code is executed. It contains properties that you haven't even declared in your code. If you run the above code in the browser and open the console window, you get access to the window object as well as the this keyword. These were added by the JS Engine and for the Global Execution Context which is the default execution context they are the same thing. Similarly, we have a Functional execution context which is created by the JS engine whenever it finds any function call. Each function has its own execution context. In layman terms, global is something which is not inside any function, so in the code above, the variable myName and function getCity get attached to the global scope.

Execution Context in Detail

An execution context is created in two-phase by the interpreter.

Creation Phase

The Global object is created only when we are dealing with the Global Execution Context, the this keyword is always created in an execution context. In this phase, the parser identifies the variables and the functions created in code and sets up memory space for it which is confusingly called hoisting . So when the code is run line by line it can actually access them. However, things work differently for variables and functions. A function is entirely placed in memory with all the code inside of it, while all variables are set to undefined in the first phase.
Execution Phase

This phase is pretty simple, in this phase code is run line by line, interpreting it and executing it on the computer.

Consider the following code sample:
```
function getCity(){  
   console.log("Gotham"); 
}  
getCity();  
console.log(myName);  
var myName = "Bruce Wayne"  
console.log(myName);
```
Upon execution, we get Gotham, undefined, and Bruce Wayne. And this would now be clear as to when we log myName before it's initialization it is actually set to undefined in the creation phase.

I hope, you got a grasp about how the JavaScript interpreter is evaluating your code and you could avoid possible unexpected behavior in the future.

DEPLOY A REACT + NODE APP TO PRODUCTION ON AWS

Asim — Sat, 23 May 2020 20:07:08 +0000

A detailed walkthrough on setting up a production-ready web server from scratch on the Amazon EC2 service.

This article is originally posted here.

Scope:

We will setup a full-stack(Node, Express, React) app with MySQL database. We will deploy the app to an AWS EC2 instance running Ubuntu Server 16.04 LTS. The setup uses NGINX as a reverse proxy and also to serve react static files, PM2 is used as a cluster manager. The MySQL database will be deployed to AWS RDS, phymyadmin will be setup too and connected to the rds to handle queries through GUI. And finally we will map the EC2 instance to a domain name.

Background

In the past, I had used Heroku for deploying node apps and Netlify for static web apps which provides with ready-to-use environments making the deployment process much faster and easier by hiding away all the complexities. However, setting up an AWS instance gives much more insights of what goes under the hood in making your website public.

The Setup:

Setting up VPC:

Virtual Private Cloud is basically a virtual location that contains our AWS services(example: web servers, databases, elastic cache, file servers, and messaging services).

Go to Amazon VPC Dashboard by using the following link https://console.aws.amazon.com/vpc
Click on "Create VPC" button. The page looks like this:
The VPC has been named as react-node vpc.

CIDR, is an alternative to traditional subnetting which is used to specify the number of significant bits that make up the routing or networking portion.

CIDR Notation(10.10.0.0/16) indicates that the first two octet is for networking and the remaining 2 octet to define host.
Click on create VPC button to finish the VPC setup.

Subnet setup

A subnet or sub network is a way to divide the resources in the VPC. The web server(EC2) needs to be accessible by the internet while the RDS should only be accessed internally thus public and a private subnet is needed for security.

Creating a Public Subnet:

This subnet can have any address between 10.10.1.0 - 10.10.1.255.
Creating a Private Subnet:

This subnet can have any address between 10.10.2.0 - 10.10.2.255. Also, an availability zone is required to make this subnet work with our database. Moreover, deploying a database to AWS requires 2 subnets in different availability zones, so setup a second one with the same flow.

Security Groups setup

A security group acts as a virtual firewall for the instance to control inbound and outbound traffic.

Click on the security groups tab and click on create security group. Add a name ,description and attach the VPC which was created before. The page looks like this:
After creating the security groups edit the Inbound Rules as shown.

SSH is used to log in to the EC2 instance from a personal computer. Update your personal IP address in the source section every time unless a static IP is available.
Port 80 and port 443 allows normal traffic over the internet.

Creating a new Ubuntu Server on AWS EC2

Go to the EC2 Service section and click the launch instance button
Select the "Ubuntu Server 16.04 LTS" Amazon Machine Image (AMI).
Configure the instance details as shown:
Select the VPC which was created and add the public subnet. Storage and tags can be left as default.
Assign the existing security group to the instance which was created in previous steps.
Click Review and Launch to spin up the instance.
It will prompt to Create a new key pair. Enter a name and click "Download Key Pair" to download the private key, this will be used to connect to the server via SSH.
Post successful creation, navigate to the instance page and right-click on the newly created instance. Click on connect which opens a pop-up detailing the steps to connect via SSH.

RDS Setup

Head towards the RDS database dashboard.
Before creating a database, a subnet group will be created to communicate with the server. It will expand over two availability zones to protect the database against server failure.
Click on the subnet group tag and then click on create DB subnet group.
Add a Name and Description and select the VPC which was created. Then, attach the private subnets for that VPC.
Now we are ready to create our database.
On the next page, set the VPC and the subnet group that was created. Remember the username and password that you set here, this will be used to connect to the SQL server.
The advanced setting can be done as shown below:
Click on Create database button to finish the setup.
While the database is being created, head to the VPC dashboard and create a new security-group following the same steps as above and set the inbound rule as shown below:
Then, attach this security group to the database by clicking the modify button and selecting the security group under Networking and Security section.

To check everything is working correctly, ssh into your instance by opening a new terminal, and connecting the same way as shown above.

Install MySQL with the following command:

sudo apt-get install mysql-server mysql-client

During installation, setup will ask you to enter MySQL root account and password to connect to the local database.

After successful installation, connect to the host database by typing the command

mysql -u username -p -h hostname

Input the password that you used while setting up the rds. Hostname(Endpoint) can be found from RDS dashboard page under Connectivity & security tab in database summary page.

If things go well you will see a screen like this after a successful connection from the terminal.

React and Node Project Setup:

Project Github link: https://github.com/Asim1996/blog

Deploying the project to AWS EC2 instance.

SSH into your instance first using
ssh i- “keypair.pem” ubuntu@public-ip-address
Install git using the command:

sudo apt-get update 
sudo apt-get install git

Clone your project into the server with the command:

sudo git clone link-to-repo

After cloning the project we can see all the files as shown

Installing node and npm

We will install nvm(node version manager) first using

sudo curl https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash

Then, install node using

nvm install node-version I had used (v8.16.0)

Post-installation we can head into our server directory and install all packages using npm install, but first, we need to give write permissions to that folder using:

sudo chmod 777 path-to-directory

path-to-directory in this project was (/home/ubuntu/blog/server)

For the client side of our application we will be using yarn.Set it up as follows:

curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add - 
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list 
sudo apt update 
sudo apt install --no-install-recommends yarn

After this switch to the client directory and run yarn add to install all dependencies after setting the required permission as done previously.

Run the command yarn run build to get the build folder which will be served by Nginx in the next step.

Configure NGINX to serve the Node.js API and React front-end

Since our application is made up of two separate projects that both need to be accessed via the same port (HTTP on port 80), we're going to use NGINX as our public-facing web server to receive requests for both the front-end and back-end, and decide where to send each request based on its path. Requests beginning with the path /api/* will be proxied through to the Node.js API running on port 5000, while other requests will serve the React front-end app and associated files.

Installing Nginx by typing the following command in terminal:

sudo apt-get install -y nginx
To check if it's running, access: http://ec2-public-ip/. If it shows ‘Welcome to nginx!’ this means that nginx is running and we can proceed to the next step.
Next, head to the following directory

cd /etc/nginx/sites-available/
Delete the default file and create a new one with the following code:
Save the file and restart nginx using

sudo systemctl restart nginx
NGINX Config guide:
- server { ... } defines a server block that contains the configuration for a virtual server within NGINX.
- Through location / { ... } we define a block that contains the configuration for requests that have a URI beginning with a forward slash (/), in it we set the react build as the root route. Then we set the index.html file as the main index, and on every subsequent request we serve the same index.html file.
- The location /api { ... } defines a location block to serve requests that have a URI beginning with /api which will be proxied to our Node server using the property proxy_pass http://localhost:5000;

Optional: Setting up phpmyadmin

It will make our life easier by accessing the database using a secure web interface instead of using the terminal for DB commands.

First install PHP using the command:

sudo apt install php-fpm php-mysql

Then Install phpMyAdmin using:

sudo apt-get install phpmyadmin

During the installation, It will ask you which web server you would like the software to automatically configure. Since we are Nginx which isn’t one of the available options, you can just hit TAB, and then ENTER to bypass this prompt. The next prompt will ask if you would like dbconfig-common to configure a database for phpMyAdmin to use. Select “Yes” to continue. Enter the database administrator password that was configured during the MySQL installation to allow these changes.

After installation, for the Nginx webserver to find and serve the phpMyAdmin files correctly, we’ll need to create a symbolic link from the installation files to our Nginx document root directory:

sudo ln -s /usr/share/phpmyadmin /var/www/html

phpMyAdmin relies on mcrypt PHP module so this need to be enabled too

sudo phpenmod mcrypt

sudo systemctl restart php7.0-fpm

Setting up an authentication prompt before visiting /phpmyadmin route in the browser. We’ll create a password file that will store the authentication credentials. Nginx requires that passwords be encrypted using the crypt() function. To create an encrypted password, type: openssl passwd

It prompts to enter a password and then will return an encrypted version of it, copy that as we will be using it while setting authentication file

Navigate to /etc/nginx/ and create a new file pma_pass with the following content

username_of_your_choice:copied_encrypted_version_password

Save and close the file.

After this, update the default file under the nginx folder as shown below:

Restart nginx using sudo systemctl restart nginx
Adding our RDS server in phpMyAdmin

Navigate to:

sudo nano /etc/phpmyadmin/config.inc.php

Find the following lines in config.inc.php:

    /*  
    * End of servers configuration  
    */

Append the following lines above the "End of servers configuration" line:


    $i++;  
    $cfg['Servers'][$i]['host'] = 'xxxxx.xxxxxxxxxx.us-east-1.rds.amazonaws.com';  
    $cfg['Servers'][$i]['port'] = '3306';  
    $cfg['Servers'][$i]['connect_type'] = 'tcp';  
    $cfg['Servers'][$i]['extension'] = 'mysql';  
    $cfg['Servers'][$i]['compress'] = TRUE;

Save the file and exit.
Head to browser and type (http://ec2-public-ip/phpmyadmin/) which results in:

Optional: PM2 setup

PM2 is a cluster manager and allows us to run our app automatically and also restart it automatically if it crashes.

Install pm2 using:

npm install pm2 -g

To start pm2 navigate to the server directory and type:

pm2 start app.js -i 0

PM2 figures out how many instances to create on its own using the above command.

Below are some useful pm2 commands:

pm2 list: list all the running processes
pm2 restart app 0: restart app with id 0
pm2 delete app 0: delete app with id 0
pm2 logs Display all processes logs in streaming
pm2 stop all Stop all processes

And Finally, Test our new application running on AWS

Enter the hostname(ec2 instance public IP) in the browser to view your application live on the web.

Additionally, you can buy a domain name from any Domain Name provider (GoDaddy, BigRock, etc) and link it by using an Elastic IP which is preserved even if we stop and start our instance in a virtual private cloud.

To do this

Allocate an Elastic IP address from Amazon’s pool of public IPv4 addresses.
Associate the Elastic IP address with the running instance.

Head to your domain name provider and create an A record and link the Elastic IP with your domain name to complete the entire setup.

and phew! that's it! Thanks for reading and congrats on making it till the end. I hope this makes your deployment lifecycle easier as a newbie.

Cheers!!