DEV Community: Thisura Thenuka

Demystifying CORS - Everything You Need to Know

Thisura Thenuka — Wed, 01 Mar 2023 03:50:11 +0000

If you’re a web developer, chances are you’ve come across the pesky CORS error. But fear not! This article is here to help fellow developers understand and master the CORS policy. I’ll break it down for you in simple terms so you can tackle this error with ease. So, let’s jump right in and unravel the mysteries of CORS!

What is the Same-Origin Policy?

The Same-Origin Policy is like a rule that web browsers follow to keep you safe on the internet.

It says that if a web page from one website tries to do something on a different website, like read information or send data, the web browser won’t let it happen. It’s like a security guard that stops people from going where they’re not supposed to.

This is important because it helps protect your personal information and keeps you safe from bad things on the internet. Imagine if anyone could read your emails or see your bank account information just by going to a website! The Same-Origin Policy helps prevent that from happening.

What is CORS?

Cross-Origin Resource Sharing or CORS is a way for web pages to ask permission from a different website to use its information.

Let’s say you want to view some pictures on a website called “A”. But the pictures are stored on a different website called “B”. Normally, your web browser won’t show you the pictures because of the Same-Origin Policy.

But with CORS, website “A” can send a special message called a “CORS request” to website “B”. This message asks website “B” if it’s okay for website “A” to see the pictures. If website “B” says it’s okay, then your web browser will show you the pictures from website “B” on website “A”.

CORS helps web pages work together and share information safely, like when you share your toys with your friends. It’s important because it allows websites to work together and show you the information you want to see.

What are preflight requests?

Preflight requests are like asking for permission before doing something.

Let’s say a website wants to share information with another website using CORS, but the information is sensitive and needs extra protection. The website will send a special message called a “preflight request” before sending the actual message.

The preflight request asks the other website if it’s okay to send sensitive information. It’s like asking your parents if it’s okay to go to a friend’s house for a sleepover.

The other website will then send a message back saying if it’s okay to send the information or not. If it’s okay, the original website will send the sensitive information, but if it’s not okay, the information won’t be sent.

Preflight requests help keep your information safe on the internet by making sure that websites only send and receive information when it’s safe to do so. It’s like checking with your parents before doing something that might be dangerous.

What are CORS headers?

CORS headers are messages that websites use to talk to each other and decide if it’s safe to share information. Different kinds of CORS headers have different jobs, just like how different tools have different jobs in a toolbox.

Here are a few examples of different CORS headers and what they do:

Access-Control-Allow-Origin: This CORS header tells your web browser which websites are allowed to see the information. It’s like telling your friends which toys they can play with.
Access-Control-Allow-Methods: This CORS header tells your web browser which kinds of actions it can take with the information, like reading or editing. It’s like telling your friends which games they can play with the toys.
Access-Control-Allow-Credentials: This CORS header tells your web browser if it’s okay to send personal information, like passwords. It’s like telling your friends if it’s okay to come into your room or not.
Access-Control-Allow-Headers: This CORS header tells your web browser which kinds of information it can share, like text or pictures. It’s like telling your friends what kind of snacks they can have.

By using these different CORS headers, websites can make sure that they’re only sharing information that’s safe to share, and keeping your personal information secure. It’s like making sure that only your trusted friends can come over to play, and that they know the rules for playing with your toys.

How do I handle CORS errors?

Picture this — you’re on a website and you spot some juicy information on another website that you’d love to get your hands on. But before you can access it, your browser needs to ask for permission. It sends a preflight request to check if the other website will let you use its resources. If the answer is no, you’ll encounter the dreaded CORS error, blocking your request.

There are a few different types of CORS errors, but they all mean the same thing: you can’t access the information or resources you want. Here are the most common CORS errors that you will encounter.

Access-Control-Allow-Origin: This error means that the website you’re trying to access doesn’t allow other websites to use its resources.
Access-Control-Allow-Headers: This error means that the website you’re trying to access doesn’t allow you to use certain headers in your request.
Access-Control-Allow-Methods: This error means that the website you’re trying to access doesn’t allow you to use certain methods, like GET or POST, to access its resources.

If you run into a CORS error, don’t worry! There are ways to handle it. One way is to contact the owner of the website you’re trying to access and ask them to allow other websites to use its resources. Another way is to use a proxy server, which acts as a middleman between you and the website you’re trying to access.

If you’d like to read more about all the different CORS errors, you can refer to the MDN Docs article from here.

What are the CORS Best Practices?

To ensure your website is secure and functional, it’s important to follow some best practices when working with CORS.

Include the necessary CORS headers in your server’s response: When a browser makes a cross-origin request, the server being accessed must include specific response headers to permit the request. Make sure your server includes the appropriate CORS headers such as Access-Control-Allow-Origin, Access-Control-Allow-Methods, and Access-Control-Allow-Headers.
Only allow access to necessary resources: To minimize the risk of unauthorized access, only allow cross-origin access to necessary resources. Avoid allowing access to sensitive information or resources unless it’s required.
Use SSL/TLS encryption: Use SSL/TLS encryption to ensure that any data being transmitted is secure. This can help prevent unauthorized interception of data.
Set appropriate CORS configuration: Set up CORS configuration based on your website’s requirements. For example, if your website has a public API that should be accessible to third-party websites, set up CORS to allow cross-origin requests from those specific domains.
Monitor CORS requests: Monitor cross-origin requests to your website to identify any unusual or potentially malicious activity. Implement logging and monitoring tools to detect any unauthorized access attempts.

By following these best practices, you can help ensure that your website is secure and functional while allowing cross-origin requests as needed.

Conclusion

Understanding and being able to handle the Cross-Origin Resource Sharing (CORS) policy is crucial for every web developer. During my early days in web development, I had to face the dreadful CORS error which led me to waste so much time trying out numerous solutions from Stack Overflow without truly comprehending the concept. But, now that I have gained ample knowledge about CORS, I can confidently say that you don’t have to suffer the same fate as I did. So, take the time to understand CORS and save yourself from the hassle of going through a maze of solutions.

Thank you so much for taking the time to read my article! My utmost priority was to simplify complex concepts, and I hope I’ve achieved that. If you found my article informative and useful, please drop a comment below and don’t forget to follow me for more articles like this. Oh, and spread the word by sharing it with your friends and colleagues, they might thank you for it!

Demystifying DNS - Everything You Need to Know

Thisura Thenuka — Mon, 27 Feb 2023 10:34:04 +0000

The article’s objective is to cover all the key information about the Domain Name System (DNS). Everyone interested in learning more about DNS should read this article. I will try to explain what you need to know in layman’s terms. Without further ado, let’s get into it.

What is DNS and why is it important?

DNS is like a big phone book for the internet. You know how you have a phone book at home with all your friends’ phone numbers and addresses? Well, DNS is like that, but for websites.

When you want to go to a website, you type in the website’s name, like “google.com". DNS takes that name and looks it up in the phone book to find the website’s “phone number”, which is called an IP address. Then, DNS tells your computer the IP address, and your computer uses that to find the website and show it to you.

DNS is essential because it helps us find websites easily and quickly, without having to remember a bunch of numbers. It’s like having an astute helper who knows where all the websites are and how to get to them!

What is the hierarchy of DNS?

Remember how I explained that DNS is like a big phone book for the internet? Well, it’s not just one big phone book. It’s actually lots of phone books, all working together in a big chain.

At the very top of the chain is something called the “root” server. This server lists all the top-level domains (TLDs), like .com, .org, .net, and so on.

When you type in a website name, like “google.com", your computer goes to the next level of the chain, which is the server for the “.com” top-level domain. That server has a list of all the websites that end in “.com”, and it can tell your computer where to find “google.com".

Then, your computer goes to the next level of the chain, which is the server for “google.com". That server has a list of all the pages on the Google website, and it can tell your computer where to find the page you’re looking for.

This chain of servers is called the “DNS hierarchy”, and it helps your computer find the right website quickly and easily. It’s like a big team of helpers, each one passing along the information to the next one until you get to where you want to go.

Here is a simple diagram of the DNS hierarchy for you to get an idea.

So, that’s how DNS hierarchy works! It’s a big chain of servers, each one responsible for a different part of the internet phone book, all working together to help us find websites.

What are the DNS server types?

DNS servers are like special computers that help to make the internet work. There are two main types of DNS servers.

authoritative DNS servers
recursive DNS servers

An authoritative DNS server is like a phone book for the internet. It stores information about domain names and their corresponding IP addresses. When someone wants to visit a website, their computer asks the authoritative DNS server for the IP address that corresponds to the domain name they’re trying to visit.

A recursive DNS server is like a helper for your computer. When your computer wants to visit a website, it asks the recursive DNS server for the IP address that corresponds to the domain name. The recursive DNS server then goes and asks the authoritative DNS server for the information. Once it gets the information, it sends it back to your computer, which can then connect to the website.

Recursive DNS servers are important because they can help to speed up your internet experience. They store information about domain names and their corresponding IP addresses in a special cache so that they can quickly give you the information you need without having to go all the way to the authoritative DNS server every time.

What are DNS records?

DNS records are like little notes that tell your computer where to find a website. They are a part of the DNS system, which helps your computer find the right website when you type in a name like “google.com".

There are different types of DNS records, each one with a different job. Here are some of the most common ones:

A (Address) record: This is the most important DNS record because it tells your computer the IP address of the web server hosting a website. When you type in a website name like “google.com", your computer looks up the A record for that domain name to find the IP address of the web server.
CNAME (Canonical Name) record: This record is like a shortcut. It tells your computer to look up the IP address for one domain name, but use the website content from another domain name. For example, the CNAME record for “test.google.com” might tell your computer to use the website content from “google.com". This record is usually used in place of an A record. All CNAME records always point to a domain, not an IP address.
MX (Mail Exchange) record: This record tells your computer where to send an email for a domain name. It’s used by email servers to find the correct destination for incoming email messages.
TXT (Text) record: This record is like a note that can contain any kind of text information. It’s often used to provide additional information about a domain name, such as ownership or security details.

These are just a few examples of the types of DNS records that exist. Each one has a specific job to help your computer find the right website or send an email to the right place. DNS records are like little helpers that work together to make sure everything on the internet runs smoothly!

What is DNS propagation and caching?

When you type in a website name like “google.com", your computer uses the DNS system to find the IP address of the web server hosting that website. But did you know that the DNS system can take some time to update with new information?

This is because of something called DNS propagation. When a change is made to the DNS records for a domain name, it can take some time for that change to be propagated, or spread out, to all of the DNS servers around the world. This means that some people might still see the old information for a little while, even after a change has been made.

Another thing to know about DNS is that your computer doesn’t always look up the DNS information from scratch every time you visit a website. Instead, it stores the information in a cache or a temporary storage area, so it can access it more quickly the next time you visit that website.

DNS caching is helpful because it makes your internet experience faster and smoother. Your computer doesn’t have to spend time looking up the DNS information every time you visit a website. Instead, it can use the information it already has stored in the cache.

However, DNS caching can also cause problems when changes are made to DNS records. Because your computer is using the cached information, it might not see the updated information right away. This is another reason why DNS propagation can take some time. You can flush DNS cache to get rid of this issue.

So, DNS propagation and caching are two things that affect how quickly and accurately your computer can find the websites you’re looking for. Sometimes it might take a little bit of time for everything to update, but don’t worry — your computer and the DNS system are always working hard to make sure you can access the internet quickly and easily!

What are DNS security and DNSSEC?

DNS security is important because it helps to make sure that the DNS system is working correctly and that you’re truly connecting to the website you think you are. Someone could try to trick the DNS system, either by changing the DNS records for a website or by creating a fake website that looks like the real one.

One way that DNS security is improved is through something called DNSSEC. This is a system that adds extra security information to the DNS records for a website. When your computer looks up the DNS information for a website that has DNSSEC, it can check the security information to make sure that the information it’s getting is really from the website it thinks it is.

DNSSEC works by adding a digital signature to the DNS records for a website. This signature is like a special code that proves that the information is real and hasn’t been tampered with. Your computer can check the signature to make sure that it’s connecting to the real website and not a fake one.

DNSSEC is a very important part of DNS security because it helps to protect against attacks that try to trick the DNS system. With DNSSEC, you can be more confident that the websites you’re visiting are the ones you intend to visit, and that your internet experience is secure and trustworthy.

How does DNS load balancing work?

Sometimes, when lots of people want to visit a website, the server that hosts that website can get overwhelmed and stop working properly. This can make the website slow or even cause it to crash! To prevent this from happening, website owners can use something called DNS load balancing.

DNS load balancing is when a website owner sets up multiple servers to host their website. When someone tries to visit the website, the DNS system can choose which server to send them to. This helps spread out the traffic and prevent any server from getting too overwhelmed.

One way that the DNS system can choose which server to send someone to is by using something called round-robin DNS. Round-robin DNS is when the DNS system rotates through a list of IP addresses for the different servers. So, if three servers are hosting a website, the DNS system might send the first person who tries to visit the website to the first server, then send the second person to the second server, and so on.

Round-robin DNS is a simple and effective way to do DNS load balancing. By spreading out the traffic among multiple servers, website owners can ensure that their website stays fast and responsive, even when lots of people are trying to visit it simultaneously.

How do I troubleshoot DNS?

Sometimes, things can go wrong with DNS servers. When this happens, you can use the following checklist of troubleshooting techniques to use to figure out what’s going on.

Check your internet connection: Before you do anything else, make sure that your internet connection is working properly. If your internet connection is down, you won’t be able to access any websites, no matter what you do!
Try a different device: If you’re having trouble accessing a website on one device, try accessing it on a different device. This can help you figure out whether the problem is with the website or with your device.
Check your DNS settings: Make sure that your device is set up to use the correct DNS servers. If you’re not sure what the correct DNS servers are, you can try using Google’s DNS servers (8.8.8.8 and 8.8.4.4).
Clear your DNS cache: Sometimes, your device’s DNS cache can get corrupted. When this happens, you might not be able to access certain websites. To fix this, you can try clearing your device’s DNS cache.
Check the website’s DNS records: If you’re having trouble accessing a particular website, it could be because there’s something wrong with the website’s DNS records. You can use a special tool called a DNS lookup tool to check the website’s DNS records and see if there are any problems.

Conclusion

In conclusion, DNS is a critical component of the internet infrastructure that enables us to access websites and services by their domain names. Understanding the hierarchy of DNS, different types of DNS servers, DNS records, and DNS security can help us manage and troubleshoot DNS effectively. Additionally, learning about DNS propagation, caching, and load balancing can improve website performance and availability.

Finally, thank you for taking the time to read my article. I tried my best to break the concepts down into simple terms. If you found my article helpful, please make to share it with your friends and colleagues.

Add Redux to your React app in 6 Simple Steps

Thisura Thenuka — Sat, 20 Aug 2022 12:24:00 +0000

Redux is a predictable state container for JavaScript apps.

Do I need to use Redux in my React app?

It depends.

If your app is simple and works with a minimal number of states, there is no need to add redux to your app.

If your app is complex and has a lot of stuff going on, you should consider adding redux to your app. It will provide a clean and simple structure to handle states and improve the longevity of the code.

Redux vs useContext and useReducer

By utilizing React's useContext and useReducer hooks, we can provide the same functionality as Redux. The boilerplate code is significantly less, and it is much simpler.

But it's crucial that you understand how Redux functions because most software companies already use it in their projects, and it will undoubtedly help you in your next interview.

Redux Basic Concepts

There are a few simple concepts you should understand before adding redux to your react app.

Store

The Redux Store holds the state of your app. Your app is always subscribed to the store. But your app can't directly change the state in the store.

This is where actions and action creators come in.

Action Types, Actions and Action Creators

Action types are constants that are used to define the values used for the type property of Actions.



export const ADD_TASK = "ADD_TASK";

An action is any object with a type property. Actions help us describe what needs to happen.



{
    type: ADD_TASK
}

An action creator is simply a JS function that returns an action.



export const addTask = (task) => {
    return {
        type: ADD_TASK,
        payload: task,
    };
};

The only thing your app can do is to "dispatch" actions. Dispatch is a method provided by the react-redux library's useDispatch hook. I'll get into this later when we implement the code.

Your app can change the state in the Redux store by dispatching actions.



dispatch(addTask(task))

An action only describes what needs to happen. It doesn't describe how we want the states to change. We need to use a reducer for this.

Reducer

A reducer is a JS function that takes in initialState and action as input and returns an updated state object.



const initialState = {
  tasks: [],
  taskTitle: "",
  taskDescription: ""
};

const taskReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TASK:
      return {
        ...state,
        tasks: [...state.tasks, action.payload],
        taskTitle: "",
        taskDescription: ""
      };
    default:
      return state;
  }
};

When an action is dispatched, the relevant reducer will update the state according to the action.

When we create the Redux store, we feed all the reducers to the store. So, the reducers can update the state in the store which is what we want.

Feeling Overwhelmed?

I completely understand if you feel swamped, especially if you are only now becoming familiar with these ideas. Have no fear; I've been there. When we begin writing the code, you will have a better understanding of it.

Adding Redux to your React App

Redux will be used to manage states in my simple to-do app, which will allow users to add tasks. I'm simply doing this as a demonstration; a basic app like this doesn't need redux.

Step 1 - Installing required libraries



npm i redux react-redux @reduxjs/toolkit

Step 2 - Create Actions, Action Types and Action Creators

taskActionTypes.js



export const ADD_TASK = "ADD_TASK";
export const UPDATE_TASK_TITLE = "UPDATE_TASK_TITLE";
export const UPDATE_TASK_DESCRIPTION = "UPDATE_TASK_DESCRIPTION";

taskActions.js



import {ADD_TASK, UPDATE_TASK_DESCRIPTION, UPDATE_TASK_TITLE} from "./taskActionTypes";

export const addTask = (task) => {
    return {
        type: ADD_TASK,
        payload: task,
    };
};

export const updateTaskTitle = (value) => {
    return {
        type: UPDATE_TASK_TITLE,
        payload: value,
    };
};

export const updateTaskDescription = (value) => {
    return {
        type: UPDATE_TASK_DESCRIPTION,
        payload: value,
    };
};

When we are passing values to action creators, the convention is to call that attribute "payload".

Step 3 - Create Reducer(s)

taskReducer.js



import {ADD_TASK, UPDATE_TASK_DESCRIPTION, UPDATE_TASK_TITLE} from "./taskActionTypes";

const initialState = {
    tasks: [],
    taskTitle: "",
    taskDescription: ""
};

const taskReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_TASK:
            return {
                ...state,
                tasks: [...state.tasks, action.payload],
                taskTitle: "",
                taskDescription: ""
            };
        case UPDATE_TASK_TITLE:
            return {
                ...state,
                taskTitle: action.payload,
            }
        case UPDATE_TASK_DESCRIPTION:
            return {
                ...state,
                taskDescription: action.payload,
            }
        default:
            return state;
    }
};

export default taskReducer;

In this case, we only need the taskReducer. But in a complex app, there will be multiple reducers to handle different states. In that case, the convention is to create a reducer called "rootReducer" by combining all the other reducers and feeding that reducer to the store.

rootReducer.js



import {combineReducers} from "redux";
import taskReducer from "./tasks/taskReducer";

const rootReducer = combineReducers({task: taskReducer});

export default rootReducer

Step 4 - Create the Store



import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./rootReducer";

const store = configureStore({ reducer: rootReducer });

export default store;

Step 5 - Wrap the Root Component with Provider

index.js



import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import {Provider} from "react-redux";
import store from "./redux/store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <React.StrictMode>
        <Provider store={store}>
            <App />
        </Provider>
    </React.StrictMode>
);

Step 6 - useDispatch() and useSelector()

You can use useSelector() to access the states in the Redux store.

You can use useDispatch() to access the dispatch method which helps you to dispatch actions



import React from "react";
import {useDispatch, useSelector} from "react-redux";
import {addTask, updateTaskDescription, updateTaskTitle} from "../redux/tasks/taskActions";

const styles = {
    taskContainer: {
        display: "flex",
        flexDirection: "column",
        width: "350px"
    },
    mainContainer: {
        textAlign: '-webkit-center'
    }
}

function AddTasks() {
    const dispatch = useDispatch();
    const taskTitle = useSelector(state => state.task.taskTitle)
    const taskDescription = useSelector(state => state.task.taskDescription)

    const onAddTask = () => {
        const task = {
            title: taskTitle,
            description: taskDescription,
        }
        dispatch(addTask(task))
    };
    const onTaskTitleChange = (e) => dispatch(updateTaskTitle(e.target.value))
    const onTaskDescriptionChange = (e) => dispatch(updateTaskDescription(e.target.value))

    return (
        <div style={styles.mainContainer}>
            <div style={styles.taskContainer}>
                <input type="text" placeholder="Task Title" onChange={onTaskTitleChange} value={taskTitle} />
                <input type="text" placeholder="Task Description" onChange={onTaskDescriptionChange}
                       value={taskDescription} />
                <button onClick={onAddTask}>Add Task</button>
            </div>
        </div>
    );
}

export default AddTasks;

That's about it. We successfully added Redux to a React app.

If you want to look into the code and try in out for yourself, here is the Code Sandbox version.

https://codesandbox.io/embed/divine-platform-43jj6l?fontsize=14&hidenavigation=1&theme=dark

Conclusion

At first glance, adding Redux to your React app could appear difficult. But it gets a lot simpler when we take each concept in turn and develop the logic on our own.

I am still trying to learn these concepts on my own. Please feel free to bring up any gaps in my reasoning and the problems you encounter.

Thank you for reading my article. If you learned something new, please make sure to drop a like and share the article among your fellow developers 🥳

Make Errors User-Friendly with React Error Boundaries

Thisura Thenuka — Sat, 13 Aug 2022 16:13:00 +0000

What are Error Boundaries ?

React Error Boundaries are used to show a user-friendly UI to users when unexpected JavaScript errors occur.

A JavaScript error in a part of the UI usually renders a white screen and crashes the entire app. React Version 16 introduced a solution to this issue with the new “Error Boundary” concept.

How can I implement Error Boundaries ?

You can implement React Error Boundaries in your React app in 2 simple steps

Create an error boundary component
Wrap error-prone component with error boundary component

Creating Error Boundary Component

A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch(). Use static getDerivedStateFromError() to render a fallback UI after an error has been thrown. Use componentDidCatch() to log error information. (https://reactjs.org/docs/error-boundaries.html)

Here is the example error boundary component provided in the React documentation.

import React from "react";

class ErrorBoundary extends React.Component {
    constructor(props) {
      super(props);
      this.state = { error: null, errorInfo: null };
    }

    componentDidCatch(error, errorInfo) {
      // Catch errors in any components below and re-render with error message
      this.setState({
        error: error,
        errorInfo: errorInfo
      })
      // You can also log error messages to an error reporting service here
    }

    render() {
      if (this.state.errorInfo) {
        // Error path
        return (
          <div>
            <h2>Something went wrong.</h2>
            <details style={{ whiteSpace: 'pre-wrap' }}>
              {this.state.error && this.state.error.toString()}
              <br />
              {this.state.errorInfo.componentStack}
            </details>
          </div>
        );
      }
      // Normally, just render children
      return this.props.children;
    }  
  }

export default ErrorBoundary;

You can create your own error boundary with a fancier UI according to your use case.

Wrapping with Error Boundary

There are two ways you could wrap components with the error boundary

You can wrap the top-level component
You can wrap individual components

Wrapping Top-Level Component

<ErrorBoundary>
    <App/>
</ErrorBoundary>

Wrapping Individual Components

This approach would be ideal if your app has multiple different isolated sections.

<ErrorBoundary>
    <BankingController/>
</ErrorBoundary>
<ErrorBoundary>
    <ProfileController/>
</ErrorBoundary>
<ErrorBoundary>
    <PolicyController/>
</ErrorBoundary>

An error occurred in BankingController would not stop user from using the PolicyController or ProfileController.

So, Is my React app “white screen”-free now?

Well, React error boundaries can catch all errors except for the following :

Event Handlers
Asynchronous code
Server Side Rendering
Errors thrown in the error boundary itself

But you can always make use of regular JavaScript try/catch blocks whenever needed.

As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree

Conclusion

React error boundaries provide a way for developers to make our apps more user-friendly. In my opinion, every React app should make use of React error boundaries and it makes a drastic difference in the user experience.

Thank you for taking the time to read my article. Hope you enjoyed it. If you learned something new, make sure to drop a like and share the article with your fellow developers.

How to Write Our Own Custom Hooks in React

Thisura Thenuka — Sun, 26 Jun 2022 11:19:58 +0000

To make life simpler for developers, React has introduced a wide variety of hooks. In addition, React allows us to build our own custom hooks.

Today, I will explain how we can create and use React custom hooks.

What are Custom Hooks in React?

React custom hooks are a way to extract component logic into reusable functions. There is one convention you should know about before writing our own React hooks

"use" in front of the custom hook

React advises us to only use React hooks inside React functional components or custom hooks. React advises us not to use React hooks inside regular JS functions. The thought process behind this is that if we use React hooks inside normal JS functions, there is a chance for them to get "hidden" inside the call stack. Especially in a large codebase, it would be impossible to go through each and every function to see where React hooks have been used.

The thought process is the same in this case as well. It would be simpler for us to determine where React hooks have been used if we prefixed our custom hook names with "use".

So, the name of your custom hook should look like this

useMyCustomHook()
useOnlineStatus()
useCommentFilter()

How to write React Custom Hooks?

I've created a simple React hook to check if a given player is retired or not.

useRetiredStatus.js

import {useEffect, useState} from "react";

const useRetiredStatus = (player) => {

    const [isRetired, setIsRetired] = useState(null);

    useEffect(() => {
        //Assumption: The age of retirement for cricket is 40 yrs
        player?.age > 40 ? setIsRetired(true) : setIsRetired(false)
    })

    return isRetired;
}

export default useRetiredStatus;

App.js

import React, {useEffect, useState} from 'react';
import useRetiredStatus from "./useRetiredStatus";

const players = [
    {name: "Kumar Sangakkara", age: 44},
    {name: "Angelo Mathews", age: 35},
    {name: "Rohit Sharma", age: 35},
    {name: "Mahela Jayawardene", age: 45},
    {name: "David Miller ", age: 33},
]

function App() {

    const [player, setPlayer] = useState(players[2]);
    const retiredStatus = useRetiredStatus(player);

    return (
        <>
            {`Dear Cricket Fans, ${player.name} is ${retiredStatus ? 'retired' : 'still playing the game'}`}
        </>
    );
}

export default App;

Output

With React Custom Hooks, there are no limitations. We can change input and output variables into anything we want just like in a regular function. With this knowledge, you will be able to create custom hooks for all the unique requirements in your projects.

Can't I just use a JS function, instead of creating a custom hook?

You can use a JS function if your code does not make use of React hooks.

If the code contains React hooks, you should create a custom hook so that your code aligns with React's rules of hooks

Conclusion

Learning how to make use of React custom hooks will make your code look more cleaner and more readable. I hope you will be able to implement React custom hooks in your next project.

Thank you for reading the article. Hope you learned something valuable today. Until next time, take care guys.

Promises - JavaScript Concepts Simplified

Thisura Thenuka — Sat, 12 Feb 2022 14:58:03 +0000

What is a Promise?

By definition, a promise is a declaration that one will do something or that a particular thing will happen. In the programming world, a promise is an object that represents the eventual completion (or failure) of an asynchronous operation.

States

A promise can have the following states.

Pending (Initial State, neither fulfilled nor rejected)
Fulfilled (The operation was a success)
Rejected (The operation was a failure)

A pending promise can either be fulfilled or rejected. We can attach handler methods to handle the events of promises getting fulfilled and rejected. We can use the then method in promises to attach these handlers.

promise.then(handleSuccess, handleRejection)

We have attached two handler methods to the above promise. Now, if the promise gets fulfilled, handleSuccess will be called and if it gets rejected, the handleRejection method will be called.

When a promise is not in the pending state, we say the promise is settled. Please keep in mind that being settled is merely a linguistic convenience, not a state.

Methods

In addition, promise objects have multiple methods that can be really useful when handling promises.

1. Promise.all()

Input - An iterable of promises
Output - A single promise that resolves into an array of the results of the input promises

This method is useful when you have more than one promise and you want to do something only when all the operations are completed successfully. Promise.all() will reject immediately upon any of the input promises rejecting. For example, if you want to make multiple API calls and the code relies on all of them to be successful, you can use Promise.all().

const firstPromise = new Promise((resolve, reject) => {
  setTimeout(resolve, 300, "First Promise");
});

const secondPromise = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "Second Promise");
});

const thirdPromise = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, "Third Promise");
});

const rejectedPromise = Promise.reject("EVERYBODY STAY CALM. STAY F***ING CALM. I WAS REJECTED");

//Promise.all() method
Promise.all([firstPromise, secondPromise, thirdPromise])
  .then((results) => {
    console.log("All the promises were fulfilled here - ", results);
  })
  .catch((error) => {
    console.error("Error: ", error);
  });

//Promise.all() method with a rejected promise
Promise.all([firstPromise, rejectedPromise, thirdPromise])
  .then((results) => {
    console.log("All the promises were fulfilled");
    console.log("Response from all method - ", results);
  })
  .catch((error) => {
    console.error("Error: ", error);
  });

Output

Error:  EVERYBODY STAY CALM. STAY F***ING CALM. I WAS REJECTED
All the promises were fulfilled here -  [ 'First Promise', 'Second Promise', 'Third Promise' ]

2. Promise.allSettled()

Input - An iterable of promises
Output - A single promise that resolves into an array of the results of the input promises

We can use this method when the tasks are dependent on each other and you want to know all the results of all the promises regardless of the result of each promise.

//Promise.allSettled() method with a rejected promise
Promise.allSettled([firstPromise, rejectedPromise, thirdPromise])
  .then((results) => {
    console.log("I don't care if all the results are fulfilled or not");
    console.log("Response from allSettled method - ", results);
  })
  .catch((error) => {
    console.error("Error: ", error);
  });

You can clearly see the difference between the all and allSettled methods. The all method wants all the promises to be fulfilled while allSettled method only wants the promises to be settled (regardless of fulfilled or rejected)

I don't care if all the results are fulfilled or not
Response from allSettled method -  [
  { status: 'fulfilled', value: 'First Promise' },
  {
    status: 'rejected',
    reason: 'EVERYBODY STAY CALM. STAY F***ING CALM. I WAS REJECTED'
  },
  { status: 'fulfilled', value: 'Third Promise' }
]

3. Promise.any()

Input - An iterable of promises
Output - A single promise that resolves as soon as any of the promises in the iterable fulfils, with the value of the fulfilled promise

If none of the promises gets fulfilled, then the returned promise is rejected with an AggregateError.

const firstPromise = new Promise((resolve, reject) => {
  setTimeout(resolve, 300, "First Promise");
});

const secondPromise = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "Second Promise");
});

const thirdPromise = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, "Third Promise");
});

const rejectedPromise = Promise.reject(
  "EVERYBODY STAY CALM. STAY F***ING CALM. I WAS REJECTED"
);

//Promise.any() Method
Promise.any([firstPromise, secondPromise])
  .then((fasterPromise) => {
    console.log("Response from any method with no rejections - ", fasterPromise);
  })
  .catch((error) => {
    console.error("Error: ", error);
  });

//Promise.any() Method with rejections
Promise.any([rejectedPromise, rejectedPromise])
  .then((fasterPromise) => {
    console.log("Response from any method with rejections - ", fasterPromise);
  })
  .catch((error) => {
    console.error("Error: ", error);
  });


//Promise.any() Method
Promise.any([firstPromise, secondPromise]).then((fasterPromise) => {
  console.log("Response from any method - ", fasterPromise);
});

Output

Error:  [AggregateError: All promises were rejected]
Response from any method with no rejections -  Second Promise

4. Promise.race()

Input - An iterable of promises
Output - A promise that fulfils or rejects as soon as one of the promises in an iterable fulfils or rejects, with the value or reason from that promise

const firstPromise = new Promise((resolve, reject) => {
  setTimeout(resolve, 300, "First Promise");
});

const secondPromise = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "Second Promise");
});

const thirdPromise = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, "Third Promise");
});

const rejectedPromise = Promise.reject(
  "EVERYBODY STAY CALM. STAY F***ING CALM. I WAS REJECTED"
);

//Promise.race() Method
Promise.race([firstPromise, secondPromise])
  .then((fasterPromise) => {
    console.log(
      "Response from race method with no rejections - ",
      fasterPromise
    );
  })
  .catch((error) => {
    console.error("Error: ", error);
  });

//Promise.race() Method with rejections
Promise.race([secondPromise, rejectedPromise])
  .then((fasterPromise) => {
    console.log("Response from race method with rejections - ", fasterPromise);
  })
  .catch((error) => {
    console.error("Error: ", error);
  });

As the name of the method suggests, we have a race here. It does not matter whether the promises are fulfilled or rejected. The race method returns the fastest settled promise.

Output

Error:  EVERYBODY STAY CALM. STAY F***ING CALM. I WAS REJECTED
Response from race method with no rejections -  Second Promise

5. Promise.reject() and Promise.resolve()

You are already familiar with the reject method since I’ve used it in earlier examples. Basically, we use the reject method to reject a promise.

In addition, we have the resolve method which returns a promise that is resolved with the given value, or the promise passed as value, if the value was a promise object. Resolved is not to be confused with fulfilled. Please read this StackOverflow answer to learn more about it.

Fates

Promises also have two mutually exclusive fates, resolved and unresolved.

If we try to resolve or reject a promise and it has no effect, we say the promise is resolved.
If we try to resolve or reject a promise and it has an effect, we say the promise is unresolved.

Conclusion

To sum things up, we use promises to handle asynchronous operations in JavaScript. Especially, when there are multiple asynchronous operations running, it would be a nightmare to handle them if you don't know about promises.

I hope you learned something valuable from Today's article. If you liked it, drop a like and follow me so that you don't miss the upcoming articles. And as always, stay safe guys 😷

Higher-Order Functions - JavaScript Concepts Simplified

Thisura Thenuka — Thu, 23 Sep 2021 14:01:20 +0000

Hello guys, I'm back with another article in my JavaScript Concepts Simplified series. Today, I'm going to go through the concept of Higher-Order Functions.

This is not necessarily specific to JavaScript per se. But it is an essential concept you must learn when going forward with JavaScript. If you read my article regarding closures, you do already have some experience with higher-order functions even if you do not have an idea.

The term, Higher-Order Functions aka HOFs, is said to be coined way back in 1891.

Useful Terminology

Before learning Higher-Order functions, let's quickly check out few other concepts that would aid you in understanding higher-order functions better.

Functional Programming

Functional programming (often abbreviated FP) is the process of building software by composing pure functions, avoiding shared state, mutable data, and side-effects. Functional programming is declarative rather than imperative, and the application state flows through pure functions. Contrast with object-oriented programming, where application state is usually shared and colocated with methods in objects.

Source - Medium

First-Class Functions

In a programming language where functions are treated as variables, it is said to have First-Class functions. In such a language like JS, a function can be passed as an argument to other functions, can be assigned as a value to a variable and can be returned by another function

What is a Higher-Order Function?

A Higher-Order Function is a function that does at least one of the following things.

Takes one or more functions as arguments
Returns a function as a result

All the functions that are not higher-order functions are called first-order functions.

Usage

JavaScript has a list of inbuilt HOFs as well as we can write our own HOFs.

Inbuilt Higher-Order Functions

Array filter method

const numbers = [1, 2, 3, 4, 5, 6, 7]
const smallerThanFive = x => x < 5
console.log(numbers.filter(smallerThanFive)) // [1, 2, 3, 4]

As you can see, we are passing a function called smallerThanFive to the filter method as the callback function. Read more on the filter method here.

Array find method

const innings = [
    {player: "Sanga", score: 59},
    {player: "Mahela", score: 70},
    {player: "Angie", score: 85}
];
const higherThanSeventyFive = inning => inning.score > 75
console.log(innings.find(higherThanSeventyFive)) //{ player: 'Angie', score: 85 }

As you can see, we are passing a function called higherThanSeventyFive to the find method as the callback function. Read more on the find method here.

Array map method

const numbers = [1, 2, 3, 4]
const multiplyByTwo = x => x * 2
console.log(numbers.map(multiplyByTwo)) // [2, 4, 6, 8]

As you can see, we are passing a function called multiplyByTwo to the map method as the callback function. Read more on the map method here.

The list goes on and on. I'd like to recommend you to check out the MDN Docs articles on Array methods to learn more.

Custom Higher-Order Functions

Since all the above examples were about passing functions as parameters, let's make our own higher-order function return a function.

const multiply = (firstValue) => (secondValue) => firstValue * secondValue

Let me write this without the arrow function syntax to make things a bit clearer for you.

function multiply (firstValue) {
  return function (secondValue){
    return firstValue * secondValue;
  }
}

The multiply function gets the firstValue as an argument and returns a function that asks for the secondValue as an argument. Here is how you call this function.

multiply(10)(20) //Returns 200

Some of you might be thinking, "We can just write this in a single function and pass both values into that. Why did you use a higher-order function for this?". Yes, you are right. There is no need for writing a higher-order function to multiply two values.

But, if you want to make the inner functions not accessible to the outside, you can write a higher-order function. And learning to write higher-order functions would save you a lot of time.

I know this could be hard to grasp, especially if you are new to functional programming. I believe you understand what is happening in the above function. But some of you might not still understand the thinking process behind writing a higher-order function like this.

Let me take you through the thinking process so that you can attempt writing your own higher-order function.

Explaining The Thought Process

function multiply (firstValue) {
  //Do some stuff with firstValue
}

multiply(10)

Here you have a normal function that takes in an argument called firstValue. And then you realize that you have to write another function, but you don't want to make it accessible from the outside. So, what are your options?

function multiply (firstValue) {
  //Do some stuff with firstValue
  return function (secondValue) {
    //Do some stuff with firstValue and secondValue
  }
}

multiply(10)(20)

You can write it as a nested function. But then, there is no way for you to pass arguments from outside (You can pass the value to the outer function and then pass it to the inner function. But that is not a good coding practice). What you can do is to return the inner function and take in an argument from the inner function. Likewise, you can just keep writing functions inside functions as much as you need.

Conclusion

To sum things up, higher-order functions are just like regular functions in JavaScript. The only difference is that while the regular functions take in variables and return variables, Higher-Order functions take in functions and return functions.

I hope you learned something valuable from Today's article. If you liked it, drop a like and follow me so that you don't miss the upcoming articles. And as always, stay safe guys 😷

Closures - JavaScript Concepts Simplified

Thisura Thenuka — Mon, 20 Sep 2021 11:31:27 +0000

Hello guys, Today we are going to go over the concept of closure in JavaScript.

Background Terms

IIFEs aka Immediately Invoked Function Expressions are JavaScript functions that run as soon as they are defined. I am already writing a detailed article regarding IIFEs. So until then, if you do not know about IIFEs, just think of it as an anonymous function that runs automatically and here is the default syntax for it.

(function () {
  //Write your code here
})()

Lexical scoping is the concept of a variable defined outside a function being accessible inside another function defined after the variable declaration

What is a Closure?

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time

Source - MDN Docs

Let me simplify. Think you have an IIFE that has a variable called total.

(function () {
  let total = 0
})();

Usually, since the total variable is defined inside the IIFE as a local variable, we can only use the total variable inside the IIFE.

But there is one way around it. If you define another function inside the IIFE, then that function also can access the variables of the parent function (IIFE) and hence can access the total. Here is how that would look like.

(function () {
  let total = 0
  function print() {
    console.log("Here is the total : ", total)
  }
  print();
})();

This prints total's current value (0) on the console.

So, now you would say, "Right, but still the total variable is only accessible from inside the IIFE". Yes, you are absolutely right. So, let's just return the function.

You can think of functions in JavaScript as another variable type. We can just return the function and assign it into a variable. And since we are assigning the function reference to a variable, we don't even have to have a name for the inner function. Cool, right?

const addition = (function () {
  let total = 0
  return function (){
    total += 1
    console.log("The total is : ", total)
  }
})();

addition()
addition()

Here is the console output

The total is :  1
The total is :  2

Please note that the outer function doesn't have to be an IIFE. You can use the same concept with normal functions as well like in the following code snippet. I'm just using IIFEs to make the code cleaner.

//Using Normal Functions
function addition() {
  let total = 0;
  return function () {
    total += 1;
    console.log("The total is : ", total);
  };
}

//This returns the same console output as before
let returningFunction = addition()
returningFunction()
returningFunction()

You can just call this function as much as you want now. You are updating the value of a local variable from outside the function. This is the concept of closure in JavaScript.

If you want, we can take this a step further by returning a set of functions like this.

const manipulate = (function () {
  let total = 0
  return {
    increment : function () {
      total += 1
      console.log("The total is : ", total)
    },
    decrement: function () {
      total -= 1
      console.log("The total is : ", total)
    }
  }
})();

manipulate.increment()
manipulate.increment()
manipulate.decrement()

Here is the console output

The total is :  1
The total is :  2
The total is :  1

Multiple Nested Functions

Take a look at this example from the MDN Docs

// global scope
var e = 10;
function sum(a){
  return function(b){
    return function(c){
      // outer functions scope
      return function(d){
        // local scope
        return a + b + c + d + e;
      }
    }
  }
}

console.log(sum(1)(2)(3)(4)); // log 20

As you can see we can just keep writing anonymous functions inside functions and use all the passed values. This also can be done using named functions as well. But you have to write few more lines when calling the functions.

// global scope
var e = 10;
function sum(a){
  return function sum2(b){
    return function sum3(c){
      // outer functions scope
      return function sum4(d){
        // local scope
        return a + b + c + d + e;
      }
    }
  }
}

var sum2 = sum(1);
var sum3 = sum2(2);
var sum4 = sum3(3);
var result = sum4(4);
console.log(result) //log 20

Conclusion

Well, that is pretty much all you need to know to get started with JavaScript closures. Try to think of where you can add closure in your codebases. We will only get better if we start practising these concepts on a daily basis.

If you want to learn more in-depth stuff regarding closures like performance considerations, you should check out the MDN Docs article.

Thank you for reading my article. I hope you learned something valuable today. If you did, don't forget to follow my blog and share the article with your friends. And more importantly, stay safe 😷

Event Bubbling - JavaScript Concepts Simplified

Thisura Thenuka — Sat, 18 Sep 2021 17:30:10 +0000

Hello guys, welcome to another article in the JavaScript Concepts Simplified article series. Today, we'll be looking into Event Bubbling in JavaScript.

I'm just going to go through some of the basic things you need to know before going into the main event.

Background Knowledge

An event is an action or an occurrence that happens in your system. The simplest example would be the user clicking on a button.

For each event that is fired, we can write an event handler (A JavaScript function to handle the event) to do what we want to do. For example, we can write an event handler function to print something on the screen once the user clicks on the button.

We also have event listeners in JavaScript. Event listeners listen to the events happening. So, if we want to print something on the screen once the user clicks on the button, we need to first create an event listener to listen for the click event of the button.

When we are loading HTML pages in browsers, the browser creates a tree-like structure for each page called the DOM. For example, if you have a button inside your body tag, the path to the button element would be html -> body -> button.

Three Phases of Event Handling

When it comes to handling events, modern browsers have three phases.

Capturing Phase
Target Phase
Bubbling Phase

The Capturing Phase

The browser checks to see if the element's outer-most ancestor has an onclick event handler registered on it for the capturing phase, and runs it if so.

Source - MDN Docs

The Target Phase

The browser checks to see if the target property has an event handler for the click event registered on it, and runs it if so.

Then, if bubbles is true, it propagates the event to the direct parent of the selected element, then the next one, and so on. Otherwise, if bubbles is false, it doesn’t propagate the event to any ancestors of the target.

Source - MDN Docs

The Bubbling Phase

The browser checks to see if the direct parent of the element selected has an onclick event handler registered on it for the bubbling phase, and runs it if so.

Source - MDN Docs

Wait, What?

It is hard to grasp the issue by reading the above lines. Let me simplify. Here is the issue we are facing.

Think you have created a UI with two div blocks (Block A and Block B). Block B is placed inside Block A. And you have created event handlers for the click event of both div tags.

Now when you click on Block B, before calling B's event handler, the browser calls A's event handler function. Obviously, this is not what we expected. When we click on B, only the event handler of B should be called.

How do we fix this?

Luckily, we do have a solution for this. In the event object, we have a function called stopPropogation. You can call this function at the start of the event handler function of B. You will see that only the event handler function of B is getting executed this time.

When is Event Bubbling Useful?

There could be some use cases where this can be useful. For example, when you have a list of items and you want to do something for all of the items, you will usually have to add event listeners for all the items.

But since you now know the concept of event bubbling, you can just write and assign the event handler for the parent node and see the magic happen.

This concept is called event delegation. You can read more on that in this article.

Thank you for reading the article. Hope you learned something valuable today. And most importantly, stay safe guys 😷

Hoisting - JavaScript Concepts Simplified

Thisura Thenuka — Sat, 18 Sep 2021 05:15:19 +0000

Hello there, today we’ll look at the hoisting idea in JavaScript.

What is Hoisting

Hoisting is the process where the interpreter allocates memory for variables and function declarations before the execution of code.

Variables declared using the var keyword are initialized automatically with a value of undefined. When the keywords let and const are used to declare a variable, they will not be initialized with hoisting.

Interpreter vs Us

Declaring Variables – Using var keyword

console.log(sport)
var sport = "Cricket"

Take a look at the above code. We have used the variable before even declaring it. This should throw an error, right? Well, it does not. Here is when hoisting comes to the rescue.

Executing this code logs undefined in the console. You will understand why this happens when you see how the interpreter sees the code.

Here is how the interpreter sees the code.

var sport;
console.log(sport)
sport = "Cricket"

Declaring Variables – Using let/const keywords

console.log(player)
let player = "Sanga"

This should also log undefined as the output, right? Well, sadly the hoisting does not initialize let and const variables.

Important: Please note that all the declarations in JavaScript are getting "hoisted". It is just that when it comes to let and const, the declared variables stay uninitialized. They will only get initialized when the let or const statements are executed and hence throws an error. This time between the variable creation and initialization is called the Temporal Dead Zone. (Read this StackOverflow answer to learn more)

The above code throws a ReferenceError since the variable does not get initialized in this case.

ReferenceError: Cannot access 'player' before initialization
    at Object.<anonymous> (C:\Users\ThenukaAluthGedara\Desktop\Hoisting.js:1:13)
←[90m    at Module._compile (internal/modules/cjs/loader.js:1063:30)←[39m
←[90m    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)←[39m
←[90m    at Module.load (internal/modules/cjs/loader.js:928:32)←[39m
←[90m    at Function.Module._load (internal/modules/cjs/loader.js:769:14)←[39m
←[90m    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12)←[39m
←[90m    at internal/main/run_main_module.js:17:47←[39m
Please note that only declarations are hoisted in JavaScript.

The following code still does throw a ReferenceError since the variable has only been initialized.

console.log(name)
name = "Sanga"

Hoisting with Function Declarations

Both following code snippets work fine since the interpreter always sees the function declarations first.

greeting("The Coding Cricketer")

function greeting(siteName){
    console.log("Welcome to " + siteName)
}

function greeting(siteName){
    console.log("Welcome to " + siteName)
}

greeting("The Coding Cricketer")

Conclusion

It is always a good coding practice to declare the variables at the top of the scope

You will not be able to use variables without declaring them first if you use “use strict” in JavaScript. I will discuss this in a future article.

Thank you for reading my article. I hope you learned something valuable today. If you liked it, drop a like and subscribe to my blog. I’ll see you soon with my next article. Stay Safe 😷

Automate your Deployments using Bash Scripts

Thisura Thenuka — Sun, 09 May 2021 17:19:01 +0000

If you are a developer who is working on a project that doesn't have a code pipeline, this article would help you save a lot of time. Well, I understand that could be a very small group of people, but I am happy even if only one person learns something from this article.

In this article, I am going to cover the reason why you should automate your tasks as a developer and how you can use bash scripts to help you with that. Besides, I am going to explain some basic bash concepts to help you understand my bash script which I'll be sharing later in the article.

Without further ado, let's hop into the article.

Why should we focus on Automation as Developers?

Getting rid of Repetitive Tasks

As developers, we usually have to go through a set of repetitive tasks every single day. You'll be able to identify those tasks if you observe your daily routine. I believe that if I have to do the same thing twice, I need to automate it (I haven't automated much yet, but I always try to live by this). If you think about it, this actually is a core coding principle. This is just like writing a function to stop writing the same code over and over again.

Self-Satisfaction

I don't know if you ever have tried to automate something. It feels so satisfying when you finish automating something. The process is fun and interesting. You will learn so many things along the way. I didn't know much about Bash until I wanted to automatically deploy my services without doing individually which was really time-consuming. But now, I do have sound knowledge about Bash.

What are Bash Scripts?

Bash is a command language and also is a UNIX shell. It is the default command interpreter among Linux/GNU systems around the world. BASH (Bourne-Again SHell) was released in 1989 as a free software replacement for the Bourne Shell.

Bash Scripts are just plain text files with a set of commands. Basically, these are commands what we would usually type in on the command line. We just have created a file to put all the commands in it so that when we run that file, all the commands will be executed.

How can we use Bash Scripts for Automation?

Here what we are just going to create a single bash script file by putting in all the commands that we would have to type in when we log into the server. Instead of typing that set of commands individually which takes a lot of time, we are going to run this bash script file and let the magic happen.

Before I go into revealing and explaining my code, I think it would be much better if we learn the basics of Bash scripts. If you have a decent knowledge about BASH commands, you may directly skip over to the bash script.

Bash Basics

Creating a file

Bash Scripts have an extension of .sh

You can create a bash script with nano testing.sh or touch testing.sh

Parts of a Bash Script



#!/bin/bash

# Created by Thisura
echo "Hello World"

The first line contains two parts. #! is called the Shebang. Next to the Shebang, we have to specify the path to the interpreter (You can find this by typing which bash). If you exactly don't know the path of the interpreter, you can just specify the first line like this.

#!/usr/bin/env bash

Important: There can't be any spaces between the characters in the first line. This line always has to be the first line of the bash script.

The 3rd line is a comment. Comments start with # in Bash.

The 4th line is printing Hello World in the terminal.

Making it executable

To make a bash script executable, we have to type chmod +x testing.sh.

Running a Bash Script

We can run the bash script file by typing ./testing.sh (Here the dot indicates the current directory) or bash testing.sh

We can also run the bash script without specifying the directory. For that, we need to add the script's directory to the $PATH variable by typing PATH=$PATH:/path/to/script.

The motivation behind creating the script

I have been working with Spring Boot and React environments. So, the services that I have to deploy usually are jar files and React builds. After uploading the releases to the server, I usually have to go to each folder and kill the existing service, run the new service and check if the service is running properly. In some projects, there are about 8 services and it takes forever to do the deployment.

So, in my free time, I began searching for a way to speed up the process. After some research, I realized creating a bash script would be the easiest and quickest way forward. So, I started learning Bash and after a lot of trial and error, I managed to create a bash script file that literally saved me literally hours. I'm still learning and trying to optimize what I have.

The Bash Script for Automating Deployments



#!/bin/bash

frontend_path='/root/Deployments/Frontend/bp-f-v0.4.0-zsic-iat'
backend_path='/root/Deployments/Backend'
auth_path='/root/Deployments/Auth'
reporting_path='/root/Deployments/Reporting'
claims_path='/root/Deployments/Claims'
email_path='/root/Deployments/Email'

reporting_release_name='rp-s-v0.3.0-zsic-iat.jar'
reporting_sleep=30

backend_release_name='bp-s-v0.4.7-zsic-iat.jar'
backend_sleep=30

auth_release_name='ua-s-v1.2.2-zsic-iat.jar'
auth_sleep=30

claims_release_name='cl-s-v5.0.2-zsic-iat.jar'
claims_sleep=30

email_release_name='em-s-v0.0.1.-zsic-iat.jar'
email_sleep=30

function kill_existing_services {
    echo "Killing Exisiting Services : "
    fuser -k 8087/tcp && sleep 2
    fuser -k 8091/tcp && sleep 2
    fuser -k 8206/tcp && sleep 2
    fuser -k 8001/tcp && sleep 2
    fuser -k 9988/tcp && sleep 2
    fuser -k 6999/tcp && sleep 2
    echo " "
}

function deploy_releases {
    cd $1
    java -jar $2 &
    sleep $3
    PID=$!
    kill -INT $PID
}

function checking_service_status {
    echo "Checking if services were deployed successfully : "
    echo "Reporting  Service : "
    fuser 8087/tcp && sleep 2
    echo "Backend  Service : "
    fuser 8091/tcp && sleep 2
    echo "Auth  Service : "
    fuser 8206/tcp && sleep 2
    echo "Email  Service : "
    fuser 9988/tcp && sleep 2
    echo "Claim  Service : "
    fuser 8001/tcp && sleep 2
    echo " "
}

function deploying_frontend {
    echo "Deploying Frontend Service (Please press Ctrl + C once the running stops)"
    cd $frontend_path
    nohup node server.js &
}

kill_existing_services
echo "Deploying Services : "
deploy_releases $reporting_path $reporting_release_name $reporting_sleep
deploy_releases $backend_path $backend_release_name $backend_sleep
deploy_releases $auth_path $auth_release_name $auth_sleep
deploy_releases $claims_path $claims_release_name $claims_sleep
deploy_releases $email_path $email_release_name $email_sleep
echo " "
checking_service_status
deploying_frontend

Firstly, I have created variables for all the paths, release names and I also have specified an amount of time until which the thread will be sleeping (Until that relevant service is deployed).

I've created this bash script file using four functions.

kill_existing_services - This function kills the current running services in the specified ports where our services are running

deploy_releases - This function will deploying our backend releases in the server
checking_service_status - This function will check if the services were deployed in the specified ports

deploying_frontend - This function will deploy the frontend service

When calling the deploy_releases function, I am passing the release path, release name and sleep time as parameters. $1 is the first parameter and so on. I have made the thread sleep for 30 seconds to give time for each service to be deployed. This does differ on how good your internet connection is. You may adjust the time accordingly.

I believe other functions are pretty much self-explanatory.

I know this is not the perfect script for this. I am sharing this script for you to get an idea about how you should go on automating your tasks.

Conclusion

In this article, you learned the importance and benefits of automating repetitive tasks as a developer. In addition, you learned the basic of Bash scripts and I shared my deployment script for you to get an idea about how you would create your own.

If you feel like you learned something valuable today, please drop a like and share the article with your friends. If you are interested in studying Bash further, I highly recommend you guys to start by reading the following article.

https://www.taniarascia.com/how-to-create-and-use-bash-scripts/