DEV Community: Ajin Kabeer

Deploy CRA to GitHub Pages using GitHub Actions

Ajin Kabeer — Fri, 08 May 2020 10:22:23 +0000

This post is a step-by-step guide to deploy a CRA (create-react-app) on GitHub Pages with GitHub Actions.

I hope you are trying everything you can to stay safe and healthy in this global pandemic. I wish you a good day.

Spin up a react application

The first thing we need is a React application of course. We will use create-react-app to build one.

Create React App is a comfortable environment for learning React and is the best way to start building a new single-page application to React.

To save you some time, I have published a create-react-app repository on GitHub. It has routing and a basic component setup already.

Note: Make sure you wrap the top-level component with HashRouter instead of the normal BrowserRouter. GitHub Pages does not work well with BrowserRouter.

Deploy to GitHub Pages

Before using GitHub Actions to deploy our app, let's first deploy it manually. We will use the gh-pages package, which does all the heavy lifting for us.

yarn add gh-pages

It's time to configure the package.json file.

{
  "name": "cra-gpages-actions",
  "version": "0.1.0",
  "private": true,
  "homepage": "/cra-gpages-actions-starting",
   /* Rest of config */
  "scripts": {
    "predeploy": "yarn run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  /* Rest of config */
}

We have added predeploy, deploy scripts and homepage to our package.json file.

Note: Make sure you put the correct repository name for homepage.

Looking good. It's time to deploy our application on GitHub Pages.

npm run deploy

You have now successfully deployed the production build of your react application on GitHub pages. To view it, simply go the settings tab of your repository and scroll down until you find the link.

So, from now on you can deploy the latest changes on your react application to GitHub pages with just npm run deploy.

Here comes GitHub Actions, with this you can just push the changes to your master branch and it will automatically create a production build and deploy it to GitHub pages.

Add GitHub Actions to your workflow

GitHub Actions makes it easy to automate all your software workflows, now with world-class CI/CD. Build, test, and deploy your code right from GitHub. Make code reviews, branch management, and issue triaging work the way you want.

The above quote is pulled straight from their homepage :)

Since we already have configured our project to work with GitHub pages, setting Actions is a walk in the park.

From your project folder, start by creating a new directory to hold the .yml file. This file will hold the configuration for our GitHub Actions. You have to create this file using this path.

mkdir .github/workflows/
cd .github/workflows
touch deploy.yml

Add this configuration code to deploy.yml file.

name: Deployment
on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: Install Packages
      run: npm install
    - name: Build page
      run: npm run build
    - name: Deploy to gh-pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        publish_dir: ./build

To explain this configuration simply, on each and every push to the master branch, GitHub Actions will performs these set of tasks.

If you look closely, you will notice that we are using a deploy_key variable. If you have already enabled ssh for your GitHub account, you can use that public/private key pair. Else you will need to create a new one.

You can create a public/private key like this.

cd ~/.ssh
ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages-actions -N ""

Don't forget to replace user.email with your e-mail address. After generating the keys, it's time to add them to our repository. Go to the settings tab of your repository. Select deploy keys from the sidebar.

You need to insert the public key you have generated into the text-area. Insert Public key of ACTIONS_DEPLOY_KEY for the title input field. Check Allow write access and click on the Add key button.

To view the public key, you can run

cat ~/.ssh/gh-pages-actions.pub

Next, up go to the secrets tab and add a new secret key. This is the private ssh key that you generated. You can view it like this. In the name field, add ACTIONS_DEPLOY_KEY. It's important.

cat ~/.ssh/gh-pages-actions

That is it. We have integrated GitHub Actions into your workflow. To test it, make some changes in your components and push it to master. To see it live, go to the GitHub Actions tab in your project repository. It will look like this.

Congratulations! 🎉

If you manage to reach this far, then I hope you have successfully integrated the GitHub Actions into your workflow. If you run into any trouble, shoot a comment below.

Here is a link to my repository on GitHub.

Thank you!

'this' is for beginners III

Ajin Kabeer — Sun, 12 Apr 2020 11:28:09 +0000

In my last post, we looked at the second rule in determining the value of this inside a declared object. In my last example, the context of this changed unexpectedly and our basketballMachinemethod, thethis.lastNamebecame undefined because the keywordthisreferred to thedetails object.

If I told you that you can set the value of the keyword this explicitly to be the boss object instead of the details object. Would you believe me? Read on.

You can set the context of this to whatever you want using call, apply or bind methods.

A thing to remember
call(), apply() and bind() can only be used by functions and not any other data-types.

call()

Let's take a look at our previous example again.

const boss = {
  lastName:"Scott",
  name: function(){
    return "Michael " + this.lastName;
  },
  whatContext:function() {
    return this;
  },
  details: {
    basketballMachine: function(){
      return "Michael " + this.lastName + " the Machine";
    },
    whatContext:function(){
      return this
    }
  }
}
boss.details.basketballMachine() //Michael undefined the Machine

We got undefined here because the value of the keyword this is bound to the details object which does not have a lastName property.

Let's change it to be the boss object

boss.details.basketballMachine.call(boss) //"Michael Scott the Machine"

Viola!

Note
Here, we are not invoking the basketballMachine method, we are just attaching the call onto it so there are no parentheses after basketballMachine.

'this' is for beginners II

Ajin Kabeer — Sat, 11 Apr 2020 21:05:09 +0000

This is the continuation of the series 'this' is for beginners. If you haven't read the first part yet, I highly recommend you do to get the flow of this. Let's see what happens when the keyword this is inside an Object declaration.

Object

This is the second rule which is object binding. This rule applies when the keyword this is used inside a declared object. The value of the keyword this will be closest to the value of the parent object.

Let's take a look at an example.

const boss = {
  lastName:"Scott",
  name: function(){
    return "Michael " + this.lastName;
  },
  whatContext:function() {
    return this;
  }
}

boss.name() //Michael Scott
boss.whatContext() // returns the object boss

Now, fire-up your console and test the code snippet below. There's a catch.

const boss = {
   lastName:"Scott",
   whatContext:this
}

boss.whatContext // window object

But why?

The keyword this is defined when a function is run. As simple as that. There is not a function being run here to create a new value of the keyword this so the value of thisis still the window object.

Nested Objects

Let's look at a bit more complex object with nested properties.

const boss = {
  lastName:"Scott",
  name: function(){
    return "Michael " + this.lastName;
  },
  whatContext:function() {
    return this;
  },
  details: {
    basketballMachine: function(){
      return "Michael " + this.lastName + " the Machine";
    },
    whatContext:function(){
      return this
    }
  }
}

boss.details.basketballMachine() //Michael undefined the Machine

Inside of the details object, we have a key of basketballMachine which is a function that returns the string "Michael" concatenated with the value of the lastName property.

The second rule is that the value of the keyword this will always be the closest parent object. Even though, the declared object is boss, there's an object inside called details which is the closest parent object to the basketballMachine object.

Since the details object does not have a key of lastName the value of this.lastName will be undefined.

So how can we fix this?

What if we want our basketballMachine method to return Michael Scott the Machine instead of Michael undefined the Machine.
That is exactly the call(), apply() and bind() functions will do for us.

In the next part, we will look at the third rule for determining the value of this using call(), apply() and bind().

So Long..

'this' is for beginners

Ajin Kabeer — Sat, 11 Apr 2020 19:53:28 +0000

Have you ever had to encounter the beautiful this keyword anywhere in your JavaScript code and wished you had a really good grip on it? If the answer is yes, then you are not alone, I mean we are not alone. We are in this together. When I started learning JavaScript, this was really confusing and so was bind(), call() and apply(). I did not master any of this, atleast not yet.

Anyway, here are some simple concepts that I learned about this. To keep it simple and lite, I'll make this post into a four or five-part series.

So what is this

The keyword this is a bit tricky to wrap your head around when starting to learn JavaScript but its a foundation for object oriented programming and other concepts like call(), apply() and bind().

It is a reserved keyword in JavaScript which means we cannot set it as the value of a variable.
The value of this is determined by how a function is called.
Every time a function is run, the keyword this is defined for that function.

There are four rules we can use to determine the value of this. Yes, you heard me right :)

The Global Context

This rule applies when you use this outside of a declared object and you don't see call(), apply(), bind() or the new keyword anywhere near this.

When this is used in the global context, its value refers to the global object which in the browser is the window object.

Fire up your browser's console and log the value of this. You'll be able to see the window object containing the DOM document.

console.log(this) //window

Now, declare a function and return the value of this

function soThis(){
  return this;
}

soThis() //window

The global context rule applies only when the keyword this is used outside a declared object. Here, its inside a function.

Be on the lookout for the next post in this series :)

Build A Simple State Machine in React

Ajin Kabeer — Sat, 29 Feb 2020 02:56:46 +0000

My goal for the day is to get you started with XState library. XState will help us build finite state machines. First, we will build a state machine and then integrate it into a react app.

Excited already? let's get started.

We will start with a very simple state machine called toggleStateMachine machine which will toggle between two states active and inactive.
Here's a cool visualizer for the state machine and how it transitions from one state to another.

XState Visualizer

Once you're in the visualizer page, empty the definitions tab because we are going to build it from scratch.

Define a variable. This variable will be an instance of Machine().

const toggleStateMachine = new Machine({})

Now lets give an id to this variable. We can even use the variable name for this.

const toggleStateMachine = new Machine({
id:'toggleStateMachine'
})

Now we need to give an initial value to the state machine, as the name suggests it's the initial state of the machine when we spin it up. Since we are building a toggle machine, there will be two states active and inactive. So naturally, the initial state will be in inactive state.

const toggleStateMachine = new Machine({
id:'toggleStateMachine',
initial:'inactive'
})

Next, we will define all of the states this machine has. states is an object. We can add properties to its which are all the different states this machine can have.

const toggleStateMachine = new Machine({
  id: "toggleStateMachine",
  initial: "inactive",
  states: {
    inactive: {},
    active: {}
  }
});

Click the update button. Voila!

As you can see now, when the machine starts it will be in inactive state. So when an event happens the inactive state should change into active state. This is how you do it.

const toggleStateMachine = new Machine({
  id: "toggleStateMachine",
  initial: "inactive",
  states: {
    inactive: {
      on: {
        TOGGLE: "active"
      }
    },
    active: {}
  }
});

The on property tells the initial state which events it should listen for. Here, the on property tells the inactive state that it should listen to a TOGGLE event.

Similarly, the active property should listen to the TOGGLE event. So when the toggle is triggered while in the active state, it should switch back to the inactive state.

const toggleStateMachine = new Machine({
  id: "toggleStateMachine",
  initial: "inactive",
  states: {
    inactive: {
      on: {
        TOGGLE: "active"
      }
    },
    active: {
      on: {
        TOGGLE: "inactive"
      }
    }
  }
});

That's it folks!. Our state machine is ready to be integrated into a React application.

Simple implementation using React Hooks.

import { useMachine } from '@xstate/react';

const toggleStateMachine = new Machine({
  id: "toggleStateMachine",
  initial: "inactive",
  states: {
    inactive: {
      on: {
        TOGGLE: "active"
      }
    },
    active: {
      on: {
        TOGGLE: "inactive"
      }
    }
  }
});

function Toggle() {
  const [current, send] = useMachine(toggleStateMachine);
  return (
    <button onClick={() => send('TOGGLE')}>
      {current.matches('inactive') ? 'Off' : 'On'}
    </button>
  );

}

Well, that's it, folks!. Thanks for reading. I encourage you to read more from the official XState documentation.

Run a DynamoDB instance locally with Node.js

Ajin Kabeer — Tue, 04 Feb 2020 11:38:52 +0000

Node.js + MongoDB is extremely popular when you need a fast and convenient development cycle but don't need to care much about the performance even though MongoDB is quite performant. Likewise, we can use NodeJS with DynamoDB which is scalable, affordable and also frees up your time from configuring database clusters.

This post will explain how you can set up a local DynamoDB instance with Node.js with or without an AWS account.

I assume you have the latest version of Node.js installed. I use a generator tool called express-generator, which creates an express application skeleton without any hassle.

DynamoDB Setup

Download the latest version of DynamoDB
Unzip the file contents into a new folder. For example, we can call it dynamodb



cd dynamodb
java -Djava.library.path=./DynamoDBLocal_lib -jar DynamoDBLocal.jar -sharedDb

If you're greeted with the following log on your console, you have successfully started the DynamoDB instance locally. Good work!



Initializing DynamoDB Local with the following configuration:
Port:   8000
InMemory:   false
DbPath: null
SharedDb:   true
shouldDelayTransientStatuses:   false
CorsParams: *

Express App Setup

We will use the express-generator package to scaffold an express app quickly.



express dynamo-local
cd dynamo-local
npm install
npm start

Now, go to localhost:300. Awesome, you have set up the express app successfully.

Configure AWS Locally

Before we start creating tables, we need to configure AWS via CLI. Since we will not be using an AWS account, it's pretty easy to get going.

Install AWS CLI. Then run aws --version to check if it's properly installed. Then run aws configure and pass any string as access key and secret access key. For example,



AWS Access Key ID [None]: dunder
AWS Secret Access Key [None]: mifflin
Default region name [None]: local
Default output format [None]: json

Let's get to work

Awesome!. We have set the ball rolling. Now we can create a table on our very own locally brewed DynamoDB instance.

Before we create a table, let's see if everything working properly.
Run aws dynamodb list-tables --endpoint-url http://localhost:8000
and you'll be greeted with an object which has a key named TableNames on your console.

{ "TableNames": [] }

The Table Creation requires not only setting a name, but also the primary key, which identifies table items. No two items share a key. DynamoDB uses two types of primary keys. Partition Key − This simple primary key consists of a single attribute referred to as the “partition key.” Internally, DynamoDB uses the key value as input for a hash function to determine storage. Partition Key and Sort Key − This key, known as the “Composite Primary Key”, consists of two attributes.

*The partition key and

*The sort key.

DynamoDB applies the first attribute to a hash function, and stores items with the same partition key together; with their order determined by the sort key. Items can share partition keys, but not sort keys.

Haha, okay. I hope you get the drift and I will stop with my theoretical babblings. Let's create our first table. Create a javascript file with the following code snippet. For example, in this example, I named my file scrantonTable.js.



//scrantonTable.js
const AWS = require("aws-sdk");
AWS.config.update({
  region: "local",
  endpoint: "http://localhost:8000"
});
var dynamodb = new AWS.DynamoDB();
var params = {
    TableName : "Scranton",
    KeySchema: [
        { AttributeName: "id", KeyType: "HASH"},  //Partition key
],
    AttributeDefinitions: [
        { AttributeName: "id", AttributeType: "N" },
],
    ProvisionedThroughput: {
        ReadCapacityUnits: 5,
        WriteCapacityUnits: 5
    }
};
dynamodb.createTable(params, function(err, data) {
    if (err) {
        console.error("Error JSON.", JSON.stringify(err, null, 2));
    } else {
        console.log("Created table.", JSON.stringify(data, null, 2));
    }
});

Run node scrantonTable.js. Viola!

Pretty cool right?. Additionally, Run
aws dynamodb list-tables --endpoint-url http://localhost:8000
to double-check.

{ "TableNames": [ "Scranton" ] }

Now that our table is set-up, we can feed some data into it using a JSON file.



//scrantonData.json
[
  {
    "id": 1,
    "type": "Sales",
    "name": "Dwight Schrute",
    "description": "Battlestar Galatica"
  },
  {
    "id": 2,
    "type": "Accounting",
    "name": "Kevin Malone",
    "description": "M&Ms"
  },
  {
    "id": 3,
    "type": "Reception",
    "name": "Erin",
    "description": "Glee party"
  }
]

To load this data into the table, we'll need a javascript file with which we can use the PutItem method of DynamoDB.



//putScrantonData.js
const AWS = require("aws-sdk");
const fs = require('fs');
AWS.config.update({
    region: "local",
    endpoint: "http://localhost:8000"
});
var docClient = new AWS.DynamoDB.DocumentClient();
console.log("Importing Scranton into DynamoDB. Please wait.");
let scranton = JSON.parse(fs.readFileSync('scrantonData.json', 'utf8'));
scranton.forEach(function(scran) {
  console.log(scran)
var params = {
        TableName: "Scranton",
        Item: {
            "id": scran.id,
            "type": scran.type,
            "name": scran.name,
            "description": scran.description
        }
    };
docClient.put(params, function(err, data) {
       if (err) {
           console.error(err);
       } else {
           console.log("PutItem succeeded:", scran.name);
       }
    });
});

run node putScrantonData.js.

Well, that's it, folks!. Thanks for reading. I'll be back with something exciting very soon.

DynamoDB Documentation for Node.js.

Reference 1
Reference 2

What technology are you planning to learn in 2020? 💡

Ajin Kabeer — Mon, 09 Dec 2019 09:44:12 +0000

It's almost 2020 and I am planning to dive deep into PWAs this coming year.
A little late to the party, I know 🤓.

PWA: Progressive Web Apps 🔥

PWAs are regular web apps (HTML/CSS/JS) but have a native feel as far as experience, layout and functionality.

Looks great on all devices
Offline content with service workers
Must be HTTPS
Reliable, fast and engaging

So, What do you plan to learn in 2020? 🚀

This is inspired from @emmawedekind's post from last year.

Add A Simple Authentication To Your React App

Ajin Kabeer — Mon, 25 Nov 2019 07:28:17 +0000

Today, I will show you how you can add a simple authentication to your react application that uses authentication from Okta which is a user management system that can be used across multiple apps built on multiple language or frameworks.

It is similar to Auth0. You can use it across multiple apps and you can even use it with the apps built on different languages and platforms.

Currently Okta supports the following languages:

Android
Angular
iOS
Java
.NET
Node.js
PHP
React

Sign-Up

Before you can integrate Okta into your react application, you will need a Okta developer account. So go ahead and create your free account right now.

Free Okta Developer Account

Okta Dashboard

After creating your free account, you will be redirected to the dashboard. Did you notice the Org URL in the dashboard. You will need that for your application. The dashboard also has user metrics and system logs that shows all the activities.

Register Your React Application

Its time to register your react application. Click on the Applications link on the dashboard.

Click on Add Application
Choose Single Page App
Add a name to your app in the Name field

Now, you have to edit the Base URI's field. I am going to assume that you are using create-react-app on your local server.

http://localhost:3000

Same thing with Login redirect URIs & Click Done.

http://localhost:3000/implicit/callback

Now your application is registered and you will get a Client ID.

Fire up your code editor

Navigate to your project folder
Add the necessary packages

yarn add react-router-dom @okta/okta-react @okta/signin-widget
For the sake of this example, let's assume that your react application has three pages which are suppose to be in private routes and only authorized user's have access to this routes.

/home
/user
/order

Create a Login component

Create a new folder called auth in your components folder and create a new file called Login.js with the following code.

*Login.js*

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom';
import OktaSignInWidget from './SigninWidget';
import { withAuth } from '@okta/okta-react';

export default withAuth(class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      authenticated: null
    };
    this.checkAuthentication();
  }

  async checkAuthentication() {
    const authenticated = await this.props.auth.isAuthenticated();
    if (authenticated !== this.state.authenticated) {
      this.setState({ authenticated });
      this.props.history.push('/home')

    }
  }

  componentDidUpdate() {
    this.checkAuthentication();
  }

  onSuccess = (res) => {
    if (res.status === 'SUCCESS') {
      return this.props.auth.redirect({
        sessionToken: res.session.token
      });
   } else {
    // The user can be in another authentication state that requires further action.
    // For more information about these states, see:
    //   https://github.com/okta/okta-signin-widget#rendereloptions-success-error
    }
  }

  onError = (err) => {
    console.log('error logging in', err);
  }

  render() {
    if (this.state.authenticated === null) return null;
    return this.state.authenticated ?
      <Redirect to={{ pathname: '/' }}/> :
      <OktaSignInWidget
        baseUrl={this.props.baseUrl}
        onSuccess={this.onSuccess}
        onError={this.onError}/>;
  }
});

Next up, you need to create a new file called SigninWidget in the same auth directory with the following code.

*SigninWidget.js*

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import OktaSignIn from '@okta/okta-signin-widget';
import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';

 class SigninWidget extends Component {
  componentDidMount() {
    const el = ReactDOM.findDOMNode(this);
    this.widget = new OktaSignIn({
      baseUrl: this.props.baseUrl,
      authParams: {
        pkce: true
      },
    });
    this.widget.renderEl({el}, this.props.onSuccess, this.props.onError);
  }

  componentWillUnmount() {
    this.widget.remove();
  }

  render() {
    return <div />;
  }
};

export default SigninWidget

Next step is to update your route file. Here is an example from my Okta implementation. Wrap private routes inside SecureRoute component and also replace Client ID and issuer with your own credentials from Okta developer console.

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Order from "./pages/Order.js";
import Home from "./pages/Home.js";
import Users from "./pages/Users.js";
import Login from "./components/auth/Login";
import { Security, SecureRoute, ImplicitCallback } from "@okta/okta-react";

function onAuthRequired({ history }) {
  history.push("/login");
}

const AppRoute = () => (
  <Router>
    <Security
      issuer="https://dev-944example.okta.com/oauth2/default" //Replace with your ORG URI.
      clientId="0oa1ws12avokObj45C357example" //Replace with your own client id
      redirectUri={window.location.origin + "/implicit/callback"}
      onAuthRequired={onAuthRequired}
    >
      <SecureRoute exact path="/orders" component={Order} />
      <SecureRoute exact path="/users" component={Users} />
      <Route exact path="/" component={Home} />
      <Route
        path="/login"
        render={() => <Login baseUrl="https://dev-968924.okta.com" />}
      />
      <Route path="/implicit/callback" component={ImplicitCallback} />
    </Security>
  </Router>
);

export default AppRoute;

Create a Logout function

This is the final step. You'll want to create a logout button in your home.js file or root file which is rendered to the user after logging in and don't forget to wrap your function inside withAuth to use the auth props.


import { withAuth } from "@okta/okta-react";
import Breadcrumb from './breadcrumb.js'
class Home extends Component {
  logout = async () => {
    this.props.auth.logout("/");
  };

  render() {
    return (
      <>
        <Breadcrumb home="Logout" click={this.logout} />
      </>
    );
  }
}

export default withAuth(Home);

Congratulations! 🎉

If you manage to reach this far, then I hope you have successfully integrated Okta authentication in your react application. If you run into any trouble, shoot a comment below. I will help you solve it.

This is my first dev.to post. In-fact, this is my first blog post ever. So I apologize if you can't fully grasp my technique. I will be back with a new one soon.

Thank you!

DEV Community: Ajin Kabeer

Deploy CRA to GitHub Pages using GitHub Actions

Spin up a react application

Deploy to GitHub Pages

Add GitHub Actions to your workflow

Congratulations! 🎉

'this' is for beginners III

call()

'this' is for beginners II

Object

But why?

Nested Objects

So how can we fix this?

So Long..

'this' is for beginners

So what is this

The Global Context

Build A Simple State Machine in React

Read More

Run a DynamoDB instance locally with Node.js

DynamoDB Setup

Express App Setup

Configure AWS Locally

Let's get to work

Read More

What technology are you planning to learn in 2020? 💡

PWA: Progressive Web Apps 🔥

So, What do you plan to learn in 2020? 🚀

Add A Simple Authentication To Your React App

Sign-Up

Okta Dashboard

Register Your React Application

Fire up your code editor

Create a Login component

Create a Logout function

Congratulations! 🎉