DEV Community: Aditya Chukka

Add PostgreSQL to Express Server

Aditya Chukka — Thu, 03 Jun 2021 04:17:33 +0000

In this section, we will add postgres database connection to node server written in express.

Dependencies

An Express Node Server running locally or in a remote server.

Please check our earlier post on routing requests on a node server

A PostgreSQL database running locally or in a remote server.

If you are feeling ambitious, please refer to this commit for source code

Database Setup

Download and install latest version of PostgreSQL

At the time of writing this post, the latest version if 13.3
Create a database initialization script init.sql
Create table for item

-- Create Table item
CREATE IF NOT EXISTS TABLE item (
    id NUMERIC PRIMARY KEY,
    task VARCHAR(250) NOT NULL,
    priority NUMERIC NOT NULL,
    date TIMESTAMP DEFAULT NOW()
);

Add an initial set of items

-- Insert initial set of items
INSERT INTO item (id, task, priority, date)
VALUES (1, 'Prepare Coffee', 1, '2021-05-01'),
    (2, 'Boil Eggs', 2, '2021-05-01'),
    (3, 'Buy Milk', 3, '2021-05-01'),
    ON CONFLICT DO NOTHING;

Create table for user

-- Create Table user
CREATE TABLE "user" (
    id NUMERIC PRIMARY KEY,
    first_name VARCHAR(250) NOT NULL,
    last_name NUMERIC NOT NULL
);

Add initial set of users

-- Insert initial set of users
INSERT INTO 'user' (id, first_name, last_name)
VALUES (1, 'John', 'Doe'),
    (2, 'Brad', 'Gabson'),
    (3, 'Allen', 'Ray'),
    ON CONFLICT DO NOTHING;

Stitching all above parts together we get init.sql

Define Models

Before we store the actual resource, we need to define them

Create a module for models models.ts
Define an interface for item

export interface item {
  id: number;
  task: string;
  priority: number;
  date: Date;
}

Define an interface for user

export interface user {
  id: number;
  first_name: string;
  last_name: string;
}

Your completed models.ts should look like below

Connect to PostgreSQL

Install node-pg module

npm install pg

At this point we are ready to interact with our data storage. Let's create a module for interacting with postgres database, datasource.ts

Execute query on database

Create a method (execute) to interact with postgreSQL given a query

const execute = async (query: string): Promise<pg.QueryResult> => {
  const client = new pg.Client(CONFIG);
  await client.connect();
  // It is not a good practice to create a client for every single request. Have a single instance of client per service

  const result = await client.query(query);
  await client.end;
  return result;
};

In this method, we initialize a client to postgres database using config
- An example config should look like this

export const CONFIG = {
    host: "127.0.0.1",
    user: "postgres",
    port: 5433,
    ssl: false,
    database: "postgres",
    password: "letskeepitreal",
};

⚠️ Please do not commit your config to git or any other code hosting service

Once the client is initialized, we execute the query passed as input
Disconnect the client
Finally return the result of executed query.

Q: Why are we using Promises ?
We use Promise for three major reasons

pg.Client operations are asynchronous
- Makes the code easy to follow
- Provides better control than callbacks

Fetch items from database

Add a method to fetch item(s) based on id

export const get_item = async (id: number): Promise<item> => {
  const query = `SELECT * from item where id=${id}`;
  return execute(query).then((res) => {
    if (res.rowCount == 0) {
      throw new Error(`No item was found with id: ${id}`);
    }
    const itemRow = res.rows[0];
    return to_item(itemRow);
  });
};

In this method, we select records from item table that match the given id
If there are no such items, we throw an exception
Else pick the first item row from the resulting database rows
Finally convert the database item row into our item interface using to_item method

const to_item = (itemRow: pg.QueryResult<any>): item => {
    return {
        id: parseInt(itemRow["id"]),
        task: itemRow["task"],
        priority: parseInt(itemRow["priority"]),
        date: new Date(itemRow["date"]),
    };
};

Insert items into database

Create a method to add a given item into postgres database

export const add_item = (item: item): Promise<number> => {
  const query = `INSERT INTO item (task, priority, date) VALUES ('${item.task}', ${item.priority}, '${item.date}') RETURNING id`;
  return execute(query).then((res) => {
    if (res.rowCount == 0) {
      throw new Error(`Cannot add item ${item}`);
    }
    return res.rows[0]["id"];
  });
};

In this method, we prepare the insert query that returns the id of newly inserted record
Next execute the query we prepared
If there is no change is rowCount, i.e no records are inserted, we throw an Error.
Else, return the id of the item we inserted

Update items in database

Create a method to update an item with given id in the database

export const update_item = (item: item, id: number): Promise<void> => {
  const query = `UPDATE item SET task='${item.task}', priority=${item.priority}, date ='${item.date}' WHERE id=${id}`;
  return execute(query).then((res) => {
    if (res.rowCount == 0) {
      throw new Error(`Cannot update item ${item}`);
    }
  });
};

In this method, we prepare the update query based on the item and item we receive
Next execute the query we prepared
If there is no change is rowCount, i.e no records are updated , we throw an Error.

Fetch users from database

Add a method to fetch users based on id

export const get_user = async (id: number): Promise<user> => {
    const query = `SELECT * FROM "user" where id=${id}`;
    return execute(query).then((res) => {
      if (res.rowCount == 0) {
        throw new Error(`No user was found with id: ${id}`);
      }
      const userRow = res.rows[0];
      return to_user(userRow);
    });
  };

In the above method, we select records from user table that match the given id
If there are no such users, we throw an exception
Else, pick the first item from the resulting database rows
Finally convert the database item row into our user interface using to_user method

const to_user = (userRow: pg.QueryResult<any>): user => {
    return {
        id: parseInt(userRow["id"]),
        first_name: userRow["first_name"],
        last_name: userRow["last_name"],
    };
};

Insert users into database

Create a method to add a given user into postgres database

export const add_user = (user: user): Promise<number> => {
  const query = `INSERT INTO "user" (first_name, last_name) VALUES ('${user.first_name}', '${user.last_name}') RETURNING id`;
  return execute(query).then((res) => {
    if (res.rowCount == 0) {
      throw new Error(`Cannot add user ${user}`);
    }
    return res.rows[0]["id"];
  });
};

In this method, we prepare the insert query that returns the id of newly inserted record
Next execute the query we prepared
If there is no change is rowCount, i.e no records are inserted, we throw an Error.
Else, return the id of the user we inserted

Update users in database

Create a method to update an user with given id in the database

export const update_user = (user: user, id: number): Promise<void> => {
  const query = `UPDATE "user" SET first_name='${user.first_name}', last_name='${user.last_name}' WHERE id=${id}`;
  return execute(query).then((res) => {
    if (res.rowCount == 0) {
      throw new Error(`Cannot update user ${user}`);
    }
  });
};

In this method, we prepare the update query based on the item and item we receive
Next execute the query we prepared
If there is no change is rowCount, i.e no records are updated , we throw an Error.

Combining all the operations together our datasource.ts module should look like below

Connect datasource to items router

In this section, we will connect HTTP endpoints in user router with relevant methods in data source

Import methods from data source

import { add_item, get_item, update_item } from "./datasource";

GET Request

// GET Method
router.get("/:id", async (req, res) => {
  const id = parseInt(req.params.id);
  try {
    const item = await get_item(id);
    if (!item) {
      res.send(`Cannot find item with id: ${id}`);
    } else {
      res.send(item);
    }
  } catch (error) {
    res.send(error.message);
  }
});

Call get_item based on id we receive from request parameters
If there is an item, send the item as response
If there is no item, send an message Cannot find item ...
If there is an error, send the error message

POST Request

// POST Method
router.post("/", async (req, res) => {
  try {
    const item = req.body;
    const id = await add_item(item);
    res.send(`Added item with id: ${id}`);
  } catch (error) {
    res.send(error.messsage);
  }
});

Call add_item based on the item we receive from request body
If there is an error, send the error message as response
Else, return the id as response

PUT Request

// PUT Method
router.put("/:id", async (req, res) => {
  const id = parseInt(req.params.id);
  try {
    const item = req.body;
    await update_item(item, id);
    res.send(`Updated item with id: ${id}`);
  } catch (error) {
    res.send(error.message);
  }
});

Call update_item based on the item we receive from request body and id we receive in request parameters
If there is an error, send the error message as response
Else, return the id as response

Combining all requests and response, our updated items router should look below

Connect datasource to users router

In this section, we will connect HTTP endpoints in user router with relevant methods in data source

Import methods from data source

import { add_user, get_user, update_user } from "./datasource";

GET Request

// GET Method
router.get("/:id", async (req, res) => {
  const id = parseInt(req.params.id);
  try {
    const item = await get_user(id);
    if (!item) {
      res.send(`Cannot find user with id: ${id}`);
    } else {
      res.send(item);
    }
  } catch (error) {
    res.send(error.message);
  }
});

Call get_user based on id we receive from request parameters
If there is an item, send the item as response
If there is no item, send an message Cannot find user ...
If there is an error, send the error message

POST Request

// POST Method
router.post("/", async (req, res) => {
  try {
    const user = req.body;
    const id = await add_user(user);
    res.send(`Added user with id: ${id}`);
  } catch (error) {
    res.send(error.message);
  }
});

Call add_user based on the user we receive from request body
If there is an error, send the error message as response
Else, return the id as response

PUT Request

// PUT Method
router.put("/:id", async (req, res) => {
  const id = parseInt(req.params.id);
  try {
    const user = req.body;
    await update_user(user, id);
    res.send(`Updated user with id: ${id}`);
  } catch (error) {
    res.send(error.message);
  }
});

Call update_user based on the user we receive from request body and id we receive in request parameters
If there is an error, send the error message as response
Else, return the id as response

Combining all requests and response, our updated users router should look below

Now we are ready to run our server

Running the server

If you are using node to run your server, use the flag --es-module-specifier-resolution=node
This tells node to import modules without extensions .js or .mjs
Update your start script in package.json

  "scripts": {
    "start": "tsc && node --es-module-specifier-resolution=node dist/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
..

Run your server by using the command npm start
You should see a message similar to below on your terminal

$ npm start

> tdsvc@0.1.0 start D:\Workspace\blog-series\tdsvc
> tsc && node --es-module-specifier-resolution=node dist/index.js  

server is listening on port: 3000

Testing the requests

Run the server
Open postman app or any other REST Client

Requests on item

Send a GET request to read an item
- Method: GET
- URL: http://localhost:3000/tdsvc/item/1
- You should see a response as shown below
Send a POST request to write an item
- Method: POST
- URL: http://localhost:3000/tdsvc/item/
- Request Body with json format
```
  {
    "id": 4,
    "task": "Buy Corn",
    "priority": 4,
    "date": "2021-05-03"
  }
```
- You should see a response as shown below
Send a PUT request to update an item
- Method: PUT
- URL: http://localhost:3000/tdsvc/item/4
- Request Body with json format
```
   {
     "id": 4,
     "task": "Buy Corn Chips",
     "priority": 4,
     "date": "2021-05-04"
   }
```
- You should see a response as shown below

Requests on user

Send a GET request to read an user
- Method: GET
- URL: http://localhost:3000/tdsvc/user/1
- You should see a response as shown below
Send a POST request to write an user
- Method: POST
- URL: http://localhost:3000/tdsvc/user/
- Request Body with json format
```
  {
    "id": -1,
    "first_name": "Jeremey",
    "last_name": "Solo"
  }
```
- You should see a response as shown below
Send a PUT request to update an user
- Method: PUT
- URL: http://localhost:3000/tdsvc/user/1
- Request Body with json format
```
   {
     "id": 4,
     "first_name": "Jeremy",
     "last_name": "Solo"
   }
```
- You should see a response as shown below

Please check the full code in this commit

❤️ Congratulations 👏, you have successfully added PostgreSQL to your node server running on Express.

Thanks for reading through the entire article. Please reach out with questions, comments and/or feedback.

Routing Requests in Node Server

Aditya Chukka — Sun, 30 May 2021 03:29:09 +0000

In this post, we will learn how to route requests using Router on Express Server.

Preface

Routing determines how an application responds to a request for particular endpoint.

For an introduction to routing, please see Express docs

When a server manages multiple objects it results in serving multiple endpoints. At this point, it would become harder to main the application logic at one place. Express helps us divide the application logic based on objects it serves into individual routes.

We will demonstrate a simple example of routing on a node server

You can skip to tutorial and refer to this commit for source code

Requirements

This post assumes users have the knowledge of basic express server. If you are not familiar with it please refer to demo example
We will be using postman to test our end points

Basic Application

In this section we will create two routes user and item.
For each of these routes we will add GET, PUT and POST HTTP Requests.

Route for items

Create a file items.ts
Create router from Express

import express from "express";
export const router = express.Router();

Add HTTP GET Request to read an item

// GET Method
router.get("/:id", (req, res) => {
  res.send(`You are requesting an item with id: ${req.params["id"]}`);
});

Add HTTP POST Request to write an item

// POST Method
router.post("/", (req, res) => {
  res.send(`You are posting an item with params: ${req.params}`);
});

Add HTTP PUT Request to update an item

// PUT Method
router.put("/:id", (req, res) => {
  res.send(`You are updating an item with id: ${req.params["id"]}`);
});

Stitching all the above parts together we get our items.ts module

Using `item` Route in app

Create index.ts if you have not already
Import router from items.ts

import express from "express";
import { router as item_router } from "./items";

Create an express app if you haven't already

const app = express();
const port = 3000;

Route requests on items on app to item_router

app.use("/tdsvc/item", item_router);

Listen to requests on the port (3000)

app.listen(port, (err?) => {
  if (err) {
    return console.error(err);
  }
  return console.log(`server is listening on port: ${port}`);
});

Stitching all the parts together, we get our index.ts

Running the server

If you are using node to run your server, use the flag --es-module-specifier-resolution=node
This tells node to import modules without extensions .js or .mjs
Update your start script in package.json

  "scripts": {
    "start": "tsc && node --es-module-specifier-resolution=node dist/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
..

Run your server by using the command npm start
You should see a message similar to below on your terminal

$ npm start

> tdsvc@0.1.0 start D:\Workspace\blog-series\tdsvc
> tsc && node --es-module-specifier-resolution=node dist/index.js  

server is listening on port: 3000

Testing the requests on item

Open postman app or browser plugin
Send a GET request to read an item
- Method: GET
- URL: http://localhost:3000/tdsvc/item/1
- You should see a response as shown below
Send a POST request to write an item
- Method: POST
- URL: http://localhost:3000/tdsvc/item/
- Request Body with json format
```
  {
    "text": "item 1"
  }
```
- You should see a response as shown below
Send a PUT request to update an item
- Method: PUT
- URL: http://localhost:3000/tdsvc/item/1
- Request Body with json format
```
   {
     "text": "updated item"
   }
```
- You should see a response as shown below

Route for users

Repeat the steps we did for items

Create a file users.ts
Create router from Express

import express from "express";
export const router = express.Router();

Add HTTP GET Request to read an item

// GET Method
router.get("/:id", (req, res) => {
  res.send(`You are requesting an user with id: ${req.params["id"]}`);
});

Add HTTP POST Request to write an item

// POST Method
router.post("/", (req, res) => {
  res.send(`You are posting an user with params: ${req.params}`);
});

Add *HTTP PUT Request * to update an item

// PUT Method
router.put("/:id", (req, res) => {
  console.log(req);
  res.send(`You are updating an user with id: ${req.params["id"]}`);
});

Stitching all the above parts together we get our users.ts module

Using `user` Route in app

Import router from users.ts

import { router as user_router } from "./users";

Route requests on users on app to user_router

app.use("/tdsvc/user", user_router);

Stitching both routes parts together, we get our new index.ts

Testing the requests on users

Run the server
Send a GET request to read an user
- Method: GET
- URL: http://localhost:3000/tdsvc/user/1
- You should see a response as shown below
Send a POST request to write an user
- Method: POST
- URL: http://localhost:3000/tdsvc/user/
- Request Body with json format
```
  {
    "text": "user 1"
  }
```
- You should see a response as shown below
Send a PUT request to update an item
- Method: PUT
- URL: http://localhost:3000/tdsvc/user/1
- Request Body with json format
```
   {
     "text": "updated user"
   }
```
- You should see a response as shown below

Parsing Requests Payload

Add express.json to parse JSON payloads in request body

app.use(express.json());

Add express.urlencoded to parses requests with urlencoded payloads

app.use(express.urlencoded({ extended: true }));

Please check the full code in this commit

❤️ Congratulations 👏, you have successfully routed requests on a node server using Express and TypeScript

Thanks for reading through the entire article. Please reach out with questions, comments and/or feedback.

Create Server using Express and TypeScript

Aditya Chukka — Thu, 27 May 2021 04:46:09 +0000

In this post, we will learn how to create a server using Express and TypeScript

If you are feeling lucky, refer to this commit for full code

Step 1: Setting up the project

Download and install the latest stable version of Node
At the time of writing this post, the recommended version is 14.17.0

$ node --version
v14.17.0

Create a new directory for the service

mkdir tdsvc

Initialize a node application

cd tdsvc
npm init

Fill out the necessary project details to generate a package.json
Set main to dist/index.js
Add start script in the scripts section

"start": "tsc && node dist/index.js"

Add "type": "module" to enable ES5 modules

See this post for more information

Stitching all the above your package.json should look something similar to this

{
  "name": "tdsvc",
  "version": "0.1.0",
  "description": "A Node Server to maitain todolist",
  "main": "dist/index.js",
  "type": "module",
  "scripts": {
    "start": "tsc && node dist/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/achukka/tdsvc.git"
  },
  "keywords": [
    "node"
  ],
  "author": "Aditya Chukka",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/achukka/tdsvc/issues"
  },
  "homepage": "https://github.com/achukka/tdsvc#readme",
  "devDependencies": {
    "@types/express": "^4.17.12",
    "typescript": "^4.3.2"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

Step 2: Installing dependencies

Install typescript locally

npm install --save-dev typescript

Install Express framework

npm install --save express

Install types for Express locally

npm install --save-dev @types/express

Set TypeScript compiler options through tsconfig.json

{
  "compilerOptions": {
    "module": "ESNext",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "lib": ["esnext"]
}

Let's go over some of the options above
- With esModuleInterop we can import CommonJS modules in compliance with es6 modules.
- As the name suggest, we use outDir to specify all the output directory for all transpiled (.js) files. In this post we are settings it to dist
- sourceMap allows debuggers to display the actual TypeScript file
- target specifies the output language level
You can read more about tsconfig in tyescript docs

Step 3: Create a basic server

Create an empty index.ts in src directory

mkdir src
touch src/index.ts

Create an Express application in src/index.ts

import express from "express";

const app = express();

Add a sample port to listen on (Example: 3000)

const port = 3000;

Add a HTTP GET method

app.get("/", (req, res) => {
  res.send("You are listening from express server");
});

Listen for requests on port

app.listen(port, (err?) => {
  if (err) {
    return console.error(err);
  }
  return console.log(`server is listening on ${port}`);
});

Stitching all sections together we get

import express from "express";

const app = express();
const port = 3000;
app.get("/", (req, res) => {
  res.send("You are listening from express server");
});

app.listen(port, (err?) => {
  if (err) {
    return console.error(err);
  }
  return console.log(`server is listening on ${port}`);
});

Step 4: Running the server

You can run your server by npm start
If the above command runs successfully, you should a message in your terminal

> tsc && node dist/index.js

server is listening on 3000

Visit http://localhost:3000 in your browser and you should see something similar

Please find the entire code in this commit

❤️ Congratulations 👏, you have successfully created a server using Express and TypeScript

Thanks for reading through the entire article. Please reach out with questions, comments and/or feedback.

Deploy React App using GitHub Actions

Aditya Chukka — Fri, 21 May 2021 05:21:51 +0000

In this post, we will see to how to deploy react application using GitHub Actions to GitHub Pages

We will be deploying todolist, a react app we have create in an earlier post

Step 1: Add `homepage` to `package.json`

"homepage": "https://<githubusername>.github.io/<app>"

For todolist, this would be

"homepage": "https://achukka.github.io/todolist"

Step 2: Enable GitHub Pages

Create a branch to deploy from (ex: gh-pages)

This helps use keep our source code separate from the static website

Set your source branch (Example: gh-pages) in Settings -> Pages section

Step 3: Create SSH Deploy Key

Generate your deploy key

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f "<your-deploy-branch>" -N ""

You should get two files 1) <deploy-branch>.pub (public key) and <deploy-branch> (private key)

Step 4: Add Keys to GitHub

Add public key to Settings -> Deploy Keys section and Enable Write Access

Add private key as ACTIONS_DEPLOY_KEY to Settings -> Secret Keys.

Step 5: Create workflow for deploy

Create a workflow similar to Build And Test workflow we created in the previous post

Add a step to deploy to gh-pages

- name: deploy to gh-pages
- uses: peaceiris/actions-gh-pages@v3
with:
    deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
    publish_dir: ./build

The above step, The GitHub Action peaceiris/actions-gh-pages uses deploy_key (which we created earlier) to publish files from publish_dir to github pages.

Repo linked here

The complete yaml would look like below

name: Deploy React Application

# Controls when the action will run. 
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  build_test:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x] # We will deploy with only one version of node  

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
      - name: npm ci, build and test
        run: |
          npm ci
          npm run build --if-present
          npm test      
      - name: deploy to gh-pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          publish_dir: ./build

Step 6: Commit your changes

Commit your changes to a new branch
Create a PR onto main branch

Please check this commit for cumulative changes.

If the GithHub Action run successfully ✔️

You should see A commit to your deploy branch (Ex: `gh-pages)

Your React app should be hosted on your homepage

Congratulations 👏. You have now setup a workflow to deploy your react application 👍.

Merge your PR if everything looks good 😉

Thanks for reading through the entire article. Please reach out with questions, comments and/or feedback.

Build and Test React app with GitHub Actions

Aditya Chukka — Wed, 19 May 2021 03:13:09 +0000

In this post, we will see how to setup GitHub Actions to build and test React Applications

GitHub Actions

GitHub Actions helps developer automate tasks with in the software development lifecycle. These actions are event-driven, for example, when someone creates a pull request for repository, the developer can run a command to run unit tests.

Reference: GitHub Actions

Git Workflow

A Git Workflow is a configurable automated process that can run one or more jobs.

Reference: GitHub Docs

GitHub provides a way to setup one or more workflows per project.

Where can I use multiple workflows ?

Following are some examples I can think of

Dev workflow vs Prod workflow
- Your API keys and dependencies could be different
Linting workflow vs Unit Testing Workflow
- Linting is not mandatory for Unit Testing to work
Tests are written in language different from actual application

In one of my projects, I wrote the REST API in dotnet where as the integration tests were written in python.

Setting up a workflow

In this section, we will setup an npm workflow for our react project.

At the time of publishing this article there is no suggested workflow for React Applications

To setup a workflow

Go to the Actions Tab in your repository
Click New Workflow
Click set up a workflow yourself
You should see something like this

The default workflow already configures most of the variables for us

Now let's update the workflow to work with react app

Rename the yaml to build_test_react.yml ```bash

{repo}/.github/workflows/build_test_react.yml


- Remove [workflow_dispatch](https://github.blog/changelog/2020-07-06-github-actions-manual-triggers-with-workflow_dispatch/).
  - We do not need it for the purpose of this article.

- Rename `build` to `build_test`

- Add a [strategy](https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions#jobsjob_idstrategy) block to jobs
  - We use this block to specify node versions

```yaml


strategy:
  matrix:
    node-version: [12.x, 14.x, 15.x]

In the steps block we can specify what commands (step) we can run. But before that we need to specify the version of node to be used

Add a block to specify node version through ${{ matrix.node-version }} and give it a name ```yaml

name: Use Node.js ${{ matrix.node-version }} uses: actions/setup-node@v2 with: node-version: ${{ matrix.node-version }}


- Finally we can specify the build and test commands we want to run 
```yaml


- name: npm ci, build and test
  run: |
    npm ci
    npm run build --if-present
    npm test

What is `npm ci` ?

npm ci is similar to npm install except that it can be used while testing, continuous integration and deployment. However it needs package-lock.json or npm-shrinkwrap.json.
You find more details in npm docs

Stitching all the commands together our build_test_react.yml would look like this



name: Build and Test React Application

# Controls when the action will run. 
on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  build_test:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [10.x, 12.x, 14.x, 15.x]

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - uses: actions/checkout@v2
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
      - name: npm ci, build and test
        run: |
          npm ci
          npm run build --if-present
          npm test

Please refer to this commit for the full yml file.

Commit your workflow to a new branch
Create a PR onto main branch
Merge the PR

Congratulations 👏. You have now setup a workflow to build and test your react application 👍

Any subsequent updates (pull_requests or push) to your github repo should trigger the above workflow.

A sample workflow would look like this

Thanks for reading through the entire article. Please reach out with questions, comments and/or feedback.

Testing React app with Jest

Aditya Chukka — Tue, 18 May 2021 04:23:00 +0000

In this post we will look into how to write tests for react application using Jest

Jest is open source testing framework built on top of JavaScript. It was majorly designed to work with React based web applications. However it can also be used on applications using Node, Angular, Vue etc.

We will be writing tests on todolist, a React application that I have created in my previous post

Step 1: Installing dependencies

If you have created your application using create-react-app you can skip this step

Install Jest using npm:



npm install --save-dev jest @types/jest

Now install the react testing library



npm install --save-dev @testing-library/react

We will also be using jest-dom library which provides a set of custom matchers on DOM



npm install --save-dev @testing-library/jest-dom

Add npm script to run tests in package.json



{
  "scripts": {
   ...,
   "tests": "react-scripts test"
   }
   ...,
   "devDependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.6",
    "@types/jest": "^26.0.23",
    "jest": "^26.6.3"
  }
}

Step 2: Writing Tests

Running npm start on todolist should open a window as shown below

As you can see we have 4 static labels on the screen.

Task: and Priority: on the top row (read the :)
Header row with Task and Priority columns

Create a file App.test.tsx if it does not exist already.
Import render and screen from react-testing-library



import { render, screen } from "@testing-library/react"

As the name suggests render can be used to render any react component where as screen can be used to query for HTML elements.

React Testing Library docs provide a cheat sheet with a table of queries that can be used.

For this article we will use getByText. This function returns the element that matches the string and throws an error if nothing matches.

1. Checking for `Task` Label



test("Renders Task Label", () => {
  render(<App />);
  const linkElement = screen.getByText("Task:");
  expect(linkElement).toBeInTheDocument();
});

This test checks if there is *exactly one * element with text Task: in the rendered App.

2. Checking for `Priority` Label



test("Renders Priority Label", () => {
  render(<App />);
  const linkElement = screen.getByText("Priority:");
  expect(linkElement).toBeInTheDocument();
});

This test checks if there is *exactly one * element with text Priority: in the rendered App.

3. Checking for `Task` header column



test("Renders Table Header - Task Column", () => {
  render(<App />);
  const linkElement = screen.getByText("Task");
  expect(linkElement).toBeInTheDocument();
});

This test checks if there is *exactly one * element with text Task in the rendered App.

4. Checking for `Priority` header column



test("Renders Table Header - Priority Column", () => {
  render(<App />);
  const linkElement = screen.getByText("Priority");
  expect(linkElement).toBeInTheDocument();
});

This test checks if there is *exactly one * element with text Priority in the rendered App.

5. Checking for First Row in the Table, Task Column



test("Renders Table  - First Row Task", () => {
  render(<App />);
  const linkElement = screen.getByText("Pick up Milk");
  expect(linkElement).toBeInTheDocument();
});

This test checks if there is *exactly one * element with text Pick up Milk in the rendered App.

6. Checking for First Row in the Table, Priority Column



test("Renders Table  - First Row Priority", () => {
  render(<App />);
  const linkElement = screen.getByText("1");
  expect(linkElement).toBeInTheDocument();
});

This test checks if there is *exactly one * element with text 1 in the rendered App.

You can run the above tests by



npm test

Please refer to this commit for code.

Optional Section: Testing individual Components

In the above section we have only written tests for the App component. However we can extend similar tests to other components as well.

In this segment we will add tests to AddItem and ToDoList components.

1. Checking Input Form in AddItem

Import render, screen methods from react-testing-libary and AddItem component



import { render, screen } from "@testing-library/react";
import AddItem from "../src/AddItem";

Our AddItem component takes a function addItem to save/store the submitted item. Let's mock it for testing purposes.



const empty = () => "";

Test whether the form is rendered correctly.



test("Renders Input Form", () => {
  render(<AddItem addItem={empty} />);

  const taskElement = screen.getByText("Task:");
  expect(taskElement).toBeInTheDocument();

  const priorityElement = screen.getByText("Priority:");
  expect(priorityElement).toBeInTheDocument();
});

In this test, we check if we have elements Task: and Priority: in the rendered component

2. Checking Table in ToDoList

Import render, screen methods from react-testing-libary and ToDoList component



import { render, screen } from "@testing-library/react";
import ToDoList from "../src/ToDoList";

Since our ToDoList takes an array of items as props. We will split our tests into two scenarios

Empty Array
Non empty array

2.1 Checking Table with no items

The ToDoList component should render an div with text Empty List when there are no items.



test("Renders Empty List div", () => {
  render(<ToDoList items={[]} />);
  const linkElement = screen.getByText("Empty List");
  expect(linkElement).toBeInTheDocument();
});

This test should pass ✅ only if there is one element with text Empty List.

2.2 Checking Table with items

The ToDoList component should render items in a tabular format if props has any items.

In this test we pass an item with task write test and priority 1.



test("Renders Table with dummy data", () => {
  const items = [{ task: "write test", priority: 1 }];
  render(<ToDoList items={items} />);

  const taskHeaderElement = screen.getByText("Task");
  expect(taskHeaderElement).toBeInTheDocument();

  const priorityHeaderElement = screen.getByText("Priority");
  expect(priorityHeaderElement).toBeInTheDocument();

  const taskElement = screen.getByText("write test");
  expect(taskElement).toBeInTheDocument();

  const priorityElement = screen.getByText("1");
  expect(priorityElement).toBeInTheDocument();
});

We check if the table has following

Task Header Column
Priority Header Column
Task Column with value write test
Priority Column with value 1

In all the scenarios there should be exactly one matching element. Else the test should fail ❌

Thanks for reading through the entire article. Please reach out with questions, comments and/or feedback.

Create a todo list in React

Aditya Chukka — Sat, 15 May 2021 05:46:55 +0000

In this tutorial we will learn how to create a todo list in React using Typescript.

Before we create the application, let’s set up our development environment.

Download and install the latest stable version of Node

Though Node is not really required to use React, it bundle react applications into a neat packages that can be used relatively easy by other clients. See this stack over flow post for more details

Section 1: Create a react application

Open your terminal and run

npx create-react-app todolist — template typescript

Yes, you read it right, npx is a tool for executing node binaries. This stack overflow post describes the differences well

Once you run the above command completes, your project structure should look like this

Now you can run your project by doing

npm start

You should see your application running on your default browser at port 3000.

If you have some other application react would ask you to allow it to run on the next availability port

Congratulations 👏 , you have successfully created your first react application.

Apologies if you are already an expert on React

Please commit your code to GitHub or any other code hosting platform. You can refer to this commit for code structure.

In this section, we will build a component to display items in tabular format

Feel free to skip this section by jumping this gist

Section 2.1: Define an interface to represent an item in the todo list

We store the task we are interested in doing as string and it’s priority as number.

export interface Item {
  task: string;
  priority: number;
}

Section 2.2: Define a component to show the items

This component will receive the items it needs to display through props. Let’s call it ToDoList

In the render method we collect the items for props. If there are no items received return a text, Ex: Empty List.

class ToDoList extends React.Component<{ items: Item[] }, {}> {
  render() {
    const { items } = this.props;

    if (items.length === 0) {
      return <div>Empty List</div>;
    }
  }

React.Component takes props as first argument and state as second variable

Since the above component does not involve any user interaction we don’t have to store any state. Hence we can ignore the constructor.

If there are any items, we present in tabular format. First create a table with a header.

<table {...getTableStyleProps()}>
  <thead>
    <tr key={`task_prioirity`}>
      <th>Task</th>
      <th>Priority</th>
    </tr>
  </thead>
</table>

The key property in the row element would be used by React to decide whether this row needs to be re-rendered when there is a change in this component. React docs has a pretty good explanation on keys

Construct the table body by iterating items using map and creating a row

<tbody>
  {items.map((i, index) => (
    <tr
      key={`${i.task}_${i.priority}`}
      style={{ backgroundColor: index % 2 === 0 ? "#dddddd" : "white" }}
    >
      <td>{i.task}</td>
      <td>{i.priority}</td>
    </tr>
  ))}
</tbody>

It would be better if we organize our items based on priority. Hence we sort them in ascending order

const sortItems = (items: Item[]): Item[] => {
  return items.sort((i1, i2) => i1.priority - i2.priority);
};

Stitching everything together we get our ToDoList Component

// ToDoList.tsx
import React from "react";

export interface Item {
  task: string;
  priority: number;
}


const getTableStyleProps = (): {} => {
  return {
    style: {
      width: "100%",
      fontFamily: "arial, sans-serif",
      borderCollapse: "collapse",
      textAlign: "left",
      padding: "8px",
      border: " 1px solid #dddddd",
    },
  };
};


class ToDoList extends React.Component<{ items: Item[] }, {}> {
  render() {
    const { items } = this.props;

    if (items.length === 0) {
      return <div>Empty List</div>;
    }
    const sortedItems = sortItems(items);
    return (
      <table {...getTableStyleProps()}>
        <thead>
          <tr key={`task_prioirity`}>
            <th>Task</th>
            <th>Priority</th>
          </tr>
        </thead>
        <tbody>
          {sortedItems.map((i, index) => (
            <tr
              key={`${i.task}_${i.priority}`}
              style={{ backgroundColor: index % 2 === 0 ? "#dddddd" : "white" }}
            >
              <td>{i.task}</td>
              <td>{i.priority}</td>
            </tr>
          ))}
        </tbody>
      </table>
    );
  }
}

const sortItems = (items: Item[]): Item[] => {
  return items.sort((i1, i2) => i1.priority - i2.priority);
};

export default ToDoList;

Section 3: Add ToDoList to App

Feel free to skip this section by jumping this gist

At this point, we are ready to use the ToDoList component we wrote in the previous subsection.

Import the component and build an initial list of items

import React from "react";
import ToDoList, { Item } from "./ToDoList";

const initialList = [
  {
    task: "Pick up Milk",
    priority: 1,
  },
  {
    task: "Buy Eggs",
    priority: 2,
  },
  {
    task: "Buy Bread",
    priority: 3,
  },
];

Extend the App component to accept props and items as state.
Pass items received through state to ToDoList component in render method


class App extends React.Component<{}, { items: Item[] }> {
  constructor(props: any) {
    super(props);
    this.state = {
      items: initialList,
    };
  }

  render() {
    const { items } = this.state;
    return (
      <div className="App">
        <br />
        <ToDoList items={items} />
      </div>
    );
  }
}

Stitching everything together should give us our App component

// App.tsx
import React from "react";
import ToDoList, { Item } from "./ToDoList";

const initialList = [
  {
    task: "Pick up Milk",
    priority: 1,
  },
  {
    task: "Buy Eggs",
    priority: 2,
  },
  {
    task: "Buy Bread",
    priority: 3,
  },
];

class App extends React.Component<{}, { items: Item[] }> {
  constructor(props: any) {
    super(props);
    this.state = {
      items: initialList,
    };
  }

  render() {
    const { items } = this.state;
    return (
      <div className="App">
        <br />
        <ToDoList items={items} />
      </div>
    );
  }
}

export default App;

Running the application by npm start should show a table like below

Please remember to commit your changes at this point.

Section 4: Define a component to add a new item

Feel free to skip section by jumping to this gist

This component would contain two text boxes, one for task and another for priority and a button to submit the item. Let’s call it AddItem

I sincerely apologize for bad naming, open for feedback on these

For this component we would need to store the input entered by user in a state variable

import React from "react";
import { Item } from "./ToDoList";

class AddItem extends React.Component<{ addItem: any }, Item> {
  constructor(props: any) {
    super(props);
    this.state = {
      task: "",
      priority: -1,
    };   
  }

Render the input form in a tabular format

render() {
  return (
    <table>
      <tbody>
        <tr key={""}>
          <td>Task:</td>
          <td>
            <input
              id="task"
              type="text"
              placeholder="Enter task here"
              onChange={this.setTask}
            />
          </td>
          <td>Priority:</td>
          <td>
            <input
              id="prioity"
              type="text"
              placeholder="Enter priority here"
              onChange={this.setPriority}
            />
          </td>
          <td>
            <input id="submit" type="submit" onClick={this.addItem} />
          </td>
        </tr>
      </tbody>
    </table>
  );
}

As you might have already guessed we will use the functions setTask and setPriority to update the state of item.

setTask(evt: any) {
  this.setState({
    task: evt.target.value,
  });
}

setPriority(evt: any) {
  this.setState({
    priority: parseInt(evt.target.value),
  });
}

Once we collected the inputs, we should validate them.

const isValid = (item: Item): boolean => {
  return item.task !== "" && item.priority !== -1;
};

Now we can submit the item using the function addItem

addItem(evt: any) {
  const item = this.state;
  if (isValid(item)) {
    this.props.addItem(item);
  }

  this.setState({
    task: "",
    priority: -1,
  });
}

The above snippet calls a function addItem on props. This would pass state (or data) to the parent component. In react world this strategy is called Lifting State Up. We do this so that AddItem can be reused to create newer items.

For the above three functions to be available in render method we need to bind to this object in the constructor.

class AddItem extends React.Component<{ addItem: any }, Item> {
  constructor(props: any) {
    super(props);
    this.state = {
      task: "",
      priority: -1,
    };
    this.setTask = this.setTask.bind(this);
    this.setPriority = this.setPriority.bind(this);
    this.addItem = this.addItem.bind(this);
  }

Joining everyything together gives us the AddItem component

// AddItem.tsx
import React from "react";
import { Item } from "./ToDoList";

const isValid = (item: Item): boolean => {
  return item.task !== "" && item.priority !== -1;
};

class AddItem extends React.Component<{ addItem: any }, Item> {
  constructor(props: any) {
    super(props);
    this.state = {
      task: "",
      priority: -1,
    };
    this.setTask = this.setTask.bind(this);
    this.setPriority = this.setPriority.bind(this);
    this.addItem = this.addItem.bind(this);
  }

  setTask(evt: any) {
    this.setState({
      task: evt.target.value,
    });
  }

  setPriority(evt: any) {
    this.setState({
      priority: parseInt(evt.target.value),
    });
  }

  addItem(evt: any) {
    const item = this.state;
    if (isValid(item)) {
      this.props.addItem(item);
    }

    this.setState({
      task: "",
      priority: -1,
    });
  }

  render() {
    return (
      <table>
        <tbody>
          <tr key={""}>
            <td>Task:</td>
            <td>
              <input
                id="task"
                type="text"
                placeholder="Enter task here"
                onChange={this.setTask}
              />
            </td>
            <td>Priority:</td>
            <td>
              <input
                id="prioity"
                type="text"
                placeholder="Enter priority here"
                onChange={this.setPriority}
              />
            </td>
            <td>
              <input id="submit" type="submit" onClick={this.addItem} />
            </td>
          </tr>
        </tbody>
      </table>
    );
  }
}

export default AddItem;

Section 5: Add AddItem to App component

Feel free to skip this section by jumping to this gist

AddItem component can be now imported to App

Before adding a new item, we would need to check if it already exists. Let’s write a helper function isPartOf that looks if item is present in items.

const isPartOf = (item: Item, items: Item[]): boolean => {
  return items.some((it) => it.priority === item.priority);
};

Implement addItem using the helper function isPartOf.

If item already exists, alert the user
Else update the state

addItem(item: Item) {
  const { items } = this.state;

  if (isPartOf(item, items)) {
    alert(`Item with priorirty: ${item.priority} exists`);
    return;
  }
  this.setState({
    items: items.concat(item),
  });
}

We should concatenate the item to the current list, since states are immutable in react

Bind addItem in the App constructor

class App extends React.Component<{}, { items: Item[] }> {
  constructor(props: any) {
    super(props);
    this.state = {
      items: initialList,
    };
    this.addItem = this.addItem.bind(this);
  }

Combining all the code parts together should give us our new App component

// App.tsx
import React from "react";
import AddItem from "./AddItem";
import ToDoList, { Item } from "./ToDoList";

const initialList = [
  {
    task: "Pick up Milk",
    priority: 1,
  },
  {
    task: "Buy Eggs",
    priority: 2,
  },
  {
    task: "Buy Bread",
    priority: 3,
  },
];

const isPartOf = (item: Item, items: Item[]): boolean => {
  return items.some((it) => it.priority === item.priority);
};

class App extends React.Component<{}, { items: Item[] }> {
  constructor(props: any) {
    super(props);
    this.state = {
      items: initialList,
    };
    this.addItem = this.addItem.bind(this);
  }

  addItem(item: Item) {
    const { items } = this.state;

    if (isPartOf(item, items)) {
      alert(`Item with priorirty: ${item.priority} exists`);
      return;
    }
    this.setState({
      items: items.concat(item),
    });
  }

  render() {
    const { items } = this.state;
    return (
      <div className="App">
        <AddItem addItem={this.addItem} />
        <br />
        <ToDoList items={items} />
      </div>
    );
  }
}

export default App;

Your todo list app is ready to used now. Running npm start should bring a window like below

Please check this commit for full code.

❤️ Congratulations 👏, you have successfully created a todo list in React.

I have also hosted this application on Code Sandbox. Feel free to play with it

Thanks for reading through the entire article. Please reach out with questions, comments and/or feedback.

DEV Community: Aditya Chukka

Add PostgreSQL to Express Server

Dependencies

Database Setup

Define Models

Connect to PostgreSQL

Execute query on database

Fetch items from database

Insert items into database

Update items in database

Fetch users from database

Insert users into database

Update users in database

Connect datasource to items router

Connect datasource to users router

Running the server

Testing the requests

Requests on item

Requests on user

Routing Requests in Node Server

Preface

Requirements

Basic Application

Route for items

Using item Route in app

Running the server

Testing the requests on item

Route for users

Using user Route in app

Testing the requests on users

Parsing Requests Payload

Create Server using Express and TypeScript

Deploy React App using GitHub Actions

Step 1: Add homepage to package.json

Step 2: Enable GitHub Pages

Step 3: Create SSH Deploy Key

Step 4: Add Keys to GitHub

Step 5: Create workflow for deploy

Step 6: Commit your changes

Build and Test React app with GitHub Actions

GitHub Actions

Git Workflow

Where can I use multiple workflows ?

Setting up a workflow

What is npm ci ?

Testing React app with Jest

1. Checking for Task Label

2. Checking for Priority Label

3. Checking for Task header column

4. Checking for Priority header column

5. Checking for First Row in the Table, Task Column

6. Checking for First Row in the Table, Priority Column

1. Checking Input Form in AddItem

2. Checking Table in ToDoList

2.1 Checking Table with no items

2.2 Checking Table with items

Create a todo list in React

Using `item` Route in app

Using `user` Route in app

Step 1: Add `homepage` to `package.json`

What is `npm ci` ?

1. Checking for `Task` Label

2. Checking for `Priority` Label

3. Checking for `Task` header column

4. Checking for `Priority` header column