DEV Community: Hemaprakash Raghu

Migration of Monolithic to Highly Available and Secure Architecture with AWS 🚀

Hemaprakash Raghu — Sun, 23 Oct 2022 17:33:59 +0000

Here is a story of converting an existing web application which is very good at single point of failure as everything that belongs to the application is stacked together (tightly coupled) and deployed inside one single instance.

If any one component fail inside the instance, the entire application goes down and need a physical resource (developer) to fix it and make it up and running.

The web application consists of:

Web Server (React JS Application)
App Server (Node JS Application)
Database (MySQL)

The goal here is to create a highly scalable and secure three tier web application using AWS services.

The modified architecture is more scalable, secure and fault tolerant and could even support disaster recovery with very little modification.

The Web and AppServer

The basic (react and express) applications are pre-configured with all necessary software installation with the source code and created the Amazon Machine Images.

Launch Templates are then created with the AMI, and AutoScaling Groups are created to scale in and out based on usage. Web Server group is then placed in front of an (Internet Facing) Application Load Balancer to split up the load equally to all instances available with necessary health checks. The App Server group is placed in front of an (Private) Application Load Balancer where it can be accessed only through the other Load Balancer configured via security groups.

The web servers are placed in a public subnets in three Availability Zones and the app servers are placed in private subnets. In order to do any configuration to code or any other settings to app servers, a Bastion Host (Jump-box) is been used through the public subnet.

The Database

Amazon RDS (MySQL) is created with two read replicas in each AZ, and an Elastic Cache is used to reduce performance issue. Here we could also have a stand-by database in another region in order to be safe due to any disaster.

Web App Contents

All images, videos and other files, are uploaded to Amazon S3 through VPC Endpoint through the app or web server (to avoid network cost), and then CloudFront Distribution is used to deliver all the files to public through edge locations without any disturbance.

Authentication and Authorization

Amazon Cognito is used to validate a user and allowed to access to the application. App servers are then using SDK to validate any scopes related to the business logic.

ProgramBuddy - Helper Bot to create project (rest-api)

Hemaprakash Raghu — Sun, 23 Oct 2022 17:17:23 +0000

Send messages in WhatsApp and get your project started right away.

GitHub Repo

Overview 🤖

The main focus is about stop doing the work which does not require much thinking and following the procedures would get the work done. Here the ideology is to work with rest apis using javascript. How great it would be when we just ask a person to create a project with standard CRUD apis and then give it to us in a way we can add more functions to it.

What I used to built 🛠

Amazon Lex
Amazon Lambda
Amazon S3 Bucket
Amazon Dynamo DB
Amazon Simple Email As Service
Twilio

The Bot

Creating the required Intents for project creation, capturing the model information and exporting the project. This bot is focusing mostly on a nodejs express project with mongodb as database.

Amazon Lex is used for the bot creation and training, with four intents as mentioned which is connected to Amazon Lambda triggered at the moment of fulfilment of each intent. Slots are used to get the required information on each intent.

Intent 01: (ProjectCreation)
Slots (Name, EmailAddress, Framework, ProjectName). These information are used as an high level for the project where used to create all configuration files.

Intent 02: (CapturingModel)
Slots (ModelName, ModelProperties) These information are used to create as much models we need (reusable intent)

Intent 03: (ExportingProject)
Used to export the files and folders based on the information saved.

Lambda Function ⚡️

It plays a major role here to process all the data from the chatbot and have a copy in the Amazon Dynamo DB to make use later. Python environment is used to extract and process and create necessary files and folders and save it to Amazon S3 bucket.

View Lambda Function

ProjectCreation Intent Extraction

if intent_name == 'ProjectCreation':
        payload = {
            "sessionId": event["sessionId"],
            "name": get_slot(event, 'Name'),
            "email": get_slot(event, 'EmailAddress'),
            "project_name": get_slot(event, 'ProjectName'),
            "framework": get_slot(event, 'Framework')
        }
        # save to dynamodb
        projectTable.put_item(Item=payload)

CapturingModel Intent Extraction

if intent_name == 'CapturingModel':
        properties = get_slot(event, 'ModelProperties')
        name = get_slot(event, 'ModelName')
        if properties is not None:
            props_array = properties.split(',')
            sessionUser = projectTable.get_item(Key={'sessionId':event['sessionId']})
            # save to dynamodb
            schemaTable.put_item(Item={
                'sessionId':event['sessionId'],
                'model_name':name,
                'properties':props_array,
                'username':sessionUser['Item']['name']
            })

ExportingProject Intent Extraction

if intent_name == 'ExportProject':
        sessionId = event['sessionId']
        projectInformation = projectTable.get_item(Key={'sessionId':sessionId})
        models = schemaTable.scan(
            FilterExpression='sessionId = :sId',
            ExpressionAttributeValues={":sId": sessionId}
        )
        # creating package json file
        buildPackageFile(projectInformation['Item'])
        # creating db and configuration files and folders
        createRequiredFiles(projectInformation['Item'])
        # creating router files
        createRouterFiles(projectInformation['Item'], models['Items'])
        # creating app.js file
        createMainFile(projectInformation['Item'], models['Items'])
        # zip the files and folder
        url = createZipFileStream('program-buddy', projectInformation['Item']['name']+"/"+projectInformation["Item"]['sessionId'], projectInformation['Item']['project_name'], True)
        sendEmail(projectInformation['Item'], url)

Storing the Data 📦

Dynamo DB is used to store intermediate data which is used along during exporting the project.

# Project Information
{
 sessionId: "BOT_SESSION_ID",
 name: "USERNAME",
 email: "USER_EMAIL",
 project_name: "PROJECT_NAME",
 framework: "PROJECT_FRAMEWORK_NAME"
}
# Schema Information
{
 sessionId: "BOT_SESSION_ID",
 username: "USERNAME",
 properties: ["Item1", "Item2", "Item3"],
 model_name: "SCHEMA_NAME"
}

Exporting the Project

Export intent is triggered and required files and folder for the project are created in lambda and then stored in s3 bucket. These files are then zipped and sent to the recipient email address using Amazon SES.
This email contains the S3 pre-signed URL to download the zipped project files.

Download Example Exported Project

Social Authentication - React-Native with a NodeJS Server

Hemaprakash Raghu — Sat, 05 Jun 2021 15:06:54 +0000

I particularly write this post, just because I got lost or can't find any resources to teach me how to do this thing the right way!

Hey there! 😃

This is a special scenario where your react native application is running with your own NodeJS server where you have social authentication that should be done through a browser popup and getting back to the app.

This post assumes that you already have these setup:

react-native app
nodejs server hosted
social authentication integrated to the server

The Goal 💡

The mobile app should be able to login via a intermediate browser and the AUTH token is sent back to the app. This should work for both IOS and Android.

Let's have an overview how the flow looks like

MOBILE_APP -> BROWSER -> GOOGLE AUTH WEBSITE -> TOKEN -> RETURN BACK TO APP -> TOKEN USED

Getting Started 🚀

First let's install the intermediate browser thing, after a long search a perfect match was found to get the job done.

Install the npm module to your react-native app
npm install react-native-inappbrowser-reborn --save

This module does the job much greater than expected!

For IOS
cd ios && pod install && cd

For Android

buildscript {
  ext {
    buildToolsVersion = "28.0.3"
    minSdkVersion = 16
    compileSdkVersion = 28
    targetSdkVersion = 28
    # Only using Android Support libraries
    supportLibVersion = "28.0.0" 
  }

Let's get the job done ✅

Say my nodejs social authentication end point is

https://sample.herokuapp.com/api/google/auth

Make sure your endpoint gives you a response back in this format:

For IOS
your_app_name://Home?token=your_auth_token

For Android
your_app_name://my-host/Home?token=your_auth_token

Your React Native App

Import Statements

import { InAppBrowser } from 'react-native-inappbrowser-reborn';
import { Alert, Platform } from 'react-native';

Create a Deep Link Function that helps us to get back to the app

const getDeepLink = (path = '') => {
    const scheme = 'your_app_name';
    const prefix =
      Platform.OS === 'android' ? `${scheme}://my-host/` : `${scheme}://`;
    return prefix + path;
};

Inside the login function

const handleLogIn = () => {
     const url = 'https://sample.herokuapp.com/api/google/auth';
     const redirectedURL = getDeepLink('Home');
     if (InAppBrowser.isAvailable()) {
        try {
          InAppBrowser.openAuth(url, redirectedURL)
                      .then((result) => {
                         return handleAuthNow(result);
                      })
                      .catch((e) => {
                         console.log(e);
                      });
        } catch (error) {
          Alert.alert(error);
        }
     } else {
       Alert.alert("Sorry Not Compatible!");
     }
};

handleAuthNow() function

const handleAuthNow = (result) => {
const token = result?.url?.split('?token=')[1]?.slice(0, -1);
// console.log(token)
// use the token whatever you need to do
// most probably we would store the token into the asyncStorage of the app
// do not forget to close the browser
InAppBrowser.close();
};

Do not forget to do these before you test it

For IOS

add the below to the Info.plist present inside the ios directory
do not forget to replace the your_name_app with your own app name

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLName</key>
    <string>your_name_app</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>your_name_app</string>
    </array>
  </dict>
</array>

For Android

Inside your app AndroidManifest.xml file add these
these code should be inside the

<activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
// ADDED HERE
<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="your_app_name" android:host="my-host" android:pathPrefix="" />
</intent-filter>
// ADDED HERE
      </activity>

What could go wrong and chances of getting lost 🤯

As the token is passed through a browser with the url could end up having a extra hash at the end of the url that is sent back to the app, make sure you got an eye on it.
As there is been a window opened between the app while returning back to the app, it could have not loaded again some code that should be running in order to have the token in the header of the request.
Make sure you have specific url that is returned back to app for android and ios.

You could use the browser module in two ways:

could be used for the authentication purpose.
could be used to open URLs within your app.

To open the url inside your app

InAppBrowser.open('https://google.com/')

Here the browser could be customized to your own styles by including the options after the url. Refer: Link

When to use this method 🤔

Only when,

your react-native app is dependent on a third party server like nodejs hosted separately, as if you don't have a separate server you could simply use a oauth sdk for mobile development.

DISCLAIMER ❌
The above method was used and tested for both android and ios and the implementation method was based on my requirement you could refer the official browser module as they have another kind of method that makes the app to receive the token wherever you need in the app and not only in the login screen.

Hope not everyone would get lost just like me! 😃
Have a nice day!

Setup Stripe Payment for React Native using Expo

Hemaprakash Raghu — Mon, 16 Nov 2020 16:41:56 +0000

React Native is one of the popular hybrid mobile development framework using javascript.

Here expo is used to create the app itself.

To create the project

# installing expo cli
$ npm install --global expo-cli
# initializing the project
$ npm init project-name

Stripe, according to Wikipedia

Stripe primarily offers payment processing software and application programming interfaces for e-commerce websites and mobile applications.

Before everything, we need to be a part of stripe. Let's create an account in stripe at Register Stripe
After creating the account, copy the publishable key given in the dashboard section of test data.
Now let's install the expo payment module.

$ expo install expo-payments-stripe

Importing and usage of the module.

import { PaymentsStripe as Stripe } from "expo-payments-stripe";

// initialize it in useEffect or componentDidMount
Stripe.setOptionsAsync({
   publishableKey: "YOUR_COPIED_KEY",
   androidPayMode: 'test', // [optional] used to set wallet environment (AndroidPay)
   merchantId: 'your_merchant_id', // [optional] used for payments with ApplePay
});

Creating the Card Component 💳

Create a file CardForm.js , and paste the content below.

import React, { PureComponent } from "react";
import {View, Text, StyleSheet, Alert } from "react-native";
import CardButton from "./CardButton";

export default class CardForm extends PureComponent {
    state = {
      loading: false,
      token: null
    }

    render() {
      return (
        <View style={styles.container}>
          <CardButton
            text="Card Details"
            loading={this.state.loading}
            onPress={this.handleCardDetails}
          />
          <View style={styles.token}>
            { token &&
              <View style={{ display:'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: 5 }}>
                <Text style={styles.tokenLabel}>Token: {this.state.token?.tokenId}</Text>
                 <CardButton
                  text="Make Payment"
                  onPress={this.handlePayment}
                 />      
              </View>
            }
          </View>
        </View>
      )
    }
}

Define the styles for the component.

const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center'
   },
   tokenLabel: {
     textAlign: 'center',
     color: '#111',
     marginBottom: 5,
     padding: 5
   }   
});

Let's create the button component used in the above CardForm.js create a file called CardButton.js .

import React, { PureComponent } from 'react'
import {
  View,
  Text,
  TouchableHighlight,
  ActivityIndicator,
  Platform,
  StyleSheet,
} from 'react-native'
import PropTypes from 'prop-types'

export default class CardButton extends PureComponent {
  static propTypes = {
    text: PropTypes.string.isRequired,
    disabledText: PropTypes.string,
    loading: PropTypes.bool,
    disabled: PropTypes.bool,
    style: PropTypes.any,
    onPress: PropTypes.func.isRequired,
  }

handlePress = (event) => {
    const { loading, disabled, onPress } = this.props

    if (loading || disabled) {
      return
    }

    if (onPress) {
      onPress(event)
    }
  }


  render() {
    const { text, disabledText, loading, disabled, style, ...rest } = this.props

    return (
       <TouchableHighlight
        {...rest}
        style={[styles.button, style]}
        underlayColor="rgba(0,0,0,0.5)"
        onPress={this.handlePress}>
        <View>
          {loading &&
            <ActivityIndicator
              animating
              size="small"
            />
          }
          {!loading && !disabled &&
            <Text>
              {text}
            </Text>
          }
          {!loading && disabled &&
            <Text>
              {disabledText || text}
            </Text>
           }
        </View>
      </TouchableHighlight>
    );
  }
}

Defining the styles for CardButton.

  const styles = StyleSheet.create({
   button: {
    padding: 8,
    margin: 10,
    height: Platform.OS === 'ios' ? 35 : 40,
    minWidth: 160,
    overflow: 'hidden',
    borderWidth: 1,
    borderRadius: 4,
    backgroundColor: 'white',
    alignItems: 'center',
   }
})

Defining Functions in `CardForm.js ⚡`

let us define the method handleCardDetails() . - Here we receive a token from stripe that help us to make a payment using our server.

   const handleCardDetails = async () => {
     try {
       this.setState({ loading: true });
       const cardOptions = { 
         requiredBillingAddressFields: 'full',
            prefilledInformation: {
              billingAddress: {
                name: 'Test Name',
                line1: 'Test Line 1',
                line2: '4',
                city: 'Test City',
                state: 'Test State',
                country: 'Test Country',
                postalCode: '31217'
              }
           }
       };
       // GETS YOUR TOKEN FROM STRIPE FOR PAYMENT PROCESS
       const token = await.Stripe.paymentRequestWithCardFormAsync(cardOptions);
       this.setState({ loading: false, token });
     } catch(error) this.setState({ loading: false });
   }

Before we define the method for makePayment() , we have to create a server that makes the payment using the generated token.

Create a folder called server in project root directory.

Inside the server folder, creating a nodejs server.

# initializing a node project
$ npm init -y
# installing required dependencies
$ npm install express stripe cors --save

express: it is used to create a http server that makes a request from our app to the stripe server.
stripe: it provides convenient access to the Stripe API from applications written in server-side JavaScript.
cors: it is used to handle the CORS policy problem between our projects.
Create a file called index.js in the server directory.

const path = require('path')
const express = require('express')
const stripe = require('stripe')('YOUR_SECRET_KEY_FROM_STRIPE_DASHBOARD')
const cors = require('cors')

const app = express()
app.use(cors())

app.post('/api/payments/mobile/create', async (req, res) => {
    const total = req.query.total;
    const token = req.query.token;

    console.log(`Payment Request Recieved for the amount : ${total} >>> token: ${token}`)

    stripe.charges.create({
        amount: total,
        currency: 'inr',
        source: token
    }).then(charge => {
        res.status(200).send(charge);
    }).catch(e => console.log(e));

})

app.listen(4000);

Do not forget to start the node server using the command: node index.js

Defining the method `makePayment()` in react component `CardForm.js`.

Let us use axios a popular tool to make http requests.
Install axios to your react project.

$ npm install axios --save

import axios and use the module to make a request for payment.

   const makePayment = async () => {
      this.setState({ loading: true });
      axios({
        method: "POST",
        url: `http://192.168.1.10:4000/api/payments/mobile/create?total=AMOUNT_TO_PAY&token=${this.state.token.tokenId}}`        
      }).then(response => {
          // YEY! PAYMENT DONE
          // CHECKOUT YOUR STRIPE DASHBOARD FOR PAYMENTS MADE
      }).catch(error => this.setState({ loading: false, token: null }));
   }

Make sure you don't use localhost in the place of the http url inside axios due to the usage of expo we have to define our system local ipaddress.

Do not forget to test the stripe payment using 42 repeatedly for all card information.

Yey! We have completed the stripe integration with react native expo. Where you can start using to make payment as real just by changing the test keys with real keys 🔥.

React Context API Simple Setup

Hemaprakash Raghu — Sat, 14 Nov 2020 16:29:23 +0000

Developing in react would probably push you to a problem called prop drilling. Basically we get some data from a API and use it and again we need it in another component😟. We call the API another time that leads to damage the quality of the website and the code.

No Problem! We could use the React Context API🔥 which is not really hard to learn as redux.

⌨ Getting Started

Let's make it more simple, no more big stories 😴.

Whatever being followed down below, is under the

reactapp/src/

directory of react app.

We are going to build a tiny wall parallel to the react application where all the required data is being held and used whenever needed 💉.

We will be needing two things to build the wall

Some React JS Hooks
A Reducer

Creating the Reducer 💊

Create a file called reducer.js

Setting up the initial State where all the required data is going to be initialized.

// BASICALLY A GLOBAL JSON OBJECT
export const initialState = {
// YOUR DATA
// Example: username: null
};

A special function called reducer is implemented here to act as a dispatch gun to shoot out data whenever needed and to save data to the wall(data layer).

const reducer = (state, action) => {
     switch(action.type) {
       default: return state;
     }
}

export default reducer;

Here action is the bullet of the dispatch gun where you can specify the action to be taken against those data in the data layer.

Creating the Data Layer 🧱

Create a file called DataLayer.js and paste the content below.

import React, { createContext, useContext, useReducer } from "react";

// DATA LAYER !!!
export const StateContext = createContext();

export const DataLayer = ({ reducer, initialState, children }) => (
    <StateContext.Provider value={useReducer(reducer, initialState)}>
        {children}
    </StateContext.Provider>
);

// COMPONENTS USABLE HOOK
export const useDataLayerValue = () => useContext(StateContext);

Here first the context is created and the necessary bricks such as reducer, initial state and children are passed in. Setting up the wall itself. Children here represents each component that going to be rendered.

Finally we export a usable react hook using the created context layer.

Fixing the DataLayer with our react app.

Inside our index.js file, you can find the main App component.

Surround the app component using the DataLayer component just created.
Make sure you pass in the reducer and initialState as props.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from './serviceWorker';
import { DataLayer } from './DataLayer';
import reducer,{ initialState } from './reducer';

ReactDOM.render(
  <React.StrictMode>
    <DataLayer initialState={initialState} reducer={reducer}>
      <App />
    </DataLayer>
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

Yey! We just completed everything setting up 😎
Now let's use the super power of Context API.

Example of using a React Context API in real time

Consider a react app of getting the username.
We are going to use the data layer to store the username and use it wherever we need throughout the application.
Let's modify some files to make that happen. In reducer.js file.

Create a key called username and set its value to null.

// BASICALLY A GLOBAL JSON OBJECT
export const initialState = {
   username: null
};

Now let's add some code to update it using the reducer method.

const reducer = (state, action) => {
     switch(action.type) {
       case "SET_USERNAME": return {
                               ...state, 
                               username: action.username
                            }
                            break;
       default: return state;
     }
}

Do not forget to return old state so that the data layer make changes only to the required data.
We have just completed our dispatch gun to work.
Use it in the component where you need that username data.

import { useDataLayerValue } from "./DataLayer";

// USERNAME - DATA and dispatch - is a function use to shoot your actions to the data layer
const [{ username }, dispatch] = useDataLayerValue();

const changeUsername = (user) => {
// SHOOTING DATA TOWARDS THE DATA LAYER !!!
   dispatch({
     type: "SET_USERNAME",
     username: user
   });
};

This piece of code just changed your data where ever you have used in your entire project in real time.

Find the official React Documentation at React Doc.

Don't forget to use the GitHub Repo for React Context API, clean code that you can just use it to start building your project ♥ @github/reactcontextapi.