DEV Community: deepak pd

How to convert your website from HTTP to HTTPS

deepak pd — Sat, 29 May 2021 04:49:33 +0000

Recently I developed a personal blog website, bought a domain and wanted to go-live, but had no idea on how to make my website secure. It wasn't easy to find the list of steps to achieve this, so I wrote an article so that it will be helpful for others.

Why HTTPS?

If you want to protect communication between the client and the server from eavesdroppers then HTTPS is the way to go because if anyone tries to listen to your communication it will be just random characters to them as HTTPS makes all the calls encrypted. Also browsers nowadays enforce all the sites to be secured and you can notice a padlock icon beside the URL, whereas websites which doesn't have a padlock icon beside the URL are flagged as not secured and a warning is displayed before you can continue to browse.

Procedure

Prepare a Certificate Signing Request (CSR).
Get certificate signed and install it.

Now let us discuss each step in detail

1.) Prepare CSR

OpenSSL should already be installed in your system.

Below command will generate CSR as well as a private key

openssl req -new -newkey rsa:2048 -nodes -keyout domain.key -out domain.csr

openssl - openssl toolkit
req - request for certificate
-new -newkey - generates a new certificate request and a new private key
rsa:2048 - generates a RSA key 2048 in size
-nodes - if a private key is created then it will not be encrypted
-keyout - indicates domain you are generating key for
-out - specifies the name of your .csr file

When the above command is executed, text based questionnaire will be displayed and you need to fill out the information.

📓Note : - You need to enter your domain name of your website here → Common Name (e.g. server FQDN or YOUR name) []: domain_name.com

This is because the certificate authority will generate a public key to the particular domain.

2.) Get certificate signed and install it

There are many CAs (certificate authorities) in the market, most of them are paid and few offer free signed certificates up to 3 months validity. Below are few CAs

SSL
ZeroSSL

I have used SSL to get my signed certificate which is free and has a validity of 3 months.

Below are the steps to get signed certificate from SSL

Create an account
Go to https://www.ssl.com/certificates/free/ for free trail of 90 days validity.
Checkout the 90 day free trail certificate

open the .csr file that was generated in your local, copy the contents and paste it in CSR field in the website.

Domain Validation can be done in many ways

from the dropdown select add cname entry and it will create cname with random characters for domain validation, copy it and create DNS record in you domain account, and come back to ssl.com and click on validate button.

Now you will be able to download the certificate and install it in your server by following the below guide, which will be available in your SSL dashboard.

After following the guide and installing the certificate in your server go to DNS checker and enter your domain in the input field and check if the DNS propagation has happened.

There you go! You have successfully converted your website to HTTPS.

Hope this was helpful, let me know if you face any issues.

How I Dockerized my Next.js website?

deepak pd — Sat, 08 May 2021 05:20:22 +0000

Learn how to use Docker to create images for development and production.

Imagine that you have developed a full fledged working application and want other developers to contribute to the project. Now if the application consists of different components like UI, running server, database etc. The new developer should install the exact configuration of the entire stack on to his/her system before starting the development. To overcome this issue Docker comes to the rescue.

What is Docker?

Docker is an open platform for developing, shipping, and running applications. Docker enables you to separate your applications from your infrastructure so you can deliver software quickly. With Docker, you can manage your infrastructure in the same ways you manage your applications. By taking advantage of Docker’s methodologies for shipping, testing, and deploying code quickly, you can significantly reduce the delay between writing code and running it in production.

Multistaging dockerfile for development and production

I created a common docker file for both development and production. Dockerfile is used to create an image of the application, using this image n number of containers can be created, which is like a running version of the image.

🐬Dockerfile

#Creates a layer from node:alpine image.
FROM node:alpine

#Creates directories
RUN mkdir -p /usr/src/app

#Sets an environment variable
ENV PORT 3000

#Sets the working directory for any RUN, CMD, ENTRYPOINT, COPY, and ADD commands
WORKDIR /usr/src/app

#Copy new files or directories into the filesystem of the container
COPY package.json /usr/src/app
COPY package-lock.json /usr/src/app

#Execute commands in a new layer on top of the current image and commit the results
RUN npm install

##Copy new files or directories into the filesystem of the container
COPY . /usr/src/app

#Execute commands in a new layer on top of the current image and commit the results
RUN npm run build

#Informs container runtime that the container listens on the specified network ports at runtime
EXPOSE 3000

#Allows you to configure a container that will run as an executable
ENTRYPOINT ["npm", "run"]

🐙Docker-Compose to create containers with ease.

Suppose you have an application that consists of UI, running server, DB and you want to create containers for all the components. One way is to create Dockerfile for each of the component and start the containers one by one manually or docker-compose can be used to start the entire stack with just one command.

Below is the common docker-compose.yml file for both development and production

🐬docker-compose.yml

version: '3' #This denotes that we are using version 3 of Docker Compose
services: #This section defines all the different containers we will create.
  blog_deepak: #This is the name of our Nextjs application.
    build: #This specifies the location of our Dockerfile
      context: . #This specifies the location of our Dockerfile
    ports: #This is used to map the container’s ports to the host machine.
      - "3000:3000"

🐬docker-compose.dev.yml

version: "3" #This denotes that we are using version 3 of Docker Compose
    services: #This section defines all the different containers we will create.
    blog_deepak: #This is the name of our Nextjs application.
        command: dev #command to execute
                #This is just like the -v option for mounting disks in Docker. In this              example, we attach our code files directory to the containers’ ./code              directory.  This way, we won’t have to rebuild the images if changes are           made.
        volumes:
            - .:/usr/src/app
            - /usr/src/app/node_modules
            - /usr/src/app/.next

🐬docker-compose.prod.yml

version: "3" #This denotes that we are using version 3 of Docker Compose
services: #This section defines all the different containers we will create.
    blog_deepak: #This is the name of our Nextjs application.
        command: prod #command to execute

I have configured my scripts in package.json to run docker-compose.

package.json

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "prod": "next start",
    "dev:up": "docker-compose -f docker-compose.yml -f docker-compose.dev.yml up",
    "prod:up": "docker-compose -f docker-compose.yml -f docker-compose.prod.yml up"
  },

By default, Compose reads two files, a docker-compose.yml and an optional docker-compose.override.yml file. By convention, the docker-compose.yml contains your base configuration. The override file, as its name implies, can contain configuration overrides for existing services or entirely new services.

To use multiple override files, or an override file with a different name, you can use the -f option to specify the list of files. Compose merges files in the order they’re specified on the command line.

How to Optimize your site using Intersection Observer API

deepak pd — Tue, 08 Dec 2020 08:33:28 +0000

Performance of the website was one of the areas I wanted to concentrate during this pandemic as I had ample amount of time working from home. Optimizing the loading of images was one of the task in my Todo list. As any sane person would do, I started Googling and the best way to do it was by using IntersectionObserver. Let us learn step-by-step on how to use IntersectionObserver API.

What is IntersectionObserver?

It is an asynchronous way to observe an interaction between child element and parent element.

Usecases of IntersectionObserver

Infinite scrolling of the website where the content is loaded as and when you scroll.
Lazy-loading of images.
Performing animations only when required.

Consider a web page which has infinite number of images. Downloading all the images on the page load is a terrible idea. One way is to load certain number of images on the page load and the rest can be downloaded when the user scrolls through the page, which can be achieved using onScroll event. onScroll event will be fired each time the user scrolls and it is run on the main thread which results in frustrating user experience.

IntersectionObserver API lets user monitor a target element whenever it enters or exits parent element. Using this API developers can optimize their website because it doesn't run on the main thread like onScroll event does.

How to create IntersectionObserver?

IntersectionObserver needs configuration which helps to detect the interaction between two elements.

let options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

options is the configuration object that is needed to be passed to IntersectionObserver constructor. The callback function will be fired when the threshold of the target element is satisfied.

root is used to specify the parent element. If not explicitly specified then the viewport will be the root element.
rootMargin specifies the parent elements margin. Similar to css margins.
Here threshold 1.0 means 100% of the target element should be inside #scrollArea.

How to target an element to be observed?

let target = document.querySelector('#listItem');
observer.observe(target);

When ever the target element satisfies the threshold the callback is triggered the callback receives list of IntersectionObserverEntry objects.

let callback = (entries, observer) => {
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element:
    //   entry.boundingClientRect
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds
    //   entry.target
    //   entry.time
  });
};

The property of isInteracting can be checked to see if the target element is currently interacting with the root.

Lets learn using a simple example using ReatJS.

Let us create a simple infinite sctolling images in ReactJS s to demonstrate IntersectionObserver API.

Create a custom hook(UseIO.j) which creates the IntersectionObserver and observes the target element.

import { useEffect, useRef, useState } from 'react';

const useIO = (options) => {
    const [elements, setElements] = useState([]);
    const [entries, setEntries] = useState([]);

    const observer = useRef(null);

    const { root, rootMargin, threshold } = options || {}

    useEffect(() => {
        if (elements.length) {
            console.log('-----CONNECTING OBSERVER------');
            observer.current = new IntersectionObserver((ioEntries) => {
                setEntries(ioEntries);
            }, {
                threshold,
                root,
                rootMargin
            });

            elements.forEach(element => {
                observer.current.observe(element);
            });
        }
        return () => {
            if (observer.current) {
                console.log('-----DISCONNECTING OBSERVER------');
                observer.current.disconnect();
            }
        }
    }, [elements, root, rootMargin, threshold]);

    return [observer.current, setElements, entries];
};

export default useIO;

Create Image.js component.

import React from "react";
import PropTypes from "prop-types";

const Image = ({ src, srcSet, alt, fallbackSrc, isLazy, onClick, style }) => (
  <img
    src={isLazy ? fallbackSrc : src}
    alt={alt}
    className={isLazy ? "lazy" : ""}
    srcSet={isLazy ? "" : srcSet}
    data-srcset={srcSet}
    data-src={src}
    style={style}
    onClick={onClick}
  />
);

Image.propTypes = {
  src: PropTypes.string.isRequired,
  alt: PropTypes.string.isRequired
};

Image.defaultProps = {
  onClick: () => {},
  isLazy: false
};

export default Image;

Create App.js

import React, { useEffect, useState } from "react";
import axios from "axios";

import Image from "./Image";
import useIO from "./useIO";
import fallbackImage from "./logo.svg";

function App() {
  const [data, setData] = useState([]);

  const [observer, setElements, entries] = useIO({
    threshold: 0.25,
    root: null
  });

  useEffect(() => {
    axios
      .get("https://jsonplaceholder.typicode.com/photos")
      .then((res) => {
        setData(res.data.slice(0, 15));
      })
      .catch((err) => {
        console.error(err);
      });
  }, []);

  useEffect(() => {
    if (data.length) {
      let img = Array.from(document.getElementsByClassName("lazy"));
      setElements(img);
    }
  }, [data, setElements]);

  useEffect(() => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        let lazyImage = entry.target;
        lazyImage.src = lazyImage.dataset.src;
        lazyImage.classList.remove("lazy");
        observer.unobserve(lazyImage);
      }
    });
  }, [entries, observer]);

  const images = data.map((item) => (
    <Image
      key={item.id}
      src={item.thumbnailUrl}
      fallbackSrc={fallbackImage}
      isLazy
      style={{
        display: "block",
        height: "150px",
        width: "150px",
        margin: "auto",
        marginBottom: "15px"
      }}
      alt="thumbnails"
    />
  ));
  return <div className="App">{images}</div>;
}

export default App;