Forem: Rajitha Gunathilake

Automate adding screenshots to GitHub commits and pull requests

Rajitha Gunathilake — Sat, 04 Dec 2021 06:54:34 +0000

My Workflow

This workflow will run puppeteer and capture screenshots of a web application, and then add screenshots to commit comments or pull request comments. This will ease the process of verifying the web app UI state.

workflow file

Submission Category:

Maintainer Must-Haves

Yaml File

name: Browser-Testing

on: [push, pull_request]

jobs:
  Browser-Testing:
    runs-on: ubuntu-latest
    # Service containers to run postgres
    services:

      postgres:

        image: postgres

        env:
          POSTGRES_PASSWORD: postgres
          POSTGRES_USER: postgres
          POSTGRES_DB: postgres

        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5
        ports:

          - 5432:5432

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up Node.js 14.x
        uses: actions/setup-node@v1
        with:
          node-version: 14.x
      # install puppeteer dependency libraries using apt
      - name: install puppeteer libraries
        run: |
          sudo apt-get update
          sudo apt-get install -y libgbm1
      # since puppeteer is large in size caching will reduce the runtime 
      - name: Cache node modules
        uses: actions/cache@v2
        env:
          cache-name: cache-node-modules
        with:
          path: "node_modules"
          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-build-${{ env.cache-name }}-
            ${{ runner.os }}-build-
            ${{ runner.os }}-

      - name: Install dependencies
        run: npm install

      - name: Install puppeteer
        run: npm install puppeteer

      - name: Migrate database
        run: npm run prismamigrateprod
        env:
          NODE_ENV: production
          DATABASE_URL: "postgres://postgres:postgres@localhost:5432/postgres"

      - name: Seed database
        run: npm run seed
        env:
          NODE_ENV: production
          DATABASE_URL: "postgres://postgres:postgres@localhost:5432/postgres"

      # run a bash script to start the server and then run puppeteer to capture the screenshots
      # after capturing screenshots , they will be uploaded to cloudinary image service and pass the image url to next step using environment variables 
      - name: Run browser testing script
        id: browser-testing
        env:
          HASHSALT: 123
          DATABASE_URL: "postgres://postgres:postgres@localhost:5432/postgres"
          CLOUDINARY_CLOUD_NAME: ${{ secrets.CLOUDINARY_CLOUD_NAME }}
          CLOUDINARY_API_KEY: ${{ secrets.CLOUDINARY_API_KEY }}
          CLOUDINARY_API_SECRET: ${{ secrets.CLOUDINARY_API_SECRET }}
        run: |
          chmod +x run-browser-testing.sh
          ./run-browser-testing.sh

      # add comment to commit or pull request 
      - name: Add comment
        uses: actions/github-script@v5
        env:
          SHA: ${{ github.sha }}
          commentBody: ${{ env.commentBody }}
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          script: |

            let buffercommentBody = process.env.commentBody
            let utf8commentBody = new Buffer.from(buffercommentBody, "base64").toString("utf8");
            console.log(utf8commentBody);

            github.rest.repos.createCommitComment({
              owner: context.repo.owner,
              repo: context.repo.repo,
              commit_sha: process.env.SHA,
              body: utf8commentBody
            })

Main workflow steps boils down to

Run puppeteer and capture the screenshots.
upload the screenshots to a external image service (in this case cloudinary) and get the image url.
Create markdown file as string using the image urls.
Convert markdown file string into base64 encoded string to ease passing to the environment variables (easier to pass control characters such as newlines).
Use actions/github-script action createCommitComment method to post the comment to commit or pull request.

Additional Info

Used in

RizkyRajitha / linkin

Linkin is a customizable self hosted link tree platform.

Linkin ·

Linkin is a customizable self-hosted link tree application.

Free and Open Source 💯

Self Hosted, you own your data 💽

Customize your link tree with few clicks using a feature-rich dashboard 🤖

SEO friendly design built using Next js 🕸️

Supports one-click deploy using multiple cloud providers 🚀

View Demo
Demo Admin http://linkindemo.vercel.app/admin

Demo username = admin
Demo password = linkin123

Deploy with Vercel

Deploy with Heroku

Deploy with Railway

Getting started

Deploy in Vercel
- set environment variables
  - DATABASE_URL - Postgres database url
  - HASHSALT - random secret key
  - NODE_ENV - set NODE_ENV to production
- after successfully deploying visit youdomain/admin to view admin login
- use default login credentials
  - username = admin
  - password = linkin123
- after a successfull login you will be able to see above admin dashboard.

Deploy in Heroku
- set environment variables
  - DATABASE_URL - Postgres database url
  - HASHSALT - random secret key
- after successfully deploying visit youdomain/admin to…

View on GitHub

Example commit comment

Deploy Appwrite to AWS using Terraform and Ansible

Rajitha Gunathilake — Thu, 07 Oct 2021 15:31:05 +0000

Hi everyone,

This is a tutorial I am going to walk through how to deploy Appwrite to AWS EC2 instance using Terraform and Ansible.

Appwrite is a self-hosted solution that provides developers with a set of easy-to-use and integrate REST APIs to manage their core backend needs.

We will use Terraform to provision the underlying infrastructure and manage configurations and deploy appwrite using Ansible.

code for this tutorial can be found in

RizkyRajitha / appwriteiac

Hi everyone,

This is a tutorial I am going to walk through how to deploy Appwrite to AWS EC2 instance using Terraform and Ansible.

Appwrite is a self-hosted solution that provides developers with a set of easy-to-use and integrate REST APIs to manage their core backend needs.

We will use Terraform to provision the underlying infrastructure and manage configurations and deploy appwrite using Ansible.

code for this tutorial can be found in

{% github RizkyRajitha/appwriteiac %}

prerequisites

aws account AWS free tier
Terraform installed Terraform official tutorial and setup with aws credentials Terraform official tutorial
Ansible installed Ansible official installation guide
AWS Key pair for SSH connection AWS UserGuide

Provisioning infrastructure with Terraform

we'll start by provisioning the infrastructure needed to deploy appwrite using terraform.

in this tutorial, we will be provision

VPC and subnet to run EC2 instance
Internet gateway to expose subnet to internet
route table and…

View on GitHub

prerequisites

aws account AWS free tier
Terraform installed Terraform official tutorial and setup with aws credentials Terraform official tutorial
Ansible installed Ansible official installation guide
AWS Key pair for SSH connection AWS UserGuide

Provisioning infrastructure with Terraform

we'll start by provisioning the infrastructure needed to deploy appwrite using terraform.

in this tutorial, we will be provision

VPC and subnet to run EC2 instance
Internet gateway to expose subnet to internet
route table and route table association to associate route table with subnet
EC2 instance to deploy appwrite
security groups to allow inbound(http , https) and outbound web traffic to EC2 instance to expose appwrite

first, create a folder of your choice and then create providers.tf file . this file will hold information about the cloud provider. next, initialize terraform project using terraform init . this will allow terraform to download necessary binaries and initiate terraform.

providers.tf

terraform {

  required_providers {
    aws = {
      source  = "hashicorp/aws"
      version = "~> 3.27"
    }
  }

  required_version = ">= 0.14.9"

}

provider "aws" {

  profile = "default"
  region  = "us-east-1"

}

after that, we need to create our first component, AWS VPC . VPC stands for Virtual Private Cloud, which is like a complete network infrastructure layer for your cloud applications. next, we need to create a subnet in our VPC. this is where our EC2 instance is placed in the network.

To expose this subnect to the internet we need to provision an Internet Gateway and also route table and route table associations to associate the route table with this subnet.

network.tf


# VPC
resource "aws_vpc" "vpcappwriteiacdemo" {
  cidr_block = "10.0.0.0/16"
  tags = {
    "Name" = "vpc_appwriteiacdemo"
  }
}

# Public subnet
resource "aws_subnet" "publicsubnetappwriteiacdemo" {
  vpc_id                  = aws_vpc.vpcappwriteiacdemo.id
  cidr_block              = "10.0.1.0/24"
  map_public_ip_on_launch = true

}


#IGW
resource "aws_internet_gateway" "igwappwriteiacdemo" {
  vpc_id = aws_vpc.vpcappwriteiacdemo.id
  tags = {
    "Name" = "igw_appwriteiacdemo"
  }
}

resource "aws_route_table" "crtpublicappwriteiacdemo" {
  vpc_id = aws_vpc.vpcappwriteiacdemo.id


  route {
    cidr_block = "0.0.0.0/0"
    # directs to IGW
    gateway_id = aws_internet_gateway.igwappwriteiacdemo.id
  }


  tags = {
    "Name" = "custom_public_route_table_appwriteiacdemo"
  }
}


resource "aws_route_table_association" "racappwriteiacdemo" {
  subnet_id      = aws_subnet.publicsubnetappwriteiacdemo.id
  route_table_id = aws_route_table.crtpublicappwriteiacdemo.id
}

after that, we need to specify the security groups to allow web traffic to the EC2 instance we are provisioning. for that create securitygroups.tf file.

here we provision 4 security groups.

allow http ingress traffic (allow inbound http traffic to EC2) : port 80
allow https ingress traffic (allow inbound https traffic to EC2) : port 443
allow ssh ingress traffic (allow inbound ssh traffic to EC2) : port 22
allow all egress traffic (allow all outbound traffic to EC2)

securitygroups.tf

resource "aws_security_group" "sg_allow_http_ingress_appwriteicademo" {
  name = "sg_allow_http_ingress_appwriteicademo"
  vpc_id = aws_vpc.vpcappwriteiacdemo.id
  ingress {
    description      = "http"
    from_port        = 80
    to_port          = 80
    protocol         = "tcp"
    cidr_blocks      = ["0.0.0.0/0"]
    ipv6_cidr_blocks = ["::/0"]
  }

}

resource "aws_security_group" "sg_allow_https_ingress_appwriteicademo" {
  name = "sg_allow_https_ingress_appwriteicademo"
  vpc_id = aws_vpc.vpcappwriteiacdemo.id
  ingress {
    description      = "http"
    from_port        = 443
    to_port          = 443
    protocol         = "tcp"
    cidr_blocks      = ["0.0.0.0/0"]
    ipv6_cidr_blocks = ["::/0"]
  }

}

resource "aws_security_group" "sg_allow_ssh_ingress_appwriteicademo" {
  name = "sg_allow_ssh_ingress_appwriteicademo"
  vpc_id = aws_vpc.vpcappwriteiacdemo.id
  ingress {
    description      = "http"
    from_port        = 22
    to_port          = 22
    protocol         = "tcp"
    cidr_blocks      = ["0.0.0.0/0"]
    ipv6_cidr_blocks = ["::/0"]
  }

}


resource "aws_security_group" "sg_allow_all_egress_appwriteicademo" {
  name = "sg_allow_all_egress_appwriteicademo"
  vpc_id = aws_vpc.vpcappwriteiacdemo.id

  egress {
    from_port        = 0
    to_port          = 0
    protocol         = "-1"
    cidr_blocks      = ["0.0.0.0/0"]
    ipv6_cidr_blocks = ["::/0"]
  }

}

now we are almost there, just need to create our main.tf file where we specify EC2 instance to provision.

in this tutorial, we will provision t2 small EC2 instance to the public subnet we created in our previous steps.
I choose t2 small instance type because the minimum requirements to run Appwrite is 1 CPU core and 2GB of RAM which matches with t2 small instance type.

AMI we use here is Ubuntu Server 20.04 LTS (HVM).security groups we created earlier also have specified to our EC2 instance along with the subnet.

Make sure you added your key pair name in key_name value.

main.tf


resource "aws_instance" "appwrite-demo" {
  ami           = "ami-09e67e426f25ce0d7" # ubuntu 20 image
  instance_type = "t2.small"
  tags          = { Name : "appwrite-ec2" }
  key_name               = "your-key-pair-name"
  vpc_security_group_ids = [aws_security_group.sg_allow_all_egress_appwriteicademo.id,
  aws_security_group.sg_allow_http_ingress_appwriteicademo.id ,
  aws_security_group.sg_allow_https_ingress_appwriteicademo.id
  ]
  subnet_id              = aws_subnet.publicsubnetappwriteiacdemo.id
}


# log public-ip after privisioning
output "public-ip" {
  value = aws_instance.appwrite-demo.public_ip
}

now we have all the elements we need, let's apply this configuration using terraform apply command.

terraform output

make sure you can connect to the EC2 instance using the key pair you specified before proceeding to the next steps.

aws network diagram

Manage configurations and deploy appwrite using Ansible

First, create an inventory file named hosts and add EC2 instance public ip

hosts

your-ec2-public-ip-address

our newly provisioned EC2 instance has a fresh copy of ubuntu, so we need need to install docker and docker-compose to deploy appwrite.

We can start by creating main.yml file as the ansible playbook . in this file, we will have all the tasks we need to execute deploy appwrite.

First, we will update apt packages, and install dependency packages for docker and docker-compose .

Next we will install docker and docker-compose.

Finally, we will copy the docker-compose.yml and .env files (which we will download in the next step) to EC2 instance deploy appwrite using docker-compose.

main.yml

- become: yes
  hosts: all
  name: deploy-appwrite
  user: ubuntu
  tasks:
    - name: Update all packages
      apt:
        upgrade: dist
        update_cache: yes
        cache_valid_time: 3600

    - name: Install a list of common dependancy packages
      apt:
        pkg:
          - apt-transport-https
          - ca-certificates
          - software-properties-common

    # install docker

    - name: docker gpg setup
      apt_key:
        url: https://download.docker.com/linux/ubuntu/gpg
        state: present

    - name: add docker apt repository
      apt_repository:
        repo: deb [arch=amd64] https://download.docker.com/linux/ubuntu focal stable
        update_cache: yes
        state: present

    - name: Update repositories cache
      apt:
        update_cache: yes

    - name: Install docker-ce
      apt:
        name: docker-ce

    - name: add ubuntu to docker
      user:
        name: ubuntu
        group: docker

    # install docker-compose
    - name: get platform
      shell: "uname -s"
      args:
        executable: /bin/bash
      register: platform

    - name: get architecture
      shell: "uname -m"
      args:
        executable: /bin/bash
      register: arch

    - name: install docker-compose
      get_url:
        url: https://github.com/docker/compose/releases/download/1.27.4/docker-compose-{{platform.stdout}}-{{arch.stdout}}
        dest: /usr/local/bin/docker-compose
        mode: "u+x,g+x"

    - name: Install Docker SDK for Python
      apt:
        pkg:
          - python3
          - python3-pip

    - name: Update repositories cache
      apt:
        update_cache: yes

    - name: Install Docker SDK for Python
      pip:
        name: "docker<5"
      become: yes

    - name: Install docker-compose SDK for Python
      pip:
        name: "docker-compose"
      become: yes

    # deploy appwrite
    - name: Create appwrite directory
      file:
        path: /home/ubuntu/appwrite/
        state: directory

    - name: Copy docker-compose.yml
      copy:
        src: templates/docker-compose.yml
        dest: /home/ubuntu/appwrite/docker-compose.yml

    - name: Copy .env
      copy:
        src: templates/.env
        dest: /home/ubuntu/appwrite/.env

    - name: docker compose up
      docker_compose:
        project_src: /home/ubuntu/appwrite

Now create templates directory and add docker-compose.yml and .env files to templates directory from this GitHub gist.

GitHub gist

Appwrite docs

final folder structure

Now we have all the pieces in hand, let's run ansible playbook using the following command.

In this command, we pass main.yml as our playbook
-i flag to pass our inventory file hosts

--private-key flag to pass the key pair, to ssh EC2 instance.

ansible-playbook main.yml -i hosts --private-key [path-to-your-key]

Let's run ansible playbook and watch the magic happens 🪄.

After successfully running ansible playbook now you can visit your EC2 public ip address and view the appwrite signup page.

Now we can use appwrite and start building applications.

Thanks for reading till the end 🙌

Cheers 🥂

Setting up Prometheus and Grafana on Orange Pi Zero

Rajitha Gunathilake — Fri, 06 Aug 2021 16:28:36 +0000

Hi everyone,

This is a tutorial I am going to walk through how to install and configure an Orange Pi Zero with Prometheus and Grafana for monitoring hardware.

I am using Orange pi zero in this tutorial with AllWinner H2 Quad-core processor.

Let's start by updating the Orange pi.

sudo apt-get update

I first installed downloaded the Prometheus from their github release. because my orangepi is base on arm7 architecture I downloaded the respective archive. here -OL in the curl will redirect if need and save the output file.

curl -OL https://github.com/prometheus/prometheus/releases/download/v2.28.1/prometheus-2.28.1.linux-armv7.tar.gz

after downloading the image extract it to a folder.

tar -xzvf prometheus-2.29.0-rc.0.linux-armv7.tar.gz prometheus-2.29.0-rc.0.linux-armv7/

next, I copied the Prometheus binary to the /usr/local/bin/ because that I generally where your binary files live in.

cd prometheus-2.29.0-rc.0.linux-armv7/
cp prometheus /usr/local/bin/

after all that was set up, I created a service file for systemd to configure Prometheus as a service in /etc/systemd/system/.
this directory is where we write systemd unit files. there are many places among this one but this I a conventional directory that is best suited in this scenario.

sudo nano /etc/systemd/system/prometheus.service

[Unit]
Description=Prometheus monitoring
Wants=network-online.target
After=network-online.target

[Service]
Type=simple
ExecStart=/usr/local/bin/prometheus \
                    --config.file /home/batman/prometheus/prometheus.yml \
                    --web.route-prefix=/ \
                    --web.external-url=http://rizky.lab/prometheus
Restart=always

[Install]
WantedBy=multi-user.target

in this file, I have added the ExecStart path to the Prometheus binary. here I also added some more arguments to configure Prometheus, because I want to run Prometheus behind an Nginx reverse proxy. and also added the config file in path /home/batman/prometheus/prometheus.yml so make sure you have the default prometheus.yml (comes with the tar archive) file in the specified path.

after that is done. I restarted the systemd daemon and then enable the service.
enabling service will make sure that this service will run after a reboot. it might do many other things behind the back but I notice this when I used this service without enabling it.
next stared Prometheus.

sudo systemctl daemon-reload
sudo systemctl enable prometheus
sudo systemctl restart prometheus
sudo systemctl status prometheus

next, we can start installing the node_exporter for orange pi
here also, I looked the same way, searched for the armv7 architecture binary.
just as before download extract and copy it to the /usr/local/bin/ directory.

curl -OL https://github.com/prometheus/node_exporter/releases/download/v1.2.0/node_exporter-1.2.0.linux-armv7.tar.gz
tar -xzvf node_exporter-1.2.0.linux-armv7.tar.gz node_exporter-1.2.0.linux-armv7/
cd node_exporter-1.2.0.linux-armv7/
sudo cp node_exporter  /usr/local/bin/

next, I repeated the same steps for creating the unit file for systemd.

sudo nano /etc/systemd/system/nodeexporter.service

[Unit]
Description=node exporter for node monitoring
Wants=network-online.target
After=network-online.target

[Service]
Type=simple
ExecStart=/usr/local/bin/node_exporter
Restart=always

[Install]
WantedBy=multi-user.target

after setting up the node_exporter , reload systemd daemon and restarted node_exporter.
keep in mind the service will name after the name of the service file. here node_exporter service will be recognized as nodeexporter because I named the unit file nodeexporter.service

sudo systemctl daemon-reload
sudo systemctl enable nodeexporter
sudo systemctl restart nodeexporter
sudo systemctl status nodeexporter

now that we have all in place, next add this nodeexporter to Prometheus as a target. to do that we need to edit the
prometheus.yml file we specified earlier. I appended the following to the prometheus.yml.

- job_name: "node_exporter"

  static_configs:
    - targets: ["localhost:9100"]

after that restart, Prometheus to catch up with new changes. you can see the change at this point if you visit Prometheus via its opened port.

after that, I set up Grafana for the monitoring dashboard.

For Grafana, it's a bit different than the last approach, hence it could be installed with apt.
I pretty much followed they're offcial documentation

wget -q -O - https://packages.grafana.com/gpg.key | sudo apt-key add -
echo "deb https://packages.grafana.com/oss/deb stable main" | sudo tee -a /etc/apt/sources.list.d/grafana.list
sudo apt-get update
sudo apt-get install -y grafana

sudo systemctl demon-reload
sudo systemctl enable grafana-server
sudo systemctl start grafana-server
systemctl status grafana-server

hereafter setting up everything I need to alter come configurations in the grafana.ini file to allow Grafana to access behind a reverse proxy.
this Grafana file lives in /etc/grafana directory by default.

in that configuration we have to set domain , root_url and serve_from_sub_path options.

[server]
# The public facing domain name used to access grafana from a browser
domain = rizky.lab

# The full public facing url you use in browser, used for redirects and emails
# If you use reverse proxy and sub path specify full url (with sub path)
# ;root_url = %(protocol)s://%(domain)s:%(http_port)s/
root_url = %(protocol)s://%(domain)s:%(http_port)s/grafana/

# Serve Grafana from subpath specified in `root_url` setting. By default it is set to `false` for compatibility reasons.
serve_from_sub_path = true

after setting this up, restart Grafana to pick up with the latest changes.

now as the last step configure the Nginx as the reverse proxy to access our all mighty Grafana dashboard.

here I previously configured a site as rizky.lab , so I am editing that to suit the needs, but you can try any way you like.

server {
  listen 80 default_server;
  listen [::]:80 default_server;

  root /var/www/rizky.lab;

  index index.html;

  server_name rizky.lab;

         location /prometheus/ {
                proxy_pass http://localhost:9090/;
        }


        location /grafana/ {
                proxy_pass http://localhost:3000/;
        }

        location / {

                try_files $uri $uri/ =404;
        }

        # Proxy Grafana Live WebSocket connections.
        location /grafana/api/live {
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "Upgrade";
                proxy_set_header Host $http_host;
                proxy_pass http://localhost:3000/;
        }

}

and after all that, we can access the all mighty Grafana Dashboard, and configure it as you wish.

Thanks for reading till the end 🙌

Cheers 🥂

Introducing LinkIn Customizable self hosted link tree app

Rajitha Gunathilake — Sun, 20 Jun 2021 13:03:19 +0000

What is LinkIn?

LinkIn is a self-hosted link tree app that you can customize to create your own link tree page.

Why LinkIn ?

There are many Link tree platforms available, but they do come with a price. either they include their branding or limit customization for various pricing plans. But LinkIn is totally free, you host it, you own it.

Can i see a demo ?

Sure http://linkindemo.vercel.app/

Demo username = admin
Demo password = linkin123

Is LinkIn OpenSource ?

Absolutely yes

RizkyRajitha / linkin

Linkin is a customizable self hosted link tree platform.

Linkin ·

Linkin is a customizable self-hosted link tree application.

Free and Open Source 💯

Self Hosted, you own your data 💽

Customize your link tree with few clicks using a feature-rich dashboard 🤖

SEO friendly design built using Next js 🕸️

Supports one-click deploy using multiple cloud providers 🚀

View Demo
Demo Admin http://linkindemo.vercel.app/admin

Demo username = admin
Demo password = linkin123

Deploy with Vercel

Deploy with Heroku

Deploy with Railway

Getting started

Deploy in Vercel
- set environment variables
  - DATABASE_URL - Postgres database url
  - HASHSALT - random secret key
  - NODE_ENV - set NODE_ENV to production
- after successfully deploying visit youdomain/admin to view admin login
- use default login credentials
  - username = admin
  - password = linkin123
- after a successfull login you will be able to see above admin dashboard.

Deploy in Heroku
- set environment variables
  - DATABASE_URL - Postgres database url
  - HASHSALT - random secret key
- after successfully deploying visit youdomain/admin to…

View on GitHub

what LinkIn is made of ?

linkin is made using Next.js , and Postgres as the database. Bootstrap 5 for UI components.

how to get my own LinkIn page ?

visit LinkIn GitHub page and use the one-click deploy buttons to spin your own LinkIn page.

RizkyRajitha / linkin

Linkin is a customizable self hosted link tree platform.

Linkin ·

Linkin is a customizable self-hosted link tree application.

Free and Open Source 💯

Self Hosted, you own your data 💽

Customize your link tree with few clicks using a feature-rich dashboard 🤖

SEO friendly design built using Next js 🕸️

Supports one-click deploy using multiple cloud providers 🚀

View Demo
Demo Admin http://linkindemo.vercel.app/admin

Demo username = admin
Demo password = linkin123

Deploy with Vercel

Deploy with Heroku

Deploy with Railway

Getting started

Deploy in Vercel
- set environment variables
  - DATABASE_URL - Postgres database url
  - HASHSALT - random secret key
  - NODE_ENV - set NODE_ENV to production
- after successfully deploying visit youdomain/admin to view admin login
- use default login credentials
  - username = admin
  - password = linkin123
- after a successfull login you will be able to see above admin dashboard.

Deploy in Heroku
- set environment variables
  - DATABASE_URL - Postgres database url
  - HASHSALT - random secret key
- after successfully deploying visit youdomain/admin to…

View on GitHub

linkin currently supports hosting in vercel and heroku platforms. you have to connect LinkIn with your own Postgres database instance and start making your link tree. LinkIn currently supports fonts from a external url (example - google fonts) , icons from fontawesome , and avatar image from external url (example - cloudinary ) .

I have some experience in web dev. can I customize it on my own ?

Yes. LinkIn has a single component for the link tree. so you can add your own styles that LinkIn doesn't support and create your very own link tree.

LinkIn is in pretty early stages so you might find some hiccups along the way .you can visit linkin Github repo and create issues.

What do you think about Linkin? Share em in the comment section.

cheers 🥂

Connect API and a Database with Docker Network

Rajitha Gunathilake — Wed, 02 Jun 2021 09:58:37 +0000

Hi everyone,

This is a tutorial I am going to walk through how to run two docker containers, add them to a new docker network and communicate with each other.

for this, I am going to create a demo API with nodejs and a Postgres database in containers, and connect them to a docker network.

so first I am creating a docker network. docker network is an isolated network layer, which allows you to add containers to it. we can assign these containers' IP addresses inside the network, and let them communicate. host to container port mapping is still available when using a network in a container. docker will create a bridge by default.

to create a docker network



docker network create --subnet 172.20.0.0/16 dockernetworkdemo

here I have specified a subnet with the value 172.20.0.0/16 in CIDR format.

after we run this command we can check it using



docker network ls

we can also use



docker network inspect dockernetworkdemo

to view more details about the network.

here dockernetworkdemo is the name of the network we specified then creating the network.

now we have the network in place next move to the database.
here we are going to use a Postgres database.

to spin a Postgres database I will use



docker run --name dockernetworkdemopg -p 6543:5432 -e POSTGRES_PASSWORD=123 -e POSTGRES_USER=postgres -e POSTGRES_DB=postgres -d postgres:10-alpine

in this command,

dockernetworkdemopg is the name of the container

-p 6543:5432 will map port 5432 in the container to 6543 host port. here I have used a different port because I have a Postgres database already running on port 5432

-e POSTGRES_PASSWORD=123 -e POSTGRES_USER=postgres -e POSTGRES_DB=postgres here -e flag will pass an environment variable to the container, here we specify the password, user, and database.

-d flag will run this container in detached mode.

postgres:10-alpine is the name and the tag of the Postgres image we are fetching from the Docker Hub. here I have chosen the alpine version because it is lightweight and smaller in size around 20 mb .

now if we use



docker ps

command we can see that our Postgres container is up and running.

next, we are going to connect the Postgres container (dockernetworkdemopg) to the network (dockernetworkdemo) we created.



docker network connect --ip 172.20.0.5 dockernetworkdemo dockernetworkdemopg

here we have specified the IP of the connecting container to be 172.20.0.5 using --ip flag.

now if we run the network inspect command we can see
the container we added.

now we'll setup the API. I am using a simple nodejs API, and build a docker image.

RizkyRajitha / dockernetworkdemo

Connect API and a Database with Docker Network

View on GitHub



FROM  node:current-alpine3.12

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm i

ENV NODE_ENV=production
ENV DBURL=postgres://postgres:123@172.20.0.5:5432/postgres
ENV PORT=3001

COPY . .

EXPOSE 3001

CMD [ "npm", "run" , "prod" ]

in the dockerfile, we have specified the environment variable DBURL to the Postgres container we ran earlier.

ENV DBURL=postgres://postgres:123@172.20.0.5:5432/postgres

in the connection string postgres://postgres:123@172.20.0.5:5432/postgres

172.20.0.5:5432 is the IP address and the port of the Postgres container.172.20.0.5 is the IP address we specified when connecting to the network.



docker build -t dockernetworkdemoapi .

here -t will set the name and tag to dockernetworkdemoapi:latest

before running the images we have to create the database relation so that we can query data using the API . for that I am using a migration script to run some SQL commands.

because migration is running in the host machine, connection string is passed as postgres://postgres:123@localhost:6543/postgres with database IP as localhost and port as 6543 specified when running the Postgres database.

next, we will run the API image dockernetworkdemoapi:latest .



docker run --name dockernetworkdemoapicont -p 3001:3001 dockernetworkdemoapi:latest

in the above command --name flag specifies the name of the container to be dockernetworkdemoapicont

-p 3001:3001 to publish the ports with 3001 container port to 3001 host port.

dockernetworkdemoapi:latest is the docker image.

here i ran the container without detached mode so we can see the output.

now as the final step we are connecting the API (dockernetworkdemoapicont) container to the dockernetworkdemo docker network.



docker network connect dockernetworkdemo dockernetworkdemoapicont

now if we send a get request to the API we can see that API is able to connect to the database.

final docker inspect output

illustration of the network.

Thanks for reading till the end 🙌

I value your opinions, and appreciate you taking the time to share your thoughts.

Spinning service containers in GitHub action workflow

Rajitha Gunathilake — Sat, 29 May 2021 17:03:25 +0000

Hi everyone,

This is a tutorial I am going to walk through how to run docker containers in GitHub Action workflows.
This task is often useful in testing workflows where we need a temporary database to run test cases. we will run a PostgreSQL database in this tutorial.

name: Running Tests

on: [push]

jobs:
  Test:
    runs-on: ubuntu-latest

    services:
      postgres:
        image: postgres

        env:
          POSTGRES_PASSWORD: postgres
          POSTGRES_USER: postgres
          POSTGRES_DB: postgres

        options: >-
          --health-cmd pg_isready
          --health-interval 10s
          --health-timeout 5s
          --health-retries 5
        ports:

          - 5432:5432

in the above workflow snippet, we do several things.

on: [push]

will set when to run this workflow. here we have specified push, so on every push event, this workflow will run. keep in mind that this is an array so we can use multiple options like pull_request etc.

jobs:
  service-container-demo:

this code snippet will specify our job . service-container-demo is the name of our job.

runs-on: ubuntu-latest

specifies, on what operating system we need to run this job. here we have specified to run it on ubuntu's latest operating system.

 services:
      postgres:

here we specify the services we need to run, and the name of the service container. name of the service container is used to access it.

image: postgres

this line will specify what image we need to run. these docker images are fetched from Docker Hub . so we need to specify the respective image name from Docker Hub.

    env:
      POSTGRES_PASSWORD: postgres
      POSTGRES_USER: postgres
      POSTGRES_DB: postgres

here we have specified the environment variables we need to provide to the service container. we have provided the password, username, and the default database here, so we can later access the database via those credentials.

  options: >-
    --health-cmd pg_isready
    --health-interval 10s
    --health-timeout 5s
    --health-retries 5

we have to wait some time till the container is up and running .so to check that we have specified options to periodically check and after it is started proceed to the next steps.

 ports:
   - 5432:5432

here we have specified the port mapping. 5432 host port
is mapped to 5432 container port.

next, we can define the steps of the workflow. here we can migrate to the service container database, and run the required tests.

# define steps of workflow
    steps:
      # run steps required in the workflow
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up Node.js 14.x
        uses: actions/setup-node@v1
        with:
          node-version: 14.x

      - name: Install dependencies
        run: npm install

      - name: migrate database
        run: node migrate.js
        env:
          DBURL: "postgres://postgres:postgres@localhost:5432/postgres"

      - name: Run the mock tests function
        run: node getuser.js
        env:
          DBURL: postgres://postgres:postgres@localhost:5432/postgres

in above snippet DBURL is set to postgres://postgres:postgres@localhost:5432/postgres . it is derived through the configurations we set in the service container earlier. the host is provided as localhost because the docker and host machine both runs on localhost. and here, we are passing it to the step, through an environment variable.

database migration

database query

complete workflow file .

example GitHub repo

RizkyRajitha / gawscontainerdemo

GitHub action workflow with service containers

View on GitHub

Thanks for reading till the end 🙌

I value your opinions, and appreciate you taking the time to share your thoughts.

Sending images and more with Telegram bot

Rajitha Gunathilake — Mon, 24 May 2021 17:05:45 +0000

Hi everyone,

This is a follow-up tutorial on my previous tutorial about Sending messages with Telegram bot. make sure you check that before following this tutorial.

Sending messages with Telegram bot

Rajitha Gunathilake ・ Nov 10 '19

#bots #telegram #http

in the last tutorial, we talked about sending messages, but telegram has a powerful API that allows us to send more than just text messages.
so in this tutorial, we will get to know how to send images with a telegram bot.This procedure is really simple. we need to send a post request to telegram API with our photo as multipart/form-data.

This is similar to what we used previously, the change is now we are using a different route, and sending form-data with our image attached

Using the follwoing API endpoint https://api.telegram.org/bot<token>/sendPhoto?chat_id=<group chat id >

in multipart form data attach an image file with the name photo

and after sending this we can get a response with "ok": true, and if we look at the chat, we can see that the photo is received.

This can also be done programmatically, I will use nodejs to demonstrate in this example.



const fetch = require("node-fetch");
const fs = require("fs");
const FormData = require("form-data");

let readStream = fs.createReadStream("./image.png");

let form = new FormData();
form.append("photo", readStream);

fetch(
  `https://api.telegram.org/bot<token>/sendPhoto?chat_id=-<chat id>`,

  {
    method: "POST",
    body: form,
  }
)
  .then((res) => res.json())
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

we have used node-fetch package to send the HTTP request from nodejs and form-data package to append formdata to the request.

and after running the script we can see that we get "ok": true, just like before.

there are some limits provided by the telegram when using sendPhoto API
"The photo must be at most 10 MB in size. The photo's width and height must not exceed 10000 in total. Width and height ratio must be at most 20".

Telegram API reference sendphoto method

we can use sendAudio just like the last example to send audio files.



const fetch = require("node-fetch");
const fs = require("fs");
const FormData = require("form-data");

let readStream = fs.createReadStream("./audio.mp3");

let form = new FormData();

form.append("audio", readStream);
form.append("title", "audio dev test");// to show as the title in chat

fetch(
  `https://api.telegram.org/bot<token>/sendAudio?chat_id=-<chat id>`,

  {
    method: "POST",
    body: form,
  }
)
  .then((res) => res.json())
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.log(error);
  });

limits provided by the telegram when using sendAudio API

"Your audio must be in the .MP3 or .M4A format. On success, the sent Message is returned. Bots can currently send audio files of up to 50 MB in size, this limit may be changed in the future."

Telegram API reference sendaudio method

And the list goes on and on for documents, voice messages,animations , videos etc. you can find all the provided methods in the Telegram reference.

Thanks for reading till the end 🙌

share your thoughts in the comments section.

popular games and some facts about them

Rajitha Gunathilake — Wed, 10 Mar 2021 09:10:39 +0000

Hi everyone,

In this blog post, I will list some popular games and some details about them. so without further ado let's start.

1. Grand Theft Auto V

Game engine - Rockstar Advanced Game Engine (RAGE)
Developer - Rockstar North

Grand Theft Auto V aka GTAV is an action-adventure game with the first release in 2013. even though this game is nearly 8 years old, it is still a very popular game, with the online GTAV. GTAV is the latest game in the Grand Theft Auto franchise. there are rumors about the upcoming GTA 6 with a female protagonist but still, nothing official has been declared. GTAV is developed using Rockstar Advanced Game Engine (RAGE). RAGE game engine is a proprietary game engine developed by Rockstar Game Studios. GTAV game is second in the most sold video game of all time with over 140 million copies sold. although it is not listed, we can get an idea that rage is written using c++, from their careers page

2. Red Dead Redemption 2

Game engine - Rockstar Advanced Game Engine (RAGE)
Developer - Rockstar Studios

Red Dead Redemption 2 is a Western-themed action-adventure game released in 2018 by Rockstar Studios. this game is developed using Rockstar Advanced Game Engine (RAGE). this is the latest game of the Red Dead Redemption series. the game was first released for PlayStation 4 and Xbox One in October 2018, and for Microsoft Windows and Stadia in November 2019.

3. The Witcher 3: Wild Hunt

Game engine - REDengine 3
Developer -CD Projekt Red
Written in - C++, C#

The Witcher 3: Wild Hunt developed by CD Projekt Red aka CDPR a polish game studio. The Witcher 3 was released in 2015 as the latest game in the witcher franchise. The Witcher 3 is an action roleplay game based on book series written by Andrzej Sapkowski.. it is developed using REDengine 3 which is a proprietary game engine developed by CDPR. REDengine 3 is written using c++.

4. Cyberpunk 2077

Game engine - REDengine 4
Developer -CD Projekt Red
Written in - C++, C#

Cyberpunk 2077 is the most anticipated game in 2020 which is also developed by CD Projekt Red. Cyberpunk 2077 is an action role-playing game. Cyberpunk 2077 plot is set in a dystopian future in 2077. Cyberpunk 2077 also featured starring Keanu Reaves in a role as Johnny Silverhand in-game. Cyberpunk 2077 uses their proprietary REDengine 4 which is a successor of REDengine 3 which is also written in c++.

5. Assassin's Creed Valhalla

Game engine - AnvilNext 2.0
Developer - Ubisoft Montreal
Written in - C++, C#

Assassin's Creed Valhalla is the latest release of the popular Assassin's Creed series released in 2020. this game is an action role-playing video game. this game is developed by Canadian-based Ubisoft Montreal Studios and published by Ubisoft. this is the latest release of the popular Assassin's Creed series.

6. Horizon Zero Dawn

Game engine - Decima
Developer - Guerrilla Games

Horizon Zero Dawn is an action role-playing game released in 2017. this is developed by Guerrilla Games which is based in Amsterdam and published by Sony Interactive Entertainment. Horizon Zero Dawn The story is set in the 31st century with advanced robotic creatures. this game is developed using the Decima game engine which is proprietary to Guerrilla Games. although it is not listed we can assume that Decima also uses c++ based on their careers page

7. Far Cry 5

Game engine - Dunia Engine
Developer - Originally developed by Crytek and modified by Ubisoft Montreal
Written in - C++

Far Cry 5 is a first-person shooter game released in 2018. this game is developed by Ubisoft Montreal and Ubisoft Toronto and published by Ubisoft. this game is developed using Dunia Engine. Dunia Engine is a software fork of the CryEngine that was originally developed by Crytek, with modifications made by Ubisoft Montreal.this game engine is written in c++.

8. Fortnite

Game engine - Unreal Engine 4
Developer - Epic Games
Written in - C++, C#

Fortnite is an online video game developed by Epic Games and released in 2017.first this game came as a battle royal game and now it is expanded to several game modes. this game is developed by Unreal Engine 4 that is also developed by Epic Games. this game got a huge anticipation past year with game streamer playing this game.

9. Dota 2

Game engine - Valve Corporation
Developer - Epic Games
Written in - C++

Defense of the ancient 2 aka DOTA2 is a multiplayer online battle arena (MOBA) video game developed and published by Valve Corporation. DOTA2 is a sequel to DOTA 1 which was a community-created mod for Blizzard Entertainment's Warcraft III: Reign of Chaos and its expansion pack. this game is developed and published by Valve Software which is an American video game and digital distribution company. Valve also owns the popular game digital distribution service Steam. DOTA2 is developed using the Source 2 game engine. Source 2 is a proprietary game engine developed by Valve as the successor to the Source engine. Source 2 is written in c++.

10. Among Us

Game engine - Unity
Developer - Innersloth
Written in - C++ , C#

Among Us is an online multiplayer social deduction game developed and published by American game studio Innersloth. this game got huge popularity in 2020 due to many well-known Twitch streamers and YouTubers playing it. this game is developed using the Unity game engine. Unity is a proprietary cross-platform game engine developed by Unity Technologies. among us is available on platforms such as Andriod and IOS because this game uses Unity game engine.

11. Apex Legends

Game engine - Valve Corporation
Developer - Epic Games
Written in - C++

Apex Legends is a free-to-play first-person hero shooter battle royale game developed by Respawn Entertainment published by Electronic Arts. Apex Legends surpassed over 25 million players by the end of its first week, and 50 million within its first month with huge anticipation. The game is set in the same science fiction universe as Respawn Entertainment's Titanfall and Titanfall 2. The game is built using a modified version of Valve Corporation's Source engine.

12.Minecraft

Developer - Mojang Studios
Written in - java

Minecraft is a sandbox video game developed by Swedish video game studio Mojang released in 2009. The game was created by Markus "Notch" Persson in the Java programming language and later he set up a video game company, Mojang with the money earned from the game. Minecraft is developed using lwjgl library written in java. this is not considered as a game engine and used as a library to work with java API's. this game currently holds the title of best-selling video game of all time with over 200 million copies sold. this is also the only game in this list that is written other than in c family languages.

Thank you for reading until the end.

Please do correct me if I missed something, and also share your valuable thoughts in the comment section

What is your favorite game. Drop down in the comment section below.

Stay safe

Cheers 🥂 , Have a Nice Day.

Publish Gatsby Blog to GitHub Pages with GitHub Actions

Rajitha Gunathilake — Sat, 15 Aug 2020 17:37:52 +0000

This workflow will build and publish a Gatsby blog to the GitHub Pages and notify status via Telegram.

My Workflow

This workflow will build the code on dev branch and then copy build files to the master branch. Then it will commit those files and push them to publish the Blog on GitHub Pages.

This workflow will trigger on 2 events

on push to dev branch
cron job runs daily at 0800h


on:
  push:
    branches: [dev]
  schedule:
    - cron: "0 8 * * *"

cron job is used because my blog use nasa image of the day as it's background image and it is updating daily .This is not mandatory and can be omitted based on requirement .

After that, workflow will delete everything in the master branch and then checkout to dev branch and start building . After building it will copy the build files(on public folder) to master branch and push those changes to publish to GitHub Pages.


   steps:
      - name: checkout master  branch # checkout master  branch
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      - name: remove all files # remove files.
        run: |
          rm -rf *
      - name: create CNAME file # remove files.
        run: |
          echo "rizkyrajitha.me" > CNAME
      - name: checkout dev  branch #checkout dev  branch into temp folder.
        uses: actions/checkout@v2
        with:
          ref: dev
          path: temp
          persist-credentials: false

      - name: run yarn install and build # go to temp folder and run npm build to create files.
        run: |
          cd temp
          yarn install
          yarn build
      - name: move files # move the public built files into root dir and remove others.
        if: ${{ success() }}
        run: |
          mv temp/public/* ./
          rm -rf temp
      - name: Commit files for change # commit
        if: ${{ success() }}
        run: |
          git config --local user.email "action@github.com"
          git config --local user.name "GitHub Action"
          git add .
          git commit -m "Add changes"
      - name: Push changes #push files into master branch
        if: ${{ success() }}
        uses: ad-m/github-push-action@master
        with:
          BRANCH: master
          github_token: ${{ secrets.GITHUB_TOKEN }}
          force: true

After building and publishing blog a telegram message is send to a specified chat to notify the workflow status(success , Cancelled or failure) . TELEGRAM_BOT_ID , TELEGRAM_CHAT_ID is required . other fields can be omitted on your preference


      - name: Notify via TELEGRAM BOT
        uses: RizkyRajitha/github_actions_notify_telegram@v1
        with:
          TELEGRAM_BOT_ID: ${{ secrets.TELEGRAM_BOT_ID }}
          TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
          CUSTOMMESSAGESUCCESS: "Published \xF0\x9F\x9A\x80 Blog via GitHub Actions"
          CUSTOMMESSAGESFAILURE: "Publishing  Blog \xE2\x9B\x94 via GitHub Actions Failed"
          CUSTOMMESSAGESCANCELLED: "Publishing  Blog \xE2\x9B\x94 via GitHub Actions Cancelled"
          JOBSTATUS: ${{ job.status }}
          GITHUB_RUN_NUMBER: ${{ github.run_number }}
          GITHUB_REPOSITORY: ${{ github.repository }}
          GITHUB_RUN_ID: ${{ github.run_id }}
          GITHUB_ACTOR: ${{ github.actor }}
          GITHUB_EVENT_NAME: ${{ github.event_name }}
          GITHUB_SHA: ${{ github.sha }}

Actions used

actions/checkout@v2 : for checking out branches
ad-m/github-push-action@master : push build files to master branch , published via GitHub Pages
RizkyRajitha/github_actions_notify_telegram@v1 : send telegram notifications

Submission Category:

DIY Deployments

Yaml File or Link to Code

main.yml file

Telegram Notify action Repo

RizkyRajitha / github_actions_notify_telegram

Telegram Notification for Github action

Guide to create a bot and adding to telegram chat

add TELEGRAM_BOT_ID and TELEGRAM_CHAT_ID to the secrets in github repo

Example


name: Telegram Notification


on:
  push:
    branches: [master]

jobs:
  Publish:
    runs-on: [ubuntu-latest]

    steps:
      - name: checkout master  branch # checkout master  branch
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      - name: run yarn install and build # go to temp folder and run npm build to create files.
        run: |
          cd temp
          yarn install
          yarn build

      - name: Notify via TELEGRAM BOT
        uses: RizkyRajitha/github_actions_notify_telegram@v1
        with:
          TELEGRAM_BOT_ID: ${{ secrets.TELEGRAM_BOT_ID }}
          TELEGRAM_CHAT_ID: ${{ secrets.TELEGRAM_CHAT_ID }}
          CUSTOMMESSAGESUCCESS: "Published \xF0\x9F\x9A\x80 Blog via GitHub Actions"
          CUSTOMMESSAGESFAILURE: "Publishing  Blog \xE2\x9B\x94 via GitHub Actions Failed"
          CUSTOMMESSAGESCANCELLED: "Publishing  Blog \xE2\x9B\x94 via GitHub Actions Cancelled"
          JOBSTATUS: ${{ job.status }}
          GITHUB_RUN_NUMBER: ${{ github.run_number }}
          GITHUB_REPOSITORY: ${{ github.repository }}
          GITHUB_RUN_ID: ${{ github.run_id }}
          GITHUB_ACTOR: ${{ github.actor }}
          GITHUB_EVENT_NAME: ${{ github.event_name }}
          GITHUB_SHA: ${{ github.sha }}

Create a JavaScript

…

View on GitHub

Additional Resources / Info

Blog using this workflow

RizkyRajitha / RizkyRajitha.github.io

Reference https://github.community/t/user-github-pages-site-auto-deploy-from-another-branch-on-push/17912

Using Airtable as a database

Rajitha Gunathilake — Sun, 17 May 2020 12:44:44 +0000

Hi everyone,

I recently used Airtable and found out that it has an awesome API, so we can use it as a simple yet useful way as a database.

so let's get started

first, we will create an npm project and spin up an expressjs server

if you are new to express check out my post on hello world in express.

Build your first ExpressJs server from scratch.

Rajitha Gunathilake ・ Dec 1 '19 ・ 4 min read

#node #javascript #express

so after initializing the project lets install dependencies to start the server.

body-parser - a middleware to parse the body of incoming requests
cors - ho handle cors headers
express - to spin up our expressjs server
morgan - a middleware utility tool that logs the server events (this is not essential but useful for debugging)
node-fetch - fetch API for node environment

npm i express cors morgan body-parser node-fetch

so after installing everything lets create our app.js file.
here we will create our express server

const express = require("express");
const app = express();
const cors = require("cors");
const bp = require("body-parser");
const fetch = require("node-fetch");

app.use(cors());
app.use(bp.urlencoded({ extended: false }));
app.use(bp.json());
app.use(require("morgan")("dev"));

const port = process.env.PORT || 5000;


app.listen(port, () => {
  console.log("listning on " + port);
});

and run this by node app.js

now our server-side is up let's peek to Airtable.

create a Airtable account, and create a new base.

next name it

and then open a new base. and you will see something similar to this.

now customize it as you like. I will add two fields name and country.
and I will add few records so when we fetch data it has somethings to show.

after everything, mine looks like this.

now let's head to account to get our API KEY which we will use to authenticate with the Airtable API.

we also need our base id to identify our base and table name . to get those data, visit the API docs page.

select base you created

now copy base id and table name from the docs. base id is led by app and table name is the name you gave when you customize the table.

after creating an API key and getting necessary information,
let's head back to our server.

I created a separate folder for configs and keys, but you can also directly use the API key in the code since this is development purposes only. but make sure you don't commit your keys with the code.

Airtable gives us 4 basic operations with the API

Read
Create
Update
Delete

Reading Table

I will create a get route http://localhost:5000/view to view existing data in our table

const express = require("express");
const app = express();
const cors = require("cors");
const bp = require("body-parser");
const fetch = require("node-fetch");

app.use(cors());
app.use(bp.urlencoded({ extended: false }));
app.use(bp.json());
app.use(require("morgan")("dev"));

const AIRTABLEAPI = require("./config/env").airtableapikey; // import airtable api key 
const AIRTABLEBASEID = require("./config/env").airtablebaseid;// import airtable base  id 
const AIRTABLETABLENAME = "seriescharacters"; // table name

const port = process.env.PORT || 5000;

app.get("/view", (req, res) => {

//we need to send a "GET" request with our base id table name and our API key to get the existing data on our table. 

  fetch(
    `https://api.airtable.com/v0/${AIRTABLEBASEID}/${AIRTABLETABLENAME}?view=Grid%20view`,
    {
      headers: { Authorization: `Bearer ${AIRTABLEAPI}` } // API key
    }
  )
    .then((res) => res.json())
    .then((result) => {
      console.log(result);
      res.json(result);
    })
    .catch((err) => {
      console.log(err);
    });
});

if we send a GET request to http://localhost:5000/view via postman we will get a response with our existing data in seriescharacters table

console output

Create new record

now let's add a new record by creating a POST route http://localhost:5000/create.

create handler

app.post("/create", (req, res) => {
  console.log(req.body);

  var datain = req.body;

  var payload = {
    records: [
      {
        fields: datain,
      },
    ],
  };

//we need to send a "POST" request with our base id, table name, our API key, and send a body with the new data we wish to add.

  fetch(`https://api.airtable.com/v0/${AIRTABLEBASEID}/${AIRTABLETABLENAME}`, {
    method: "post", // make sure it is a "POST request"
    body: JSON.stringify(payload),
    headers: {
      Authorization: `Bearer ${AIRTABLEAPI}`,   // API key
      "Content-Type": "application/json",  // we will recive a json object
    },
  })
    .then((res) => res.json())
    .then((result) => {
      console.log(result);
      res.json(result);
    })
    .catch((err) => {
      console.log(err);
    });
});

if we send a POST request to http://localhost:5000/create with our data via postman we will get a response with our data including the one we just added seriescharacters table.

also, we can see the updated table in real-time from Airtable.

Updating a record

update handler

app.post("/update", (req, res) => {
  console.log(req.body);

  var datain = req.body;

  var payload = {
    records: [
      {
        id: datain.id,
        fields: datain.updatedata,
      },
    ],
  };

//to update a record we have to send the new record with it's the id to Airtable API. 


  fetch(`https://api.airtable.com/v0/${AIRTABLEBASEID}/${AIRTABLETABLENAME}`, {
    method: "patch", // make sure it is a "PATCH request"
    body: JSON.stringify(payload),
    headers: {
      Authorization: `Bearer ${AIRTABLEAPI}`, // API key
      "Content-Type": "application/json",
    },
  })
    .then((res) => res.json())
    .then((result) => {
      console.log(result);
      res.json(result);
    })
    .catch((err) => {
      console.log(err);
    });
});

if we send a POST request to http://localhost:5000/update with our data via postman we will get a response with the updated record.

Deleting a record

now let's delete a record by creating a POST route http://localhost:5000/delete.

delete handler

app.post("/delete", (req, res) => {
  console.log(req.body);

//we need to send a "DELETE" request with our base id table name, the id of the record we wish to delete and our API key to get the existing data on our table. 

  fetch( `https://api.airtable.com/v0/${AIRTABLEBASEID}/${AIRTABLETABLENAME}/${req.body.id}`,
    {
      method: "delete", // make sure it is a "DELETE request"
      // body: JSON.stringify(payload),
      headers: {
        Authorization: `Bearer ${AIRTABLEAPI}`, // API key
        //   "Content-Type": "application/json",
      },
    }
  )
    .then((res) => res.json())
    .then((result) => {
      console.log(result);
      res.json(result);
    })
    .catch((err) => {
      console.log(err);
    });
});

if we send a POST request to http://localhost:5000/delete with the id of the record we need to delete via postman we will get a response with delete record id and deleted flag.

We successfully went through all the CRUD operations in Airtable 😎.

This is very useful if you have a spreadsheet and you need to update data programmatically from your apps .plus Airtable has many more features other than spreadsheets, so you can suit your needs.

final app.js file

Thank you for reading until the end

Stay safe

Cheers 🥂 , Have a Nice Day.

TryCargo One Click Store maker for your Business - twiliohackathon

Rajitha Gunathilake — Tue, 07 Apr 2020 14:40:29 +0000

TryCargo 👀 what is that?

TryCargo is a platform build for small scale stores to create their online stores without a fuss.

Motivation

we got this idea from the lock down of our country because of recent pandemic of COVID19 . because of the lock down people cannot reach stores to get their supplies and most of stores even supermarket in our country lacks IT infrastructure . because of that many people couldn't get supplies . hence we came up with TryCargo.

Problem addressed 🛒

most of the small scale stores lack IT infrastructure so they cannot compete in the online market.
and small scale business cannot afford those it infrastructure because they lack the capital investment and it involves huge risk.
but with this TryCargo platform will give the opportunity to create their own online store with great quality without a hustle.

Design of TryCargo 📊

tryCrago will cater 2 types of users

shop owner - shop owner can start the business with our platform
online customer - online customers can browse trycargo to find their needs and order them from their respective online stores

high-level use case diagram

features of trycargo

crate online store page with the details about the business - shop owner 🧔
online store page can be customized by adding and editing and removing products - shop owner 🧔
view pending order and order history - shop owner 🧔
send notifications about order dispatch and order arrived - shop owner 🧔
browse online stores - customers 🙍‍♂️
add and remove items from shopping cart - customers 🙍‍♂️
place orders - customers 🙍‍♂️
view previous orders - customers 🙍‍♂️
add comments about stores and products - customers 🙍‍♂️
order tracking for customers 🙍‍♂️

Payments 💰

TryCargo platform will support cash on delivery payment system.

Further implementations ✨

the online payment system will depend on the time, and if we have enough time we will try to implement it too. but we will keep in the safe zone for now.

Tech stack ⚙

Frontend - react
Backend - nodejs
Database - MongoDB
Sms notifications - twillio api
Email notifications - sendgrid by twillio

This is a project came up with me and my friend Ishanka, and we will be working on this together.

.ltag__user__id__240576 .follow-action-button { background-color: #000000 !important; color: #ffffff !important; border-color: #000000 !important; }

Ishanka D Senevirathne

My thirst for knowledge cannot be quenched.

working github repo

RizkyRajitha / trycargo

TryCargo 👀 what is that?

TryCargo is a platform build for small scale stores to create online ordering systems.

Problem addressed 🛒

most of the small scale stores lack IT infrastructure so they cannot compete in the online market and small scale business cannot afford those it infrastructure because they lack the capital investment and it involves huge risk but with this TryCargo platform will give the opportunity to create their own online store with great quality without a hustle.

design of TryCargo 📊

tryCrago will cater 2 types of users

shop owner - shop owner can start the business with our platform
online customer - online customers can browse trycargo to find their needs and order them from their respective online stores

high-level use case diagram

features of trycargo

crate online store page with the details about the business - shop owner 🧔
online store page can be customized…

View on GitHub

Upadates

2020 / 4 / 8

created login signup for shop owner and customer.

2020 / 4 /11

created landing page and login for users

2020 / 4 /16

created dashboard for customer and shop owner , add items to shop .

How i create a COVID-19 Data Visualization with Nivo and React

Rajitha Gunathilake — Sat, 04 Apr 2020 06:27:51 +0000

Hi everyone,

I recently made a Data Visualization about Sri Lanka COVID-19 statistics.
by the time I am writing, there was no public API to get past statistics of the COVID-19 pandemic but there was an API to get the most recent statistics. So i created one 😉.

Automate updates to database

I created a database filled out past data that was missing and created a script that updates my database with the most recent data, by that data is automatically updated without any manual tasks. for database i used MongoDB since i am very comfortable with MongoDB and also MongoDB atlas give a great free plan.

i wrote a simple JavaScript script to make a request for every 30 seconds and then if there are any latest updates update my database with those changes.pretty simple right.even though it can run locally to push changes to database , i used a aws ec2 instance to run it because it is more convenient that running it in my local PC forever.i know ec2 instance is a overkill for this purpose but this was the only option i had at the time. and if you know a better option please let me know in the comments section , like pretty please 🙄 .

Creating frontend

Frontend is build with React and styled with bootstrap , nothing fancy their. I tried out a few different data visualization libraries, but for me nivo worked out the best. it was very clear to understand and packed with tons of features.
nivo also supports responsive layouts, it looks fluid in mobile displays.it is very important to consider building responsive web apps since nowadays most of the users visit with their mobile devices. so a reasonable amount of your website's traffic will come from mobiles.

Creating API

for my API, I chose to go with AWS lambda because it is easy to spin up, and this implementation only needed one API endpoint. so I configured lambda function to fetch data and send them to frontend.

Deployment

After wiring up everything, I used zeit to deploy the frontend, because it is really easy to deploy and it supports git integrations.used MongoDB atlas for the production database, and aws lambda for API and aws ec2 to run automate script.

Telegram bot

As a part of this project i made a telegram channel with a telegram bot , to sent notifications about the pandemic.this was embedded to the automated script to sent a post request to telegram API in new update. more details on how to send telegram messages with bots is in this tutorial.