DEV Community: Kevin Odongo

AWS Cognito Passwordless Implementation: For Bonus, add Hasura Claims in the Token.

Kevin Odongo — Wed, 09 Feb 2022 12:18:13 +0000

Hey everyone,

In today's tutorial, I will be guiding you in implementing passwordless authentication flow with AWS Cognito. I will be using AWS CDK to provision the backend. Using AWS SDK will provide us with an excellent way of cleaning up all the resources we provision once done with the tutorial. Here is an article I wrote about Getting Started with AWS SDK

With this approach, there are a few things we need to discuss before proceeding. Have you used Cashup before and seen how their authentication flow works?. In Cashup, users can log in using their email or phone number. There is no password to remember; a code is sent to them using the phone number or email they provided on registration. Super cool indeed.

We need to use an email provider and SMS provider to send the code to users in this implementation. You can leverage AWS SES, AWS SNS, and AWS Pinpoint or use any third-party provider like Twilio, etc. To begin with, let me show you how to configure AWS SES, AWS SNS, and AWS Pinpoint.

Configure AWS SES

Log into AWS SES dashboard and click Create Identity

Provide an email address and click create identity button. Ensure you have access to this email address because AWS will send a link to verify the email address.

Once you verify the email go to the list of all the verified identities, you should see your email as verified:

Note that your account will be in Sandbox, and you can only send emails to verified identities until you are out of the sandbox.

Configure AWS Pinpoint

AWS Pinpoint is not available in all regions of AWS. Log into AWS Pinpoint dashboard and click manage projects and create a new project:

Once you provide the project name, select the feature you want to enable, in this case, SMS and voice. Take note of the projectId when the project is created.

Configure SNS

Log into AWS SNS dashboard and click on Text messaging (SMS)

Add a phone number and ensure you verify the phone number. Note that your account will be in Sandbox, and you can only send SMS to verified phone numbers until you are out of the Sandbox.

Setting up AWS email and SMS providers is quick and easy. You can use any provider of your choice. The whole task is to deploy the AWS Cognito and implement a passwordless authentication flow. I have created a simple front-end application that implements this; I have shared the repo in the front-end section. Clone the backend https://github.com/kevinodongo/aws-cognito-passwordless-cdk-deployment.git and run it locally:

//clone and 
git clone https://github.com/kevinodongo/aws-cognito-passwordless-cdk-deployment.git

//cd in the application
cd aws-cognito-passwordless-cdk-deployment
// install all dependecies
yarn install

// run the application
// deploy the backend and update evn.local file
yarn run dev

To deploy the backend, run the following commands:

// This lambda requires third-party dependencies to be installed before being deployed.
cd  lambda/create-auth-challenge
yarn install

// go back to the root of the file
// in the folder bin/backend.ts provide the source email you registered and // the projectId of the AWS Pinpoint project you created.

#!/usr/bin/env node
import 'source-map-support/register';
import * as cdk from 'aws-cdk-lib';
import { BackendStack } from '../lib/backend-stack';

const prodRegion = 'us-east-2' /*Your recources will be deployed in this region*/
const hasuraClaims = false /*required incase using AWS Cognito with Hasura*/

// With AWS Pinpoint in US you have to provide origination number
// Update the createAuthChallenge lambda with origination number

const pinpointApplicationId = "" /*required*/
const originationNumber = "" /*required only when sending SMS in US*/
const sourceEmail = "" /*required*/

const app = new cdk.App();

new BackendStack(app, 'BackendStack', {
  pinpointApplicationId: pinpointApplicationId,
  hasuraClaims: hasuraClaims,
  sourceEmail: sourceEmail,
  originationNumber: originationNumber,
  env: {
    region: prodRegion
  }
});

On completion updating the backend.ts file, run the following commands:

// build the application
npm run build

// synthesis the application
cdk synth

// incase it is your first time you might get an error. Run the following command:
cdk bootstrap

// Deploy the backend application
cdk deploy --profile ***

Take note of the output emitted when deployment is complete; you will get the AWS Cognito UserPool Id and UserPool Web Client Id. Save these somewhere, as you will need them to configure the front-end.

BONUS - How to add Hasura claims in the token.

We have added a lambda function that will add Hasura claims to the token generated by AWS Cognito. To enable this add true to hasuraClaims props in the following file /bin/backend.ts. That is all you have do. The tokens generated will hasura claims as follows:

This step is essential because when you integrate Hasura with AWS Cognito; when you are making queries and mutations, the Hasura engine will verify each request by checking on the claims in the token.

#!/usr/bin/env node
import 'source-map-support/register';
import * as cdk from 'aws-cdk-lib';
import { BackendStack } from '../lib/backend-stack';

const prodRegion = 'us-east-2' /*Your recources will be deployed in this region*/

// change this to true, build, synthesize and deploy the application.
const hasuraClaims = true /*required in case using AWS Cognito with Hasura*/
...

Front-end implementation

My example is built using the Next.js framework, but not everybody uses Next.js. The first thing you need to do is install AWS amplify library. Get my example here

// install amplify library
yarn add aws-amplify

// clone example
git clone https://github.com/kevinodongo/aws-cognito-passwordless-next-js.git
cd aws-cognito-passwordless-next-js
yarn install
npm run dev

Create a folder called lib (Name the folder or files any names there is no convention about the naming) file called auth.ts and utils.ts. In auth.ts add the following content:

// AWS Amplify 
import { Auth } from 'aws-amplify';
import { getRandomString } from "./utils"

export const checkUserSession = async () => {
  try {
    const user = await Auth.currentAuthenticatedUser()
    return user
  } catch (error) {
    console.log(error);
  }
}

export const signIn = async (username: string) => {
  try {
    const user = await Auth.signIn(username);
    return user
  } catch (error) {
    throw new Error("Please check on username or password")
  }
}

export const signUp = async (username: string) => {
  let userAttributes = null
  let emailRegex = new RegExp(/[^@ \t\r\n]+@[^@ \t\r\n]+\.[^@ \t\r\n]+/)
  if (emailRegex.test(username)) {
    userAttributes = {
      email: username,
      phone_number: ""
    }
  } else {
    userAttributes = {
      email: "",
      phone_number: username
    }
  }

  try {
    const { user } = await Auth.signUp({
      username: username,
      password: getRandomString(30),
      attributes: userAttributes
    });
    return user
  } catch (error) {
    throw new Error("Something wrong occured when we were creating your account")
  }
}

export async function answerCustomChallenge(cognitoUser: string, code: string) {
  try {
    const answerResponse = await Auth.sendCustomChallengeAnswer(cognitoUser, code)
    console.log('authresponse', answerResponse)
    return answerResponse
  } catch (error) {
    console.log('Apparently the user did not enter the right code', error);
  }
}

export const signOut = async () => {
  try {
    await Auth.signOut();
  } catch (error) {
    console.log(error);
  }
}

export const globalSignOut = async () => {
  try {
    await Auth.signOut({ global: true });
  } catch (error) {
    console.log(error);
  }
}

In utils.ts add the following contents:

export function getRandomString(bytes: number) {
  const randomValues = new Uint8Array(bytes);
  window.crypto.getRandomValues(randomValues);
  return Array.from(randomValues).map(intToHex).join('');
}

function intToHex(nr: number) {
  return nr.toString(16).padStart(2, '0');
}

In main.js, index.js or app.js, this depends on the framework you are using. Initialize AWS Amplify as follows.

// intialize amplify
import { Amplify } from "aws-amplify";
Amplify.configure({
  Auth: {
    region: process.env.NEXT_COGNITO_REGION,
    userPoolId: process.env.NEXT_USERPOOL_ID,
    userPoolWebClientId: process.env.NEXT_USERPOOLWEBCLIENT_ID
  }, ssr: true
});

That is all you have to do; now you can call the functions as follows:

import { signUp, signIn, answerCustomChallenge} from "../auth"

let userResponse
// handle new user
const handleNewUser = async () => {
  // incase you are using phone number include the country prefix +1*******
   let username = /*phone number or email*/
   await signUp(username)
}
// handle login
const handleLogin = async () => {
   let username = /*phone number or email*/
  userResponse = await signIn(username)
}

// handle code
const handleCode = async () => {
   const answeResponse= await  answerCustomChallenge(userResponse, code)
}

Congratulations, you have successfully implemented a passwordless authentication flow with AWS Cognito. I will share how to deploy and configure Hasura standalone in ECS Fargate. Hey do not forget to cleanup using the following command:

cdk destroy

Thank you and see you next time.

Getting started with AWS CDK

Kevin Odongo — Wed, 26 Jan 2022 08:38:57 +0000

Hey everyone, how are you doing? We have gone through AWS CloudFormation, and I believe you are anxiously waiting for the final section. Do not worry; I am preparing good examples for you, and once it is ready, I will publish them. But today, I want to talk about AWS CDK?.

What is AWS CDK?

This is a framework for defining cloud infrastructure in code and provisioning it through AWS CloudFormation.

You can now see why I started with AWS CloudFormation to familiarize yourself with the core product that powers most of AWS Infrastructure as code CLI's like AWS CDK, AWS SAM, AWS CDK, etc. Using AWS CDK has a lot of benefits in building scalable, cost-effective applications in the AWS Cloud.

The AWS CDK supports TypeScript, JavaScript, Python, Java, C#/.Net, and (in developer preview) Go. Developers can use one of these supported programming languages to define reusable cloud components known as Constructs. You compose these together into Stacks and Apps.

The team at AWS has built an extraordinary framework to work with while deploying and configuring resources in AWS. This tool simplifies the process. You need to install AWS CDK Toolkit, which is a command-line tool. Use this command to install the kit.

// install toolkit
npm install -g aws-cdk 

// once installed, run the following command:
cdk version

Once you have installed let us take a look at some common commands:
cdk --help
cdk list - list all stacks in the app
cdk synthesize - prints cloudformation template
cdk bootstrap - deploy staging stack
cdk deploy - deploy specified stacks
cdk destroy - destroy a specified stack
cdk metadata - display metadata
cdk init - creates a new project
cdk context - manages cached context values
cdk docs - cdk API reference
cdk doctor - checks for problems

Now that we have familiarized ourselves with AWS CDK before getting our hands dirty let us begin by configuring our credentials. Run the following command to configure your environment.

aws configure

You may optionally use the --role-arn (or -r) option to specify the ARN of an IAM role that should be used for deployment. This role must be assumable by the AWS account being used.

Let us get started and create our first app with AWS CDK. This application will be simple, whereby a user has two access to two routes; the GET route to retrieve their secret and the PUT route to create their secret. We can add another route, DELETE, to delete the secret they saved.

To begin with, let us create a folder called cdk-typescript. I will be using typescript language, but you can use any of the supported languages.

mkdir cdk-typescript
cd cdk-typescript

Once we have created the folder, then we can run the following command to make an application:

cdk init app --language typescript

Now we have an application ready, let us create a folder called lambdaFunction and add a file called app.js.

mkdir lambdaFunction && touch app.js

Then add the following contents in the app.js

const AWS = require('aws-sdk');
const docClient = new AWS.DynamoDB.DocumentClient({ apiVersion: '2012-08-10' });

// Get resources from enviroment
const secretTableName = process.env.SECRET_TABLE_NAME;


/**
 *
 * Event doc: https://docs.aws.amazon.com/apigateway/latest/developerguide/set-up-lambda-proxy-integrations.html#api-gateway-simple-proxy-for-lambda-input-format
 * @param {Object} event - API Gateway Lambda Proxy Input Format
 *
 * Context doc: https://docs.aws.amazon.com/lambda/latest/dg/nodejs-prog-model-context.html 
 * @param {Object} context
 *
 * Return doc: https://docs.aws.amazon.com/apigateway/latest/developerguide/set-up-lambda-proxy-integrations.html
 * @returns {Object} object - API Gateway Lambda Proxy Output Format
 * 
 */

exports.handler = async (event) => {

  const lambdaResponse = {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Headers": "Content-Type",
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "OPTIONS,POST,GET,DELETE"
    },
    body: '',
  };

  try {
    switch (event.httpMethod) {
      case 'PUT':
        if (event.queryStringParameters.content) {
          const results = await createSecret(event.queryStringParameters.content)
          lambdaResponse.body = `https://${event.requestContext.apiId}.execute-api.us-east-1.amazonaws.com/prod${event.path}?id=${results}`
        } else {
          lambdaResponse.body = "Please provide a secret"
        }
        break;
      case 'GET':
        if (event.queryStringParameters.id) {
          lambdaResponse.body = await getSecret(event.queryStringParameters.id)
        } else {
          lambdaResponse.body = "Please provide the id of the secret you want to retrive"
        }
        break;
      case 'DELETE':
        if (event.queryStringParameters.id) {
          await deleteSecret(event.queryStringParameters.id)
        } else {
          lambdaResponse.body = "Please provide the id of the secret you want to delete"
        }
        break;
      default:
        break
    }
  } catch (error) {
    lambdaResponse.statusCode = 400
    lambdaResponse.body = error.message
  } finally {
    lambdaResponse.body = JSON.stringify(lambdaResponse.body)
  }

  return lambdaResponse;
};

/**
 * Creates a new secret
 * @param id
*/
const createSecret = async (content) => {
  const secretId = uuid(16)

  const params = {
    TableName: secretTableName,
    Item: {
      "id": secretId,
      "content": content,
    },
  }

  await docClient.put(params).promise()
  return secretId
}


/**
 * Get user secret
 * @param id 
 * @returns {object}
*/
const getSecret = async (id) => {
  const result = await docClient.get({
    TableName: secretTableName,
    Key: {
      "id": id
    }
  }).promise()
  if (!result) {
    return null
  }

  return result.Item
}

/**
 * Delete user secret 
 * @param id 
*/
const deleteSecret = async (id) => {
  var params = {
    TableName: secretTableName,
    Key: {
      "id": id,
    },
  };
  await docClient.delete(params).promise()
}

/**
 * Generate random uuid
 * @returns uuid
*/
const uuid = () => {
  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
    return v.toString(16);
  });
}

With our function ready, we need to update cdk-typescript-stack.ts.. We will do this step by step to understand how straightforward it is to work with AWS CDK. This tutorial will be exciting because you will note how AWS CDK has simplified building backend infrastructure in the cloud. To begin with, let us create our database. AWS CDK has an API reference whereby you can get all AWS resources documentation on how to deploy and configure using AWS CDK.

Add the following contents in the following file ./lib/cdk-typescript-stack.ts.

import { Stack, StackProps } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import * as dynamodb from 'aws-cdk-lib/aws-dynamodb';

export class CdkTypescriptStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);

    // create a dynamodb secret table
    const table = new dynamodb.Table(this, 'SecretTable', {
      partitionKey: { name: 'id', type: dynamodb.AttributeType.STRING },
    });

  }
}

Since we use typescript, we need to build our application with the following command and deploy the application.

// build the application
npm run build

// Optional
cdk synth

// Deploy
cdk deploy

On completion, you should be able to see something like this in your terminal.

Next, we want to add the lambda that we created. This lambda function will interact with the table we created above, and as you know, AWS IAM permissions for the function need to be updated so the function can interact with the table. Update the cdk-typscript-stack.ts as follows, then build and deploy. Oh, one more thing you can always run the following command cdk diff to check on the changes that are going to happen in the backend.

import { Stack, StackProps } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import * as dynamodb from 'aws-cdk-lib/aws-dynamodb';
import * as lambda from 'aws-cdk-lib/aws-lambda';

export class CdkTypescriptStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);

    // create a dynamodb table
    const table = new dynamodb.Table(this, 'SecretTable', {
      partitionKey: { name: 'id', type: dynamodb.AttributeType.STRING },
    });

    // create lambda function
    const secretFunction = new lambda.Function(this, 'SecretFunction', {
      runtime: lambda.Runtime.NODEJS_14_X,
      handler: 'app.handler',
      code: lambda.Code.fromAsset('./lambdaFunction')
    });

    // update function IAM polify grant full access to dynamodb
    table.grantFullAccess(secretFunction)

    // update the function enviroment
    secretFunction.addEnvironment("SECRET_TABLE_NAME", table.tableName)

  }
}

We have the last resource to create, which is API Gateway. Generally, you can see how straightforward working with AWS CDK is. And it reduces the lines of code we need compared to working with vanilla CloudFormation. Update the cdk-typscript-stack.ts as follows, then build and deploy.

Now log into AWS Console and check the list of lambdas in the region you selected when you configured your credentials with the following command aws configure.We have now deployed our first application using AWS CDK.

import { Stack, StackProps } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import * as dynamodb from 'aws-cdk-lib/aws-dynamodb';
import * as lambda from 'aws-cdk-lib/aws-lambda';
import * as apigateway from 'aws-cdk-lib/aws-apigateway';

export class CdkTypescriptStack extends Stack {
  constructor(scope: Construct, id: string, props?: StackProps) {
    super(scope, id, props);

    // create a dynamodb table
    const table = new dynamodb.Table(this, 'SecretTable', {
      partitionKey: { name: 'id', type: dynamodb.AttributeType.STRING },
    });

    // create lambda function
    const secretFunction = new lambda.Function(this, 'SecretFunction', {
      runtime: lambda.Runtime.NODEJS_14_X,
      handler: 'app.handler',
      code: lambda.Code.fromAsset('./lambdaFunction'),
    });

    // update function IAM polify grant full access to dynamodb
    table.grantFullAccess(secretFunction)

    // update the function enviroment
    secretFunction.addEnvironment("SECRET_TABLE_NAME", table.tableName)

    // create rest api
    const api = new apigateway.LambdaRestApi(this, 'secret-api', {
      handler: secretFunction,
      proxy: false
    });

    // add resource and methods
    const secret = api.root.addResource('secret');

    secret.addMethod('GET');
    secret.addMethod('PUT');
    secret.addMethod('DELETE');

  }
}

On completion, you should be able to see something like this in your terminal.

✨  Deployment time: 91.55s

Outputs:
CdkTypescriptStack.secretapiEndpointC5C4044F = https://[apiId].execute-api.us-east-1.amazonaws.com/prod/       
Stack ARN:
arn:aws:cloudformation:us-east-1:440343172651:stack/CdkTypescriptStack/d191a320-7e0d-11ec-a2aa-1249d52492bf       

✨  Total time: 103.7s

We have created the backend of our application we can test the url using postman to ensure everything works correctly.

PUT METHOD

Replace the apiId and run the following command:

curl --location --request PUT 'https://[apiId].execute-api.us-east-1.amazonaws.com/prod/secret?content=kevinodongo'

This command will create a new record in dynamodb and return a URL that you can use to retrieve the secret.

"https://[apiId].execute-api.us-east-1.amazonaws.com/prod/secret?id=54a7a7b9-972e-4b2e-9422-715c0ea8733d"

GET METHOD

Replace the apiId and run the following command:

curl -i --location --request PUT 'https://[apiId].execute-api.us-east-1.amazonaws.com/prod/secret?id=54a7a7b9-972e-4b2e-9422-715c0ea8733d'

Your response should look something like this.

{"content":"kevinodongo","id":"54a7a7b9-972e-4b2e-9422-715c0ea8733d"}

DELETE METHOD

Replace the apiId and run the following command:

curl --location --request DELETE 'https://[apiId].execute-api.us-east-1.amazonaws.com/prod/secret?id=54a7a7b9-972e-4b2e-9422-715c0ea8733d'

Now that we have completed our application let us go through some of the terms you need to learn with AWS CDK. I will be going through them briefly, but you can read more about them here

Constructs

These are building blocks that contain everything AWS CloudFormation requires to create an environment.

Composition

Composition is the critical pattern for defining higher-level abstractions through constructs. A high-level construct can be composed of any number of lower-level constructs. In turn, it could form those from even lower-level constructs, which eventually composed from AWS resources.

Initialization

Constructs are implemented in classes that extend the Construct base class. You define a construct by instantiating the class. When they are initialized, all constructs take three parameters: Scope, id, and Props.

Apps and stacks

Stacks in AWS CDK apps extend the Stack base class, as shown in the previous example. This approach is a typical pattern when creating a stack within your AWS CDK app:

Extend the Stack class.
Define a constructor that accepts scope, id, and props.
Invoke the base class constructor via super with the received scope, id, and props, as shown in the following example.

The unit of deployment in the AWS CDK is called a stack. All AWS resources defined within the scope of a stack, either directly or indirectly, are provisioned as a single unit.

Each Stack instance in your AWS CDK app is explicitly or implicitly associated with an environment (env). An environment is the target AWS account and region the stack is deployed.

const regionEU = { account: '2383838383', region: 'eu-west-1' }; 
const regionUSA = { account: '8373873873', region: 'us-east-1' }; 

new USAStack(app, 'stack-us', { env: regionUSA }); 
new EUStack(app, 'stack-eu', { env: regionEU });

Hey! take your time and understand the following concepts well:

Bootstrapping
Escape hatches
Aspects
Feature flags
Context
Permissions
Assets
Tagging
Parameters
Tokens
Identifiers
Resources
Enviroments

Best Practices

One thing you need to first take into consideration is to have a continuous delivery pipeline for deployment. You should organize the application into building separate individual building blocks, for example, API, database, monitoring, etc.

The organization should define the standards and policies to guide its cloud infrastructures. A landing zone is a pre-configured, secure, scalable, multi-account AWS environment based on best practice blueprints. You can tie together the services that make up your landing zone with AWS Control Tower. This high-level service configures and manages your entire multi-account system from a single user interface.
Start simple and add complexity only when needed.
Align with the AWS Well-Architected framework
Infrastructure and runtime code live in the same package.
Every application starts with a single package in a single repository.
Move code into repositories based on code lifecycle or team ownership.
Model with constructs, deploy with stacks.
Configure with properties and methods, not environment variables
Unit test your infrastructure
Don't change the logical ID of stateful resources.
Make decisions at synthesis time.
Use generated resource names, not physical names.
Define removal policies and log retention
Separate your application into multiple stacks as dictated by deployment requirements
Let the AWS CDK manage roles and security groups.
Model all production stages in code
Measure everything

That is all I have to share in getting started with AWS CDK. This article should get you started and ensure you can work with AWS CDK. Do not stop with this article research more. I will keep sharing more about AWS CDK. Thank you and see you next time.

Working with AWS CloudFormation - Part 2

Kevin Odongo — Thu, 13 Jan 2022 17:46:09 +0000

Let us continue from where we left. In our previous article, we went through the basics of CloudFormation, understood the structure of CloudFormation, modules and had a Todo backend example.

In our next part, we want to go through the following:-

Working with stack and stack sets
Advance with modules
Using CloudFormation registry
Complete the section with another example.

In this article, we are going to see how you can use nested stacks and create the todo backend. The only difference is we are going to use Postrge Database. With Postgre Database we can use Hasura and Apollo Client to connect and use graphql instead of REST API. Nested stacks allow you to build templates that can be reused to build infrastructure. Modules and nested stacks decouple our main stack and allow reusability.

Designing a CloudFormation template is an art and needs you to understand the best practices to follow and how to connect each service. You also need to keep track of the quotas of the services you are provisioning because with CloudFormation you are only charged for the services you deploy on AWS.

Working with stack and stack sets

Assuming you provisioned the Todo backend we went through in the first article we will use this created stack to go through this section. AWS CloudFormation provides two methods for updating stacks:

Direct update - This will update the existing stack and make the changes immediately.
Executing change sets - With this, you can preview the changes AWS CloudFormation will make to your stack and decide. This is the ideal approach.

When updating your resources you should keep in mind that the following can take place with your resources replaced, interrupted, or no interruption.

This command will update our template directly. This is not ideal when you are updating an application that is already in production.

aws cloudformation update-stack --stack-name todobackend --template-body file://backend.yml --parameters file://backend-parameters.json --capabilities CAPABILITY_NAMED_IAM

Change sets

Change sets don’t indicate whether CloudFormation will successfully update a stack. For example, a change set doesn’t check if you will surpass an account limit, if you’re updating a resource that doesn’t support updates, or if you have insufficient permissions to modify a resource, all of which can cause a stack update to fail. If an update fails, CloudFormation attempts to roll back your resources to their original state.

Assume we have made changes in our backend.yml we can create a changeset as follows:

aws cloudformation create-change-set --stack-name todobackend  
    --change-set-name todobackendchangeset --template-body file://backend.yml --parameters file://backend-parameters.json --capabilities CAPABILITY_NAMED_IAM

In case we have only updated the parameters then we can create a new changeset with the previous template as follows:

aws cloudformation create-change-set --stack-name todobackend --change-set-name todobackendchangeset --use-previous-template --parameters file://backend-parameters.json

Once we have created all our change sets we can list them as well as describe them.

// list change sets aws cloudformation list-change-sets --stack-name todobackend

// describe change sets
aws cloudformation describe-change-set --stack-name todobackend  --change-set-name todobackendchangeset

OR use change set ARN
aws cloudformation describe-change-set --change-set-name arn:aws:cloudformation:us-east-1:440343172651:changeSet/todobackendchangeset/f48c2397-4da9-4751-8d3f-3a047161ebb1

This is a great way because it will assist when working as a team. Once a change sets has been approved you can execute it as follows:

aws cloudformation execute-change-set --change-set-name arn:aws:cloudformation:us-east-1:440343172651:changeSet/todobackendchangeset/f48c2397-4da9-4751-8d3f-3a047161ebb1

Note that once you execute your change sets then AWS automatically deletes the change sets.

To manually delete a change sets use the following command:

aws cloudformation delete-change-set --change-set-name arn:aws:cloudformation:us-east-1:440343172651:changeSet/todobackendchangeset/f48c2397-4da9-4751-8d3f-3a047161ebb1

You can cancel a stack update when the status is UPDATE_IN_PROGRESS using the following command:

aws cloudformation cancel-update-stack --stack-name todobackend

In case you want to prevent any update from your stack you can update the stack policy as follows

aws cloudformation set-stack-policy --stack-name todobackend --stack-policy-body file://policy.json

// this will deny any update to the stack policy.json
    {
      "Statement" : [
        {
          "Effect" : "Deny",
          "Action" : "Update:*",
          "Principal": "*",
          "Resource" : "*"
        }  
      ]
    }

Sometimes we edit some resources outside the CloudFormation which might bring a problem when rolling back. For example, deleting a bucket through the console but forgetting we provisioned the bucket through AWS CloudFormation.

To detect changes that have happened in our stack we are going to use drift detection.

Drift detection enables you to detect whether a stack's actual configuration differs, or has drifted, from its expected configuration

To detect drift on an entire stack using the AWS CLI, use the following aws cloudformation commands:

detect-stack-drift to initiate a drift detection operation on a stack.
describe-stack-drift-detection-status to monitor the status of the stack drift detection operation.
describe-stack-resource-drifts to review the details of the stack drift detection operation.

aws cloudformation describe-stack-resource-drifts --stack-name todobackend --stack-resource-drift-status-filters MODIFIED DELETED

Importing existing resources to a stack

You can add already existing resources into a stack and manage them.

Let us first run a summary of our backend.yml

aws cloudformation get-template-summary --template-body file://backend.yml

I will create a new table called testthrough the console and later we add it to our stack.

Let us create a file called changes.txt and add the following:

[
 {
  "ResourceType": "AWS::DynamoDB::Table",
   "LogicalResourceId": "TestTable",
   "ResourceIdentifier": {"TableName": "test"}
  }
]

Then we can update our backend.yml file. Note that we have a logical resource id that we have indicated in the changes.txt but we currently do not have it in the backend.yml

Add the following in your backend.yml file and with that, you will have referenced the logical id.

Now create a changeset and execute the changeset once you have confirmed all the changes that will take place.

// create a change set as follows
aws cloudformation create-change-set --stack-name todobackend --change-set-name newchangeset --change-set-type IMPORT --resources-to-import file://changes.txt  --template-body file://backend.yml --parameters file://backend-parameters.json --capabilities CAPABILITY_NAMED_IAM

Note that we have indicated change-set-type IMPORT . Once ready run the following command:

aws cloudformation execute-change-set --change-set-name ImportChangeSet --stack-name todobackend

Working with nested stacks

Nested stacks are stacks created as part of other stacks. You create a nested stack within another stack by using the AWS::CloudFormation::Stack resource.

Read more about the properties that are required when creating nested stacks https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/aws-properties-stack.html

    Type: AWS::CloudFormation::Stack
    Properties: 
      NotificationARNs: 
        - String
      Parameters: 
        Key : Value
      Tags: 
        - Tag
      TemplateURL: String
      TimeoutInMinutes: Integer

Stack sets

A stack set lets you create stacks in AWS accounts across regions by using a single CloudFormation template. All the resources included in each stack are defined by the stack set's CloudFormation template. As you create the stack set, you specify the template to use, in addition to any parameters and capabilities that template requires.

With stack sets, you can deploy multiple stacks to different regions using a single CloudFormation template. You can set up either self-managed or service-managed permission.

This will be advantageous if you are deploying in multiple accounts and regions. You can manage all the resources using a single template.

Here is a command for use in creating a stackset.

aws cloudformation create-stack-set --stack-set-name todoapp-stackset --template-body file://backend.yml

Just keep in mind that when you are dealing with multiple regions use stacksets to manage the stacks in all regions.

CloudFormation Registry

The CloudFormation registry lets you manage the extensions, both public and private, that are available for use in your CloudFormation account.

Public extensions are accessible to everybody and there are two kinds:

Amazon public extensions
Third-party public extensions - These ones have to be activated into your account before usage.

There are also two kinds of private extensions:

Activated private extensions
Registered private extensions

You can view the CloudFormation registry https://console.aws.amazon.com/cloudformation/home

Registration. Usage and deregistration of modules

Let us go through how to create, register, use and deregister modules. You can use the following command cfn init to scaffold a quick sample. So we will create a simple s3 module.

cfn init
> MODULE // select module
> Name::S3::Bucket::MODULE // module name

Once you have let us remove versioning and encryption so we have a basic s3 module. This should be done in the following folder fragments/sample.json

To deploy the module to the CloudFormation registry run the following command:

cfn submit

This is how the module that we have submitted should be. We can reuse this module to create an S3 bucket.

How to use the module in your template is simple.

...
  Type: Name::S3::Bucket::MODULE

By referencing the module CloudFormation will use it to create our bucket. Run the following command:

// create stack
aws cloudformation create-stack --stack-name s3-module --template-body file://module-stack.yml --parameters file://parameters.json --capabilities CAPABILITY_AUTO_EXPAND

// describe mnodule
aws cloudformation describe-type --type MODULE --type-name Name::S3::Bucket::MODULE

To deregister a module use the following command:

aws cloudformation deregister-type --type MODULE --type-name Name::S3::Bucket::MODULE

Nested stacks vs Modules

In my personal opinion modules and stacks have some similarities. They allow you to reuse templates. With nested stack, your templates have to be uploaded to s3 buckets on the other hand with modules you have to upload to the cloud formation registry.

EXAMPLE SECTION

As explained above I noted down that we are trying to recreate todo backend. To begin here are the links to our nested module templates.

https://github.com/kevinodongo/cloudformation/tree/main/nested-example

Before using the templates we need to upload the following to the s3 bucket.

cognito-template.yml
rds-database-template.yml
s3-storage-template.yml

You can use the following command to upload your files to s3 bucket.

// example of uploading cognito template
aws s3api put-object --bucket nested-templates --key auth-cognito --region us-east-1 --body ./cognito-template.yml

The template that we are going to use to deploy the nested stack is nested-template.yml.

If you compare nested-template.yml and backend.yml you will note that with nested we have reduced the code in our template and everything looks neat and simple.

We can reuse the templates and recreate the same backend in any region of our choice. We only need to provide the parameters.

This truly reduces our working load and ensures we have the correct and similar deployment.

This is truly awesome and I believe you are getting to the logic of how to work with nested templates.

To deploy the nested template just run the following command:

aws cloudformation create-stack --stack-name nestedbacked --template-body file://nested-template.yml --capabilities CAPABILITY_NAMED_IAM

Once deployed when you log in to the Cloudformation dashboard you should be able to see the following:

This indicates that all our resources have been provisioned. Now we can use Hasura and connect to our database and create our users and tasks tables.

// Get hasura docker compose file
curl https://raw.githubusercontent.com/hasura/graphql-engine/stable/install-manifests/docker-compose/docker-compose.yaml -o docker-compose.yml

// run the following command
docker-compose up -d

Once your docker is running connect to the Hasura dashboard through http://localhost:8080/console and connect to the Postgre database. You can get the outputs of the nested rds database you will find the postgre link which you can use to connect.

In this example, once you have Hasura then you can use ApolloClient and get started with graphql and complete your todo app.

Hey, that is all we needed to go through in this article. In our final article, we are going to go through the following examples:

Networking - Deploy EC2, VPC, etc
ECS and ECR
Continuos delivery

Thank you for going through this article.

Working with AWS CloudFormation - Part 1

Kevin Odongo — Mon, 03 Jan 2022 09:41:20 +0000

Hey Dev's

I promised i will publish my first article today. Going through my previous article you will note the list of the contents i will be starting with here covering.

We are going to start with CloudFormation and break it down so you are comfortable working with it. Having good knowledge in any of the products used to build Infrastructre as Code is an added advantage when you are aspiring in working with cloud products.

Terraform allows you to provision your services in almost all the major cloud services. When provisioning products to any cloud services, Infrastructure as Code allows you to have a better strategy of building and destroying. When cleaning up you will be certain you have cleared all the resources you had provisioned.

I will be publishing my articles on medium and dev.to to ensure we reach more users. Here is the link to the first article about CloudFormation.

https://medium.com/@davyod/cbca8403bc8e

Enjoy the article.

Contents for 2022

Kevin Odongo — Sun, 02 Jan 2022 19:19:02 +0000

Hey everyone,

How are you doing, it has been awhile since i wrote an article and i have truly missed it. This year i want to try and ensure each week we have something to read.

We will go through various topics through the year. We will talk about both front-end and backend intergrations.

Here is the list of the contents i will be preparing offcourse there will be more that i have not included here:-

Infrastructure as Code

Infrastructure as Code (IaC) is the management of infrastructure (networks, virtual machines, load balancers, and connection topology) in a descriptive model, using the same versioning as the DevOps team uses for source code.

I will go in depth on how to get started with the following. Having knowledge with the following will make it easy for you to provision AWS resources and cleanup once you are done.

AWS CloudFormation
Terraform
AWS SAM CLI and AWS CDK

Hasura

Hasura is quite powerfull and i really loved working with it on various projects. I will share how to get started with it and how to provision your own on AWS ECS, connecting with postgreDB or SQL Server. We will build a chat application together through the tutorials.

Electron

Electron is a great framework used to build Desktop applications. We will have articles from beginner to advanced. You can build very powerfull applications with it.

Machine Learning

I have loved working on Machine Learning projects and through the year we are going to have articles on building with Machine Learning. I will share on how one can intergrate background change and blurring on videos, training models etc.

AWS Products

I will keep sharing how to work with various AWS products and how to intergrate them in your applications.

Our first article about CloudFormation will be published tommorow.

Wishing everyone a great year ahead and may you achieve all your hurdles. More content will be added as we go along.

Thank you

Object Oriented Programming with TypeScript

Kevin Odongo — Sat, 05 Jun 2021 07:39:53 +0000

Hey Dev's

How has been your week? I hope everyone had a great week. In todays tutorial let us go through Object Oriented Programming (OOP).

Object Oriented programming (OOP) is a programming paradigm that relies on the concept of classes and objects. It is used to structure a software program into simple, reusable pieces of code blueprints (usually called classes), which are used to create individual instances of objects

Object programming is well-suited for programs that are large, complex and actively updated or maintained.

The Object class represents one of JavaScript's data types. It is used to store various keyed collections and more complex entities. Objects can be created using the Object() constructor or the object initializer / literal syntax.

Below is an example of an object class. In this example we have defined a Person with some attributes and a method.



// person class
class Person {
   name: string = '' // default
   age: number = 0 // default 

   greetings(){
     return this.name + ' ' + this.age
   }
}

// to create a new instance of a class
const person1: any = new Person()
person1.name = 'Kevin Odongo'
person1.age = 36 
console.log(person1.greetings()) // This should render Kevin Odongo 36

Benefits of Object Oriented Programming

Some of the benefits of Object Oriented Programming are as follows:

Easier debuging
Reuse of code through inheritance
Flexibility through polymorphism
Effective problem solving
Project decoupling (Separate project into groups)

Principles of Object Oriented Programming

Encapsulation.

The implementation and state of each object are privately held inside a defined boundary, or class. Other objects do not have access to this class or the authority to make changes but are only able to call a list of public functions, or methods. This characteristic of data hiding provides greater program security and avoids unintended data corruption.

Take a look at this example. In the example we have defined two object classes and created an instance of each. So in layman term encapsulation principle states that the new instance of motor1 cannot access the attributes of person1. If you try you should get such a warning.

Property 'age' does not exist on type 'Motor'



// person object
class Person {
   name: string = ''
   age: number = 0
}

// motor vehicle object
class Motor {
  make: string = ''
  model: string = ''
  color: string = ''
}

// create a new instance of each
const person1 = new Person()
const motor1 = new Motor()

// warning Property 'age' does not exist on type 'Motor'
motor1.age()

Abstraction.

Objects only reveal internal mechanisms that are relevant for the use of other objects, hiding any unnecessary implementation code. This concept helps developers more easily make changes and additions over time.

This is quite powerful in development and TypeScript provides us several ways of manupulating member visibilty in a class object.

Let us see how this work. In this example we have added public in all the Person attributes. By default all attributes are always public but for readability it is good practice to add it.



// person class object
class Person {
   public name: string = ''
   public age: string = ''

   public greetings(){
     return name + ' ' + age
   } 
}

We can use the following to control attribute visibilities:

Public
Protected
Private
Static

Further we can use readonly which will prevents assignments to the field outside of the constructor.

Let us take another example to further understand this concept.



// class person

class Person {
   private readonly credentials: string = ''
   private name: string = ''
   private department: string = ''

   constructor(value: string){
      this.credentials = value
   }

   public setName(name: string): void {
      if(!this.credentials) return
      this.name = name
      // logic get department
      const userDepartment = axios.get(.....)
      if(userDepartment) this.department = userDepartment
   }

   public getName(){
     return `Employee name: ${this.name}, Department: ${this.department}`
   }
}

In the example above if we try to create a new instance of Person without providing credentials we are going to get a warning and it wont compile. The first thing we should notice is credentials visibility is private readonly meaning it can only be updated within the constructor.



// warining An argument for 'value' was not provided.
const person1 = new Person()

// this will succeed
const person1 = new Person('123456')

One more thing we should not is all our attributes are private and cannot be accessed outside the class object. Take note that we can only access public objects outside the class object.

Try this



// this will succeed
const person1 = new Person('123456')

person1. // this will automatically list for you all the properties accessible and you will NOTE all the private attributes cannot be accessed outside the class object.

Inheritance.

Relationships and subclasses between objects can be assigned, allowing developers to reuse a common logic while still maintaining a unique hierarchy. This property of OOP forces a more thorough data analysis, reduces development time and ensures a higher level of accuracy.

Take a look at this example. You will NOTE that by extending the TeslaCompnany we have inherited all the public attributes and can call them when we create a new instance of TeslaEmployee. This can allow us have a base class and reuse the base class in different subsclasses.



// class company 
type Department = {
   name: string
}

type Employee = {
   name: string
   age: number
}

class TeslaCompany {
      private static role = "Admin"
      private readonly credentials: string = ''
      private departments: (Department)[] = []
      private employees: (Employee)[] = []

      constructor(cred: string) {
        this.credentials = cred
      }

      addDepartment(value: Department) {
        this.departments = [...this.departments, value]
      }

      addEmployee(value: Employee) {
        this.employees = [...this.employees, value]
      }
    }

    class TeslaEmployee extends TeslaCompany {
      private new_employee: Employee = { name: '', age: 0}

      public setName(name: Employee): void {
        this.new_employee = name

      }
}

const newTeslaEmployee = new TeslaEmployee('123456')
newTeslaEmployee.setName({ name: 'Kevin Odongo', age: 36 })
newTeslaEmployee.addDepartment({ name: 'Finance' })
newTeslaEmployee.addEmployee({ name: 'Kevin Odongo', age: 36 })
console.log(newTeslaEmployee)

Polymorphism.

Objects can take on more than one form depending on the context. The program will determine which meaning or usage is necessary for each execution of that object, cutting down the need to duplicate code.

Let us understand this by going through an example. We will notice that the Person object is extended by two different subsclasses and take different context when each a new instance of each subsclass is created.



// class Person
class Person {
   public name: string = ''
   public role: string = '' 
}

class basketballPlayer extends Person {
     public setName(name: string){
       this.name = name
       this.role = 'BasketBall Player'
    }
    public getName(){
       return `User name: ${this.name} Role: ${this.role}`
    }
}

class golfPlayer extends Person {
    public setName(name: string){
       this.name = name
       this.role = 'Golf Player'
    }
    public getName(){
       return `User name: ${this.name} Role: ${this.role}`
    }
}

const person1 = new basketballPlayer()
const person2 = new golfPlayer()
person1.setName('Kevin Odongo')
person2.setName('Kevin Odongo')
console.log(person1.getName())
console.log(person2.getName())

Congratulations for the patience we have gone through the principles of Object Oriented Programming with examples to help us understand each concept.

Summary explanation

Encapsulation - Class objects are in a specific boundary. For example citizens in a country. They are all living within a specific boundary can governed by its laws.

Abstraction - Class objects can only share public properties and hide private properties. This creates a great way of controlling its behaviour.

Inheritance - We can inherit other classes and extend all there public properties.

Polymorphism - Objects can take various behaviour depending on the context.

Instead of using classes we can also use functions. Take the person class object we have been using through the example we can define it as follows:

Option 1

In this option to access Person object we do not need to create a new instance of the Person object.



// person object
var Person = (function () {
      let user: {
        name: ''
        age: 0
      }

      return {
        setName: function (value: any) {
          user = Object.assign({}, value)
        },

        getName: function (){
          return user
        },

        greetings: function() {
          return `Hello this is ${user.name}`
        }
      }

})()
Person.setName({ name: "Kevin Odongo", age: 36})
console.log(Person.getName())
console.log(Person.greetings())

Option 2

In this example you will note we are using this to access the attributes of user within the function.



// person object
function Person() {
      const userProfile = {
        user: {
          name: '',
          age: 0,
        },

        setName: function (value: any) {
          this.user = Object.assign({}, value)
        },

        getName: function () {
          return this.user
        },

        greetings: function () {
          return `Hello this is ${this.user.name}`
        }
      }
  return userProfile
}

const person1 = Person()
person1.setName({ name: "Kevin Odongo", age: 36 })
console.log(person1.getName())
console.log(person1.greetings())

Let me stop there we digest this and pick it from here in our next tutorial. I hope this will help someone better understand Object Oriented Programming with TypeScript.

Have a blessed week ahead of you!

Bye.

React Hooks

Kevin Odongo — Fri, 21 May 2021 10:40:18 +0000

Hey Dev's

If you read my previous tutorials you will note the source of these recent tutorials.

In this tutorial i will be going through React Hooks. Sharing what i learnt might help someone through there own process. Through the tutorial i will keep it simple with no jargon words just plain English so we can understand the whole concept of each hook.

We are going to discuss the following hooks:

useState
useEffect
useContext
useReducer
useMemo
useRef
useMemo
useCallback

Let us break this starting with the easiest which is useState.

useState

This hook returns a value and provides a function to update it. In lay man it gives you a place to have your value as well as provides you a function to update that value. Remember this value is not stored permanently and you will loose the value once the component unmounts.

Example

import React from "react"

function App(){
  const [username, setUsername] = React.useState("Kevin Odongo")

  return(<div>{username}</div>)
}

In TypeScript we can go further and declare the type of data we want to store in our state. Let us refactor the above to have some type check. I have also added a function which updates our state.

import React from "react"

function App(){
  // i have added a type check of string or null for the value username
  const [username, setUsername] = React.useState<string | null>("Kevin Odongo")

  // update user
  function updateUser(){
      let value = "John Doe"
      setUsername(value)
  }

  return(<div>{username}</div>)
}

// This can also be achieved by declaring the type like this
// If you went through the TypeScript tutorial you will note that you can use interface or type
interface User {
   name: string
   age: number
   isAdmin: boolean
}

function App(){
   // we have use the types of the user and referenced in this state now our value has checks of what structure it should be.
   const [user, setUser] = React.useState<User>({ name: '', age: '', isAdmin: ''})
   ....
}

Below is how you can use it with input field. In this example when a user types something our state will be updated.

Example

// input
<input onChange={(value) => setUsername(value)} value={username} type="text"></input>

With useState it is quite straight forward. In vue we access our state in the data function found in the script section.

useRef

This returns a mutable ref object whose .current value is indicated in the initialValue. It allows you to access a specific item you have referenced and can access its current state.

Take a look at this example

import React from "react"
function App(){
   const inputRef = React.useRef<any>(null)

  return(<div>
    <input ref={inputRef}></input>
  </div>)

}

Assuming you have an item you want to access when a button is clicked but its somewhere near the footer. You can access its current state by using ref. This hook is also not complicated to know its more straightforward.

You can use ref on other HTML elements. This is just an example to better understand how to work with ref.

useEffect

I found useEffect quite powerful because they combined the previous approach of using componentDidMount...etc. Take it like this if you have a function that you want to run when your component mounts you can use useEffect to handle the whole process. I call it side effect of a function. When our component mounts we have some changes that we want to run for example call an API...etc.

Example
This example fetches users every time the component mounts.

import React from "react"

function App(){
   React.useEffect(() => {
     async function fetchUsers(){
       .... do something
     }
     fetchUsers()
   }, [])
}

useEffect accepts two things a callback and dependencies.

React.useEffect(callback|dependencies)

Our functions either depend on props/state values or does not have any dependencies. We also would like to control how or when our side effects should be called. You can not control how many times React will render a component but you can control your side effects.

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument.

Example
In this example our effect will run when mounted is true with a cleanup when component unmounts. Also note we have declared an empty array that indicates this side effect does not have any dependency within the function. One more thing to note you can use async within the useEffect.

import React from "react"

function App(){
   React.useEffect(() => {
     let mounted = true
     async function fetchUsers(){
       .... do something
     }
     if(mounted)fetchUsers()
     // cleanup
     return(() => {
        mounted = false 
     })
   }, []) // empty array
}

If you want to run an effect every time a component re-renders then consider removing the empty array. One thing you should be careful while using effect is that you can easily go into infinite loop.

Example
Note that we have removed the dependency array. Be careful with this scenario.

import React from "react"

function App(){
   React.useEffect(() => {
     async function fetchUsers(){
       .... do something
     }
     fetchUsers()
   }) // removed the dependency array
}

If your effect have some dependency you should include all the dependencies in the dependencies array. How do you know your dependencies?. This is a good question that in my opinion i feel every value in the function is a dependent to the function.

import React from "react"

type User {
   name: string
   age: number
   isAdmin: boolean
}

function App(user: User){
   const [isLoading, setisLoading]=React.useState<boolean>(false)

   React.useEffect(() => {
     let mounted = true
     ... logic
     return(() => {
       mounted = false 
    })
   }, [user, isLoading]) // this side effect has user and isLoading as its dependencies.
}

useContext

If you have a basic understanding how state management like Vuex, Redux ...etc, then you will come to appreciate how working with useContext and useReducer can allow you to create a simple state management in your application assuming you do not want to add any third party state management.

We can have a value in our context which can be accessed by any component in our application. As you have learnt you can always pass values through props to different components. The only challenge with props the passage has to be from Parent component to children components.

I found working with useContext quite powerful if your application requires authentication and you want to track the authenticated user between components.

Example
In this example we want to create a simple store with our user attributes and access it in our home component. This will be a simple approach to understand useContext.

// create a folder called store in src folder and add a file called index.tsx

mkdir ./src/store
touch ./src/store/index.tsx

// now let us create a simple store and export our store.
// __/src/store/index.tsx__
export const store = {
   // let us have user in our store
   user: {
     id: 5748-2939-3985-9294
     name: "Kevin Odongo",
     age: 36,
     isAdmin: true
   }
}

// in our app.tsx let us import the store and create a context
// __App.tsx__
import React from "react"
import Routes from "./routes/Routes"
// import store
import { store } from "./store"
// create a context
export const StoreContext: any = React.createContext(store)

function App(){
    // we need to wrap our routes so we can access our context from all components
   return(
      <StoreContext.Provider value={store}>
         <Routes />
     </StoreContext.Provider>
   )
}


// in our components we will access the store as follows
// __Home.tsx__
import React from "react"
import { StoreContext } from "./App"

function(){
   // with this we have access to our store
   const _store: any = React.useContext(StoreContext)
   const [user, setUser] = React.useState<any>("")

   React.useEffect(() => {
     setUser(_store.user)
   }, [_store])

   // we should be able to access the user details
   // imagine we have to use the user id to fetch his details this will be quite a good solution
   return(<div>{user.name}</div>)
}

You can have multiple context in your application.

Example

function App(){
  ...
  // here we have a theme provider and a store provider
  return(
     <Theme.Provider>
       <Store.Provider>
         <Routes />
      </Store.Provide> 
    </Theme.Provider>
  )
}

So how do we update our store?. Good question. We always pass a function down through the context to allow consumers to update the context:

Example

// store
// __/src/store/index.tsx__
export const store = {
    // We have cleared our store assuming we need the authenticated user when the log in and we will update the user details once they log in.
   user: {
     id: "",
     name: "",
     age: "",
     isAdmin: ""
   },
   // this function will update the user details
   setUser: () => {}
}

// in our app.tsx let us import the store and create a context
// __App.tsx__
import React from "react"
import Routes from "./routes/Routes"
// import store
import { store } from "./store"
// create a context
export const StoreContext: any = React.createContext(
  store,
  // we are passing this function to all our consumers to be able to update the store.
 // we will look at another approach while going through useReducer.
)

function App(){
  const [user, setUser] = React.useState<any>("")
  const value = { user, setUser}

  React.useEffect(() => {
     // check if user is authenticated
    //  lets imagine the user is authenticated and we have retrived his details and saved in the state.
     setUser({
       id: 5748-2939-3985-9294
     name: "Kevin Odongo",
     age: 36,
     isAdmin: true
    })
  })
   return(
      <StoreContext.Provider value={value}>
         <Routes />
     </StoreContext.Provider>
   )
}


// in our components we will access the store as follows
// __Home.tsx__
import React from "react"
import { StoreContext } from "./App"

function(){
   // in our home component being the consumer we can assess the store and all its values and function.
  // i have added a button that when you click will update the store to simulate a new user login
   return(
       <StoreContext.Consumer>
            {(store: any) => (
                <div style={{ padding: '10px' }}>
                    <div>{store.user.name}</div>
                    <button onClick={() => store.setUser({
                        name: "Brian Mark",
                        age: 38,
                        isAdmin: true
                    })}>UPDATE USER</button>
                </div>
            )}
        </StoreContext.Consumer>

  )
}

Great we now have a better understanding of working with useContext. Let us go through useReducer then we combine both and see how they can be merged together.

useReducer

Accepts a reducer of type (state, action) => newState, and returns the current state paired with a dispatch method.. Just take it this way useReducer has similar function as useState. I always say its an upgrade of useState when you need to access different states for example during authentication a user goes through the following. If you have a basic understanding how Redux, Vuex or any other state management works then understanding useReducer should not be difficult.

The are so many states we want to check for the user during there lifecycle in the application. Using useReducer can give us a better approach.

Example
In this example we have a reducer that allows us to have three cases of a user lifecyle _signup, _login and _logout

//__App.tsx__
import React from "react"

const initialState = {
    user: {
        name: ''
    },
    isRegistered: false,
    isLogged: false
}

function reducer(state: any , action: any){
   switch(action.type){
      case "_signup":
         return {
           ...state,
           isRegistered: action.payload.isRegistered
         }
      case "_login":
          return {
           ...state,
           user: action.payload.user,
           isLogged: action.payload.isLogged,
           isRegistered: action.payload.isRegistered
         }
      case "_logout":
         return {
            user: {},
            isLogged: false,
            isRegistered: false
         }
      default:
         throw new Error()
   }
}

function App(){
    const [state, dispatch] = React.useReducer(reducer, initialState)

   return(
     <div>
        <div>{state.user.name}</div>
        <div>{state.isRegistered}</div>
        <div>{state.isLogged}</div>
        <button onClick={() => dispatch({ type: '_signup', payload: { isRegistered: true } })}>sign up</button>
        <button onClick={() => dispatch({ type: '_logout' })}>log out</button>
        <button onClick={() => dispatch({ type: '_login', payload: { user: {name: "Kevin Odongo"}, isLogged: true } })}>log in</button>
     </div>
   )

}

Let us go through the last two hooks then we will see how we can combine useReducer and useContext to create a simple state management with hooks.

useMemo and useCallback

This hook can be used to return memorized values. It is ideal to use them when you have some computation and would like to memorize the values being computed. For example if you are building a calculator memorize the results or a bank loan application you will need to memorize the computation of the loan. Remember they are only called during the component mounts and when the dependencies changes. You should rely on them for optimization purposes.

Example

//__App.tsx__
import React from "react"

function App(){
   // we have a dependencies array and function to handle the logic. 
// memo
   const results = useMemo(() => function(a, b), [dependencies]);
}
// callback
const results = useCallback(() => function(a, b), [dependencies]);
}

There are more hooks out there that you can learn but i believe the ones i have gone through should make you comfortable in building your application.

Simple state management using useReducer and useContext

In this final section let us combine useReducer and useContext and see how we can build a simple state management.

I have prepared the following example to show you how we can build a simple state management using useContext and useReducer.

In the example you will note that when a user tries to access dashboard or profile they are denied access until they click login.
Once logged in they can access the user information from our context in either the dashboard or profile.

How to implement useReducer and useContext codesandbox example

I hope this tutorial was helpful to someone who is learning React and want to understand more about hooks.

Thanks and see you in the next tutorial.

React, Tailwind and TypeScript

Kevin Odongo — Wed, 19 May 2021 17:24:17 +0000

Hey Dev's

Hope you enjoyed the TypeScript tutorial. Transitioning for the client project was quite a learning process. We have to evolve and allow ourselves enjoy the process of learning different technologies. Next.js and React are similar in many ways just like Nuxt and Vue.

In this tutorial we are going to learn the following:

How to setup a React and TypeScript project
How to add Tailwind to a React application
How to add Cypress e2e Testing to your application
How to configure basic routing.

To get started with React and TypeScript run the following command.

npx create-react-app my__app__name --template typescript

OR

yarn create react-app my__app__name --template typescript

This will create a React project with TypeScript configured in our directory. Now we need to make some changes in our application. Let us begin by configuring Tailwind in the application.

cd my__app__name

// install the following packages for Tailwind
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

// Then install craco package
 npm install @craco/craco

// I always install the tailwind forms packages because most applications will at some point require forms.
npm install @tailwindcss/forms

// run the following commad. This will create a file called tailwind.config.js
npx tailwind init

Now that we have installed all the packages and initialized Tailwind let us create a file called craco.config.js in our root folder.

// __craco.config.js__
touch craco.config.js

// add the following content in the craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

In our tailwind.config.js update the file as follows:

// tailwind.config.js
// in this file we can add the customized colors tailwind provides.

const colors = require('tailwindcss/colors')
module.exports = {
   purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
    darkMode: false, // or 'media' or 'class'
    theme: {
      extend: {},
      colors: {
      transparent: 'transparent',
      current: 'currentColor'
      ....
    }
    },
    variants: {
      extend: {},
    },
    plugins: [
      require('@tailwindcss/forms'), // import tailwind forms
   ],
  }

In our package.json file we need to update as follows:

// __package.json__
  {
    // ...
    "scripts": {

     "start": "react-scripts start", // remove

     "build": "react-scripts build", // remove

     "test": "react-scripts test", // remove

     "start": "craco start", // add

     "build": "craco build", // add

     "test": "craco test", // add
      "eject": "react-scripts eject" // stays the same
    },
  }

The only thing remaining is to import the tailwind css in our index.css file.

//__./src/index.css__
@tailwind base;
@tailwind components;
@tailwind utilities;

That is all we have to do to configure our application to use Tailwind. A bit of some cleanup to go and our application will be ready.

This is what our application structure looks like.

Let us organize this application. To begin with let us start with Test Directory. These are our check and balances ensure you keep test closer when building your application.

Testing an application has a broad scope, in my opinion i find unit testing and e2e testing a greater way of starting to keep check balances to your application. React provides React Testing Library which can be used for unit testing and is installed by default while we can leverage Cypress for e2e testing.

Let us install cypress and configure it.

npm install -D cypress

Okay now we have different options of structuring our application we can decouple our application and arrange with each component running its functions individually for example let us assume we have implemented chatting in our application.

We can create a directory in our pages or component directory called chatting and group all the files and test that runs chatting in this directory. This will allow us separate all the chatting files and components from other operations of the application.

For test i always prefer to group them together in one directory and separate them in unit and e2e/cypress directories. In this case create a directory called tests

// create a directory called tests
mkdir __tests__

// create two directories in the __tests__ directory
mkdir ./src/__tests__/units
mkdir ./src/__tests__/cypress or e2e // whichever name you decide

// In the above directories we can further subdivided and separate the tests in directories for example chatting which can hold all the tests for chatting etc

Next, in the cypress directory/e2e create three directories as follows and .eslintrc.js file.

mkdir ./src/__tests__/cypress/plugin
mkdir ./src/__tests__/cypress/specs
mkdir ./src/__tests__/cypress/support

touch .eslintrc.js

The specs directory will hold all our e2e test files. Create a file called Home.spec.ts and the following line.

// __Home.spec.ts__
export {}
// assert errors are displayed when user submit without email and code
// add id to this p tag in App.tsx
it("assert title Edit src/App.tsx and save to reload.", () => {
    cy.visit("http://localhost:3000/");  
    cy.get('#title').should('contain', 'Edit src/App.tsx and save to reload.')
});

In the plugin and support directories in each create a index.js files. While in support directory add a file called command.js

Let us now update each of these files:

./src/testscypress/plugin/index.js

// __index.js__
/* eslint-disable arrow-body-style */
// https://docs.cypress.io/guides/guides/plugins-guide.html

// if you need a custom webpack configuration you can uncomment the following import
// and then use the `file:preprocessor` event
// as explained in the cypress docs
// https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples

// /* eslint-disable import/no-extraneous-dependencies, global-require */
// const webpack = require('@cypress/webpack-preprocessor')

module.exports = (on, config) => {
  // on('file:preprocessor', webpack({
  //  webpackOptions: require('@vue/cli-service/webpack.config'),
  //  watchOptions: {}
  // }))

  return Object.assign({}, config, {
    fixturesFolder: "src/__tests__/e2e/fixtures",
    integrationFolder: "src/__tests__/e2e/specs",
    screenshotsFolder: "src/__tests__/e2e/screenshots",
    videosFolder: "src/__tests__/e2e/videos",
    supportFile: "src/__tests__/e2e/support/index.js"
  });
};

./src/tests/cypress/support/index.js

// __index.js__
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************

// Import commands.js using ES2015 syntax:
import "./commands";

// Alternatively you can use CommonJS syntax:
// require('./commands')

./src/tests/cypress/support/command.js

// __commands.js__
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This is will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

./src/tests/cypress/.eslintrc.js

// __.eslintrc.js__
module.exports = {
    plugins: ["cypress"],
    env: {
      mocha: true,
      "cypress/globals": true
    },
    rules: {
      strict: "off"
    },
};

Finally we need an entry point in the root directory for cypress. For this create a cypress.json file.

// __cypress.json__
// cypress.json  
{
  "pluginsFile": "src/__tests__/e2e/plugins/index.js"
}

Once we have done this let us update the package.json file.

// __package.json__
// update the scripts sections
"scripts" {
    ....
    "cy:run": "cypress run",
    "cypress:open": "cypress open"
}

Finally update the tsconfig.json file with the following:

// __tsconfig.json__
// under compilerOptions
{
  "compilerOptions" {
     ....,
     "types": ["cypress"]
  }
}

So we now have cypress configured in our application and test units folder.

Almost done one more thing let us clean up the src folder.

Create an assets directory In this directory we are going to hold all our assets images and css. We will separate the two by creating two more directories called css and images.

mkdir ./src/assets

// create images and css files
mkdir ./src/assets/css
mkdir ./src/assets/images

Once done clear all .css and .png files in the src folder and bundle them in the css and images respectively.

Create pages OR components directory. Some people might prefer to use modules whichever method suits you. These directories will hold all pages.

// create pages directory
mkdir pages

// create a Home.tsx file in this directory
touch Home.tsx

Create a routes directory and in it create a Routes.tsx file. This directory will hold all our public routes. In case we need to protect some routes we can created a Protected.tsx file thereby separating our public and protected routes

// routes directory
mkdir routes

// routes.tsx file
touch Routes.tsx file

Great now let us add routes. To add the routes we will use react router. To install let us run the following commands.

// install react router
npm install react-router-dom

// because we are using typescript we need to install the types
npm i --save-dev @types/react-router-dom

Our entry point will be index.tsx.

//__index.tsx__
import { BrowserRouter } from "react-router-dom"

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

In the Routes.tsx update it as follows:

// __Routes.tsx__
import { Switch, Route } from "react-router-dom"

// import the Home.tsx component
import Home from "../routes/Home"

function Routes (){
   return(
     <Switch>
        <Route path="/" exact component={Home}></Route>
     </Switch>
  )
}

In the App.tsx file clear everything and replace with the following:

// __App.tsx__
// import the Routes.tsx component
import Routes from "../routes/Routes"

function Routes (){
   return(
     <div>
        <Routes />
     </div>
  )
}

Now run you application. Our entry point will be Home.tsx and this is the file you should start editing.

// run your application
yarn start

// visit your application on
https://localhost:3000

In case you will be using AWS Amplify to host your application update the following.

Create amplify.yml file in your root folder

test:
  phases:
    preTest:
      commands:
        - npm ci
        - npm install wait-on
        - npm install pm2
        - npm install mocha@5.2.0 mochawesome mochawesome-merge mochawesome-report-generator
        - npx pm2 start npm -- start
        - 'npx wait-on http://localhost:3000'
    test:
      commands:
        - 'npx cypress run --reporter mochawesome --reporter-options "reportDir=cypress/report/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"'
    postTest:
      commands:
        - npx mochawesome-merge cypress/report/mochawesome-report/mochawesome*.json > cypress/report/mochawesome.json
        - npx pm2 kill
  artifacts:
    baseDirectory: cypress
    configFilePath: '**/mochawesome.json'
    files:
      - '**/*.png'
      - '**/*.mp4'

To disable Cypress Testing and maintain the same environment for your application. Go to the environment variables settings in your Amplify app dashboard and add a rule.

variable: USER_DISABLE_TESTS
value: true
branches: All branches

One more thing in case you are getting access denied when you refresh your application in the browser. Here is a solution. Go to the redirects in the settings of your Amplify App and add a new rule.

Original Address: </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>
Destination Address: /index.html
Redirect Type: 200

That is all you need to do in getting started with React, Tailwind and TypeScript.

Thank you and see you in the next tutorials.

TypeScript

Kevin Odongo — Wed, 19 May 2021 14:22:23 +0000

Hey Dev's

It's been a while catching up with everyone here. Let me tell you a short story of how today's tutorial is coming up from. Back in March, we got a client who needed a project, and in his condition, we had to use React, TypeScript, and Tailwind. Guess who had a basic understanding of React and TypeScript. It's funny we accepted the challenge so I had to go through sleepless nights of learning in-depth about React and TypeScript.

I was truly amazed by TypeScript!!
Truth be told knowing JavaScript made it easier. All hearsay I have heard about TypeScript came to reality. It truly makes an application robust and catches bugs early. However much you are limited to the packages you can use in your application it is still worthwhile.

While learning through I created a cheat sheet that kept me going through the project. We completed the project and the client is happy with the results. Let me share what I learnt it might help someone who is planning on learning TypeScript.

I wonder why Flow Language has not penetrated the market as TypeScript guess the latter is backed by a big corporation and has a supportive community. Anyway, that's just my opinion.

Take a look at this:

const User = {
   name: "Kevin Odongo"
}
User.name = 1
// In JavaScript this will compile.
// In TypeScript this will fail. (Type 'number' is not assignable to type 'string')
// User.name is a string but we are trying to assign a number to it

This is quite helpful during the development stage because you will catch the errors in advance before your application goes to production. Truth be told this is what made me love it.

How to get started with TypeScript.

// Install TypeScript globally
npm install -g typescript

// React
npx create-react-app my-app --template typescript

// Vue
vue create my-app
- Manually select and choose TypeScript

Basics

Let me start by sharing the available types. Oh! what are Types? Good question. If you have a basic understanding of JavaScript you will know there are 7 primitive data types i.e string, number, bigint, boolean, undefined, symbol, and null. These data types are what TypeScript refers to when you hear the word Types.

Let us see how TypeScript works:

const User = {
   name: string // This indicate the name is a string
   age: number // This indicate the age is a number
   isAdmin: boolean // This indicate isAdmin is a boolean
}
// no error
User.name = "Kevin Odongo"
User.age = 10
User.isAdmin = true
// error
User.name = 1 // we are assigning a number to a string
User.age = "10" // we are assigning a string to number
User.isAdming = "admin" // we are assigning a string to boolean

// This will allow you to handle these errors during development.
// Assume you have a results of a function that should return a string and you want to use results.toLowerCase() OR results.toUpperCase() on the results if your results is null or undefined TypeScript will allow you to catch this error in advance.

What about an array how do we declare an array?
Take a look at this

const array (any)[] = [] // An array that accepts anything
const array: (number)[] = [] // An array that accepts only numbers
const array: (string)[] = [] // An array that accepts only strings

One more thing in case one of the variables we are declaring is not mandatory we just need to add a question mark while declaring the variable.

// Age and isAdmin are not mandatory in this object
const User = {
   name: string
   age?: number // not mandatory
   isAdmin?: boolean // not mandatory
}

Other types that you should know are void, object, unknown, never and function.

Modifiers

We can modify our parameters or values as follows. We can change the visibility of the property.

readonly
private
protected
public

// name is readonly and cannot be mutated
const User = {
   readonly name: string
   protected age: number
   private isAdmin: number
   // By default all values are public
}

Now that we have our data types how do we use them within a function?
You can declare the type of parameters/values the function accepts.

Example

// here is a sample we have declared the parameters this function accepts and what are the data types for that function.
// This function updates user information and has declared the properties required to update the user and the types of those parameters

function updateUser(user: { name: string, age: number, isAdmin: boolean}){
   //...do something
}

// this can be written as follows too
type Props {
   name: string
   age: number
   isAdmin: boolean
}

function updateUser(user: Props){

}

instead of type Props {...}, we can use interface for example

interface Props {
   name: string
   age: number
   isAdmin: boolean
}

So if I can declare a type and interface what is the difference between the two. The difference is that you can not extend a type but you can extend an interface.

Example

// user interface
interface User {
   name: string
   age: string
   isAdmin: boolean
}

interface Finance {
   department: string
}

// assuming we want the finance interface to access all the properties of User we can do it as follows:

interface Finance extends User {
   department: string
}

Handling null and undefined in TypeScript can be approached in two different ways. With strictNullChecks on or off. With it on we need to test for both values while off we do not and can be accessed normally.

Here is something you should know we can declare a variable with ! to explicitly declare the variable is not null or undefined.

let bankBalance: number | null = 1000
console.log(bankBalance!.toFixed(2)) // this is explicitly declares the bankBalance is not null or undefined.

Enum allows us to describe a value that can have a different set of constants.

Example

// assume we have a jacket in our e-commerce application which can be blue, red, or yellow
enum Jacket {
   blue,
   red,
   yellow
}

// We can thereby access different colors of Jacket
console.log(Jacket.blue)
console.log(Jacket.red)
console.log(Jacket.yellow)

Let us look at an example of a function that returns something. How do we go about with this?

Example

// We can declare the return of this function to be a number.
function calculateSum(): number {
   return 45
}

Unions are just a simple way of extending our variables to access different data types. Unions can be very useful and allow us to render more logic with different types allowed by the variable. We might want to use the variable differently if it is a string or number, just use typeof in your logic to get the current value provided.
The usage of typeof in getting information about our variables can be very powerful in narrowing our functions.

Example

// union
const User = {
   id: string | number // this is a union
}

// how to declare a union inline
function updateUser(name: string | null ){
   if(typeof name === 'string'){
     // ... do something
   } else {
     // ... do something
   }
}

On my end, this is the basic understanding of TypeScript I had when I got into the client project. It was scary at first but with technology given opportunity, there is no language difficulty to learn. Let us dig deeper and get to know more of what i learnt.

Narrowing in TypeScript is more similar in JavaScript the only difference is that in TypeScript we have declared our variable data types which makes it more precise.
In JavaScript, we can use any expression in conditionals, &&s, ||s, if statements, and Boolean negations (!), equality checks like ===, !==, ==, and != to narrow types, in and instaceof and more. We can use all of these in TypeScript.

Example

// here we have an interface that has a name with unions of string, null and undefined.

interface CheckName {
    name: string | null | undefined
}

// in this function our condition has already eliminated null and undefined. This gives us a safety net.
function updateUser (user: CheckName){
   if(user.name != null){
    // ... do something
  }
}

When narrowing, you can reduce the options of a union to a point where you have removed all possibilities and have nothing left. In those cases, TypeScript will use a never type to represent a state which shouldn’t exist.

Example

// This function checks the roles available in the application
interface Admin {
   kind: 'admin'
   // can be extended
}

interface Regular {
   kind: 'regular'
   // can be extended
}

type Roles = Admin | Regular;

// This function checks the user role and redirects them to user dashboard or admin dashboard.
function getRoles(role: Roles) {
  switch (role.kind) {
    case "admin":
      return // ... go to admin dashboard
    case "regular":
      return // go to regular dashboard
    default:
      const _exhaustiveCheck: never = role;
      return _exhaustiveCheck;
  }
}

Functions are the backbone of our applications. In our basics we discussed the basic knowledge of how to deal with functions. Here we will expound that scope of what we learnt.

We can render a function in an interface or type as follows:

// type
type Props {
   fn: () => void
}

// interface
interface Props {
   fn: (name: string) => void
}

In TypeScript, generics are used when we want to describe a correspondence between two values

Example

// This function has created a link between the input (passed array) and output (returned array)
function getAdmin<Type>(users: Type[]): Type {
   return arr.filter(user => user.role === isAdmin)
}

// the function gets an array of users and returns users who are only admins.

To go further you can limit the parameter type by declaring a props and passing in the types.

Function overloads allows us to write functions that accepts a variety of arguments.
In TypeScript, we can specify a function that can be called in different ways by writing overload signatures. To do this, write some number of function signatures (usually two or more), followed by the body of the function. The implementation signature must also be compatible with the overload signatures. For example, these functions have errors because the implementation signature doesn’t match the overloads in a correct way:

Example

// we can get the length of a string and the length of an array
// our implementation will take an array or string and return the length of the value provided
// the signatures about will handle the computation provided in the implementation function
// Note that both our signatures return Type is a number.

function length(s: string): number; // signature function
function length(arr: any[]): number; // signature function
// implementation
function length(x: any[] | string) { 
  return x.length;
}

interfaces allowed us to build up new types from other types by extending them. TypeScript provides another construct called intersection types that is mainly used to combine existing object types.

Example

interface User {
   name: string
   age: age
   isAdmin: boolean
} 

interface Finance {
   department: string
}

// we have combined Finance and User interfaces.
type FinanceUser = User & Finance

The two areas i found very interesting are modules, namespaces and classes. They truly changed me as a developer. To those who started with Angular as a Framework learned TypeScript the easy way. With Vue and React you have to learn it separately then incorporate it in your application.

NOTE

Take more emphasis in understanding classes, modules and namespaces

Take a look at this example

// declare a user class
export class User {
    name: string
    age: number
    isAdmin: boolean
}

// import it in another file and access all the properties.
import { User } from "./User"

const newUser = new User()
newUser.name = "Kevin Odongo"
newUser.age = 10
newUser.isAdmin = true

That is just a basic example now let us expound further.
Example

// declare a user class
export class User {
    name: string
    age: number
    isAdmin: boolean

   constructor(){
      // we have access to all the properties using this
      this.name = "Kevin Odongo"
      this.age = 10
      this.isAdmin = true
   }
}

// we can simplify this further whichever way you want you use either is possible.
export class User {
   constructor(name: string, age: number, isAdmin: boolean){
      // we have access to all the properties using this
      this.name = "Kevin Odongo"
      this.age = 10
      this.isAdmin = true
   }
}

We can therefore declare our classes in one file and export all of them. This is quite impressive because it allows us to separate our application with components that can be reused anywhere.

Here is another example

// user class
class User {
  name: string
  age: number
  isAdmin: boolean
}

// extend user to Finance
class Finance extends User {
  constructor() {
    super();
    //... we can access all the User properties
    this.name = "Kevin Odongo"
  }
}

We can create a class with complete getters and setters.

// this is a class the has a getter and setter
exports class User {
  _value: {
     _name: string
     _age: number
     _isAdmin: boolean
  }

  get user() {
    return this.value;
  }
  set user(value) {
    this._value = value;
  }
}

You can use an implements clause to check that a class satisfies a particular interface. An error will be issued if a class fails to correctly implement it:

Example

// this is a class the has a getter and setter
interface Props {
   _name: string
   _age: number
   _isAdmin: boolean
}
// the props is just a checker
exports class User implements Props {
   _value: Props

  get user() {
    return this.value;
  }
  set user(value) {
    this._value = value;
  }
}

We can override the base class functions by adding super(). An abstract method or abstract field is one that hasn’t had an implementation provided. These members must exist inside an abstract class, which cannot be directly instantiated.

If you have a file that doesn’t currently have any imports or exports, but you want it to be treated as a module, add the line:

export {}

The main thing to consider when writing a module based application are:

Syntax
Module Resolution
Module OutputTarget

Here is an example of a module
Example

// user.ts.
export function users (){
   return "Kevin Odongo"
}

// main.ts
import { User } from "./User"
// access
User()

*TypeScript has its own module format called namespaces which pre-dates the ES Modules standard. This syntax has a lot of useful features for creating complex definition files, and still sees active use in DefinitelyTyped. *

TypeScript provides several utility types to facilitate common type transformations. These utilities are available globally.
Here are the list of the utilities

Partial
Required
Readonly
Record
Pick
Omit
Exclude
Extract
NonNullable
Parameters
ConstructorParameters
ReturnType
InstanceType
ThisParameterType
OmitThisParameterType
ThisType
InstristicStringManipulation
Uppercase /LowerCase / Capitalize / Uncapitalize

These are many utilities, You do not have to know all of them but you can always reference depending on what you need to implement. Just have a basic understanding on how the work and how to implement them.

Here are a few example to give you a better understaning of working with utilities.

interface Props {
   name: string
   age: number
   isAdmin: boolean
}

// the partial extends all the subset in Props.
function updateUser(user: Props, fields: Partial<Props>){
    return { ...user, ...fields}
}

// required utility
// this will throw an error because all the properties in props are required.
const user: Required<Props> = { name: "Kevin Odongo"}

// readonly
// this will throw and error because the Props are only readonly
const user: Readonly<Props> = { name: "Kevin Odongo"}


// pick
// you can add union to access more properties
const adminUsers: Pick<Props: 'isAdmin'>
const admin: adminUsers = {
    isAdmin: true
}

Decorators

A Decorator is a special kind of declaration that can be attached to a class declaration, method, accessor, property, or parameter. Decorators use the form @expression, where expression must evaluate to a function that will be called at runtime with information about the decorated declaration.

Types

Methods Decorator
Class Decorator
Accessor Decorator
Property Decorator
Parameter Decorator

In Angular framework decorators are used mostly to separate modification or decoration of a class without modifying the original source code.

Mixin

TypeScript’s best mixin support is done via the class expression pattern.

Example

// Each mixin is a traditional ES class
class Jumpable {
  jump() {}
}

class Duckable {
  duck() {}
}

// Including the base
class Sprite {
  x = 0;
  y = 0;
}

// Then you create an interface which merges
// the expected mixins with the same name as your base
interface Sprite extends Jumpable, Duckable {}
// Apply the mixins into the base class via
// the JS at runtime
applyMixins(Sprite, [Jumpable, Duckable]);

let player = new Sprite();
player.jump();
console.log(player.x, player.y);

// This can live anywhere in your codebase:
function applyMixins(derivedCtor: any, constructors: any[]) {
  constructors.forEach((baseCtor) => {
    Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
      Object.defineProperty(
        derivedCtor.prototype,
        name,
        Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
          Object.create(null)
      );
    });
  });
}

Modules and Namespaces

We have gone through how to import and export modules. Let me go through some examples.

// OPTION 1
// file __User.ts__
export class User {...}
export class Finance {...}

// import on other components
import { User, Finance} from "./User"

// OPTION 2
class User {...}
class Finance {...}

module.exports ={
   User,
   Finance
}

// import on other components
import { User, Finance} from "./User"

// declare a module
// this will be ideal with npm packages that do not have declaration files.
// file __d.ts__
declare module "Name"

Do not use namespaces in modules

Namespaces are simply named JavaScript objects in the global namespace. This makes namespaces a very simple construct to use. Unlike modules, they can span multiple files, and can be concatenated using --outFile. Namespaces can be a good way to structure your code in a Web Application, with all dependencies included as script tags in your HTML page.

Example

// __validation.ts__
namespace Validation {
  export interface StringValidator {
    isAcceptable(s: string): boolean;
  }
}

/// <reference path="Validation.ts" />
// __LettersOnlyValidator.ts__
namespace Validation {
  const lettersRegexp = /^[A-Za-z]+$/;
  export class LettersOnlyValidator implements StringValidator {
    isAcceptable(s: string) {
      return lettersRegexp.test(s);
    }
  }
}

In the above example you will not how to declare a namespace and import in a file. Alternatively we can import them or use them as script tags in index.html files.

// using tags in index.html
<script src="Validation.js" type="text/javascript" />
<script src="LettersOnlyValidator.js" type="text/javascript" />

// using import
import {} from "".

You made it to the end. I hope you enjoyed the tutorial. Ops! one more thing

Declaration files

Here is an example from TypeScript docs. For this go through in detail the TypeScript documentation in case you want to publish your application to npm

// your code __code.ts__
let result = myLib.makeGreeting("hello, world");
console.log("The computed greeting is:" + result);
let count = myLib.numberOfGreetings;

// declaration
declare namespace myLib {
  function makeGreeting(s: string): string;
  let numberOfGreetings: number;
}

CONCLUSION
Going through this article should get you from beginner to a more comfortable position in working with TypeScript. It is a language that i have come to appreciate and enjoy. Will refactor some of my personal projects and stick to it henceforth.

See you in the next tutorial

Getting started with AWS Chime.

Kevin Odongo — Thu, 25 Mar 2021 14:59:30 +0000

Hey devs,

In today's tutorial, I would like to get you started with AWS Chime.

The Amazon Chime SDK provides a set of real-time communications components that developers can use to add audio, video, and screen sharing sessions to their own applications. The Amazon Chime SDK can be used to build solutions like full unified communications (UC) applications, distance learning solutions, telehealth applications, and simple one-to-one video interaction with customers.

When you log into AWS Dashboard search for AWS Chime.

Pricing

Before digging deeper into any AWS Product it is always wise to know the pricing. Cloud platforms are great but your monthly billing can rise if you don't understand the product pricing.

Connection to the Amazon Chime SDK meeting session is USD 0.0017

Read more about the pricing https://aws.amazon.com/chime/chime-sdk/pricing/.

Below is an architecture of AWS Chime.

There are a lot of benefits one gets by using AWS Chime SDK. I have assembled different articles and demos that can get you working with AWS Chime.

For your tutorial and practice use the WebRTC application and configure it with AWS Chime. https://main.d37i78548hx7uj.amplifyapp.com/

To get started with AWS Chime SDK in your project.

npm install amazon-chime-sdk-js --save

The Github Repo for AWS Chime SDK https://github.com/aws/amazon-chime-sdk-js.

Here is a sample meeting application https://aws.amazon.com/blogs/business-productivity/building-a-meeting-application-using-the-amazon-chime-sdk/
Here is a sample classroom application https://aws.amazon.com/blogs/business-productivity/building-a-virtual-classroom-application-using-the-amazon-chime-sdk/
Here are the documentation for AWS SDK https://aws.amazon.com/chime/chime-sdk/?nc=sn&loc=0, https://docs.aws.amazon.com/chime/latest/dg/meetings-sdk.html

I have been preparing a course that will go through in-depth most of the Technologies I have been teaching.

We will discuss the following:

WebRTC
AWS WebSocket
AWS Cognito
Kinesis Video Streams
AWS Chime
Lambda
IAM
CloudWatch

We are going to use two different projects and implement them using different approaches. By the end of the tutorial, you will have a great understanding.

Thank you and have a great weekend

Confirm AWS Cognito signups automatically

Kevin Odongo — Sun, 21 Mar 2021 15:55:58 +0000

Hey Devs

How has been your week? In today's tutorial, I will share how to automatically confirm users in your application without sending the confirmation code.

When users signup in for your application normally you will send a confirmation code in their email or phone to confirm their account.

This tutorial will be helpful if you are using AWS Cognito. Assuming you want to auto-confirm your user's email and phone numbers. This can be done using a Lambda function.

STEPS

Create a Lambda function name it confirmSignUp. For this tutorial, I will use node runtime.
Copy the following and paste it in the index.js file.



exports.handler = (event, context, callback) => {

    // Confirm the user
        event.response.autoConfirmUser = true;

    // Set the email as verified if it is in the request
    if (event.request.userAttributes.hasOwnProperty("email")) {
        event.response.autoVerifyEmail = true;
    }

    // Set the phone number as verified if it is in the request
    if (event.request.userAttributes.hasOwnProperty("phone_number")) {
        event.response.autoVerifyPhone = true;
    }

    // Return to Amazon Cognito
    callback(null, event);
};

Save the Lambda function and go back to AWS Cognito dashboard. select triggers.
Finally in the Pre sign-up select your Lambda function and save.

Funny thing that is all you have to do to auto-confirm user emails and passwords when they signup to your application.

Thank you.

How to configure a TURN Server.

Kevin Odongo — Fri, 12 Mar 2021 19:19:00 +0000

Hey Dev's

In today's tutorial, let us configure a TURN Server. The term stands for Traversal Using Relay NAT, and it is a protocol for relaying network traffic.

There are currently several options for TURN servers available online, both as self-hosted applications (like the open-source COTURN project) and as cloud-provided services.

Once you have a TURN server available online, all you need is the correct RTCConfiguration for your client application to use it. The following code snippet illustrates a sample configuration for an RTCPeerConnection where the TURN server is using the public IP of EC2 and is running on port 3478. The configuration object also supports the username and password properties for securing access to the server. These are required when connecting to a TURN server.



const iceConfiguration = {
    iceServers: [
        {
            urls: 'turn:18.23.4.56.7:3478',
            username: 'username',
            credential: 'password'
        }
    ]
}

const peerConnection = new RTCPeerConnection(iceConfiguration);

In today's tutorial, we will go through configuring a TURN server using coturn open source project. To read more about coturn Project https://github.com/coturn/coturn

Coturn server configuration

Launch an ubuntu EC2 in your AWS account (Use T2-micro for this tutorial but for production choose a larger instance ) and ssh into it. Once you successfully ssh into the EC2 then you will need to make some changes to make it work.

STEPS

Log into AWS Console and search for EC2

Search for ubuntu instance, select a T2 micro and continue with the default settings.
Ensure you create a private key and download it. Covert the pem file to ppk so that you can use it in puttygen.

To read more about launching EC2 https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/launching-instance.html

SSH into the EC2, update the instance and install coturn package.



// update
sudo apt update

// install coturn
sudo apt-get install coturn

With the coturn package installed ensure it always starts on system reboot. To achieve this run the following commands.



// enable and start coturn service
sudo systemctl enable coturn
sudo systemctl start coturn
sudo systemctl status coturn

OR edit the following file.



// edit the following file
sudo vim /etc/default/coturn

// uncomment the following line and save
TURNSERVER_ENABLED=1

To configure coturn we need to edit the following file /etc/turnserver.conf. Before editing create a backup so that in case you need to start over you can copy the backup file.



sudo cp /etc/turnserver.conf /etc/turnserver.conf.backup

Uncomment and edit the following lines in the file.



# turnserver listening port
listening-port=3478
tls-listening-port=5349

# provide the public IP for your EC2
listening-ip=<PUBLIC_IP>
external-ip=<PUBLIC_IP>

# ports
min-port=49152
max-port=65535

# enable verbose logging
verbose

# use fingerprint in Turn message
fingerprint

# enable a log-term credential mechanism
lt-cred-mech

# server name 
server-name=turnserver

# domain name
realm=odongo.com

# provide username and password
user=<USERNAME>:<PASSWORD>

# log file path
log-file=/var/tmp/turn.log

For more details about the configurations in the turnserver.conf https://github.com/coturn/coturn/wiki/turnserver.

That is all we have to do to configure a coturn server in an ubuntu EC2 in AWS. To test your TURN server go to this link https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/.

Add your turn server as follow:
Then gather candidates you should be successful as follows:

Large production deployment

The above setup was a single ubuntu EC2 turn-server that can serve your personal project. For large production, we need to change the approach. We have two approaches that we can consider.

Deploying TURN server in a large EC2 Instance.
This has some disadvantages for example you will have to deploy a similar instance in a different AZ for Disaster Recovery. Scaling will be an issue once your EC2 has reached maximum thresh-hold.
Deploying Load balance and Autoscaling Group
This is the approach that will be ideal for large production. We will need to configure a Classic Load Balancer and AutoScaling group.

STEPS

Let us create a new ubuntu EC2 and configure TURN server in it using coturn. Select a larger EC2 Instance depending on what your company allows and configure as above. The only difference will be in the following:



// provide the classic load balancer DNS
listening-ip= corturn-server-********.us-east-1.elb.amazonaws.com
external-ip= corturn-server-********.us-east-1.elb.amazonaws.com

To configure Classic Load balancer.
Provide the load balancer name and open port 80 and port 22.

NOTE

Load Balancers always perform health checks on EC2 to determine the health status of EC2 Instances in Autoscaling groups. To perform health checks they always ping EC2 Instances and therefore we need to declare a path. For our Instances, we will install Nginx to allow pinging of our EC2 Instances. In your EC2 security group ensure you open ports 22 and 80.



// replace index.html in the health check ping section with the following
index.nginx-debian.html

SSH in the ubuntu EC2 and run the following commands to install Nginx



sudo apt-get install nginx
sudo systemctl enable nginx
sudo systemctl start nginx

With the EC2 ready create an autoscaling group. To do that here are the steps.

Create a snapshot for the EC2 you created above. This will allow replication of the EC2 for each deployment.

Once you have created a snapshot, create an AMI image from the snapshot.
Make sure that the virtualization type is “Hardware-assisted Virtualization”.
Once you have an image of the TURN server the next step will be to create a launch template.

Specify the AMI, select T2 Micro Instances, and create a launch template.

Now that you have a launch template you can test it by launching an EC2 from the template and testing if it works. Specify 1 as the number of instances.
With the above step succeeded, create an autoscaling group and attach the classic load balance.

That is all we have to do. We now have a Classic Load balancer with ubuntu EC2s in an Autoscaling group. In your application, this is how you will reference this.



const iceConfiguration = {
    iceServers: [
        {
            urls: 'turn:corturn-server-********.us-east-1.elb.amazonaws.com:3478',
            username: 'username',
            credential: 'password'
        }
    ]
}

const peerConnection = new RTCPeerConnection(iceConfiguration);

For pricing of Classic Load Balance read more here https://aws.amazon.com/elasticloadbalancing/pricing/

BONUS

As a bonus, you can deploy coturn in a container, push it to ECR and deploy to ECS.

Pull coturn image from Docker Hub.



// pull the coturn docker image
docker pull instrumentisto/coturn

Run a container for the coturm instrumentisto image. You will declare the configurations we were uncommenting and editing as follows.



// run a coturn container
docker run -d --network=host instrumentisto/coturn -n --log-file=stdout --min-port=49160 --max-port=49200 --lt-cred-mech --fingerprint --no-multicast-peers --no-cli --no-tlsv1 --no-tlsv1_1 --realm=my.realm.org

To ssh into the container run the following command.



// ssh to the container
docker exec -it <CONTAINER_ID> sh

With that, you can deploy your image to ECR and finally host it in AWS ECS https://dev.to/kevin_odongo35/manage-your-containers-on-aws-ecs-moj

I hope this tutorial will be helpful to someone who has been following my WebRTC tutorials.

Thank you