Link to Course: https://learn.piyushgarg.dev/learn/twitter-clone?COUPON=EARLY_BIRD

Overview

In this tutorial, we will create a FullStack Twitter Clone that allows users to create and post tweets, follow other users, and like, and view their own profiles and the profiles of other users.

Tech Stack

• Node.js for our backend code would run the graphql server inside the node.js environment.

• GraphQL for our API provides a flexible and efficient way to define and query our data model.

• Prisma ORM for our database ORM, which provides a type-safe and easy-to-use interface for interacting with our PostgreSQL database.

• PostgreSQL is our database, which is a powerful and reliable relational database system.

• Supabase for hosting and managing cloud Postgresql db.

• Redis for query caching on the server side and increasing query speeds

• Google OAuth for Sign in with Google

• JSON WEB TOKENS for authentication

• Next.js for our front end is a popular framework for building React applications with server-side rendering and optimized performance.

• TailwindCSS for styling and reusable components.

• Codegen for typesafe graphql queries and mutations.

• Graphql-Request as API client for client-server communication

• React-Query for client-side data caching and query caching

• Typescript to maintain code quality and write type-safe code.

• Amazon Web Services for storage and deployments.

Prerequisites

To follow along with this tutorial, you will need the following:

• Basic programming knowledge

• Min 6 months of experience with Node.js and Express

• Beginner-level experience with React and NextJS

• Overview of Graphql (Optional)

Learning Outcomes

After this course, learners would have a strong hands-on over several latest technologies, tools and programming practices such as:

• How to use Graphql with Express

• How to use PrismaORM with Node and PostgreSQL

• How relational DBs work and how to make relations in SQL database

• Complex Joins and Lookups in SQL using Prisma ORM

• Client Query Caching with React Query

• On-Demand Query Invalidation

• Server Side Data Fetching and Rendering with Next.js SSR

• How to Implement OAuth from Scratch

• Creating Custom Hook Wrappers around React Query

• Redis Caching to increase query speeds

• Configuring and Setting up Custom S3 Bucket Policy on AWS

• Uploading Media to AWS S3 using Pre-Signed URLs

• Working in Typesafe code check with Typescript and Codegen

Link to Course: https://learn.piyushgarg.dev/learn/twitter-clone?COUPON=EARLY_BIRD

So, let's get started.

Step 1. Create an AWS Account ☁️

In order to deploy functions to AWS Lambda, you should have an active AWS account. Creating an AWS account is really easy and straightforward. Head over to Signup AWS and create your free account.

Now, Once you have set up your AWS account, let's head over to the next step.

Step 2. Installations and Setup 🚀

1. Node.js

You must have Node.js installed on your machine. If you don't have node.js installed you can do so simply by visiting https://nodejs.org/en/.

2. AWS CLI Tools

Once you have installed node.js, you now need to install AWS CLI tools on your machine. Installing AWS CLI is really easy. Below are the steps to install the same.

Simply copy-paste the following command on your terminal.

Linux

curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"

unzip awscliv2.zip

sudo ./aws/install

MAC OS

curl "https://awscli.amazonaws.com/AWSCLIV2.pkg" -o "AWSCLIV2.pkg"

sudo installer -pkg AWSCLIV2.pkg -target /

Windows

msiexec.exe /i https://awscli.amazonaws.com/AWSCLIV2.msi

Instructions Link: https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html

3. Serverless CLI

npm install -g serverless

Serverless Installation Instructions: https://www.serverless.com/framework/docs/getting-started

Great, now that you have everything set up, Let's configure AWS credentials on our local machine.

Step 3: Setting up AWS Credentials

In this step, we are going to set up AWS credentials with our AWS CLI so that our AWS CLI can communicate to our AWS account.

To set up AWS Account credentials, sign in to your AWS Console and follow along with me.

• Click on your account name in the top right corner.

• Click the "Security credentials" option.

• Expand the "Access Keys" Tab.

• Click the "Create Access Key" button.

• Copy Your Access ID and Secret.

Now, open your terminal and run the following command

aws configure

Paste your Access ID and Secret here and complete the setup

Great, now we are ready to code.

Step 4: Let's Code 🧑🏻‍💻

In this step, we are going to code our function and deploy it to amazon web services. Open your favourite IDE or text editor (VS code in my case) and follow me along.

First of all, create a new folder and open this folder in your fav text editor. I am going to name my folder my-functions. You can name it whatever you like.

Now open the terminal at the folder and run the following command:

serverless create --template aws-nodejs

The above command would generate some boiler plate code.

Open the handler.js file and this is the file where are going to write our function. Feel free to remove the existing code in this file and start with a clean file.

module.exports.handlerFunction = async (event, context) => {
  console.log("I am inside aws lambda function");
  return {
    statusCode: 200,
    body: JSON.stringify({ message: "Alright, It is working!" }),
  };
};

Great, now open serverless.yml file and feel free to clear all the content from here as well. Paste the following code in serverless.yml file.

service: my-functions
frameworkVersion: "3"

provider:
  name: aws
  runtime: nodejs12.x

functions:
  myFunction:
    handler: handler.handlerFunction
    events:
      - http:
          path: /api/say-hello
          method: GET
          cors: true

Great, now we are ready to deploy our function to AWS console.

Step 5. Deployment

To deploy your functions to AWS console, simply open your console and paste the following command on the console.

serverless deploy

This will take a while and deploy your functions using the serverless.yml file to your aws console.

Testing our Implementation

Navigate to your AWS console and search for AWS Lambda

Here I can see that my function is successfully deployed

This is the code that we wrote locally and deployed using serverless

Click on the API Gateway icon

Here is the public endpoint URL to invoke our lambda function

So, let's get started.

Step 1: Setting up a free Firebase account.

In this step, we would create a project on the firebase console. Navigate to https://firebase.google.com/ and log in with your Google account. It's absolutely free and no credit card required. After logging in, create a project in firebase, and enter any project name of your choice, once done click on submit and wait for the project to finish building up. Now, you would see a dashboard something like this

Great, now click on the setting icons and navigate to project settings as shown in the following image.

In project settings, navigate to the service accounts tab to download our credentials.

In service accounts, click on the Generate new private key button to generate your key.

Now, your credentials.json would be downloaded to your machine. Copy this file to your project folder where we are now going to build the project.

Let's Code

Great, as you have successfully set up your firebase account, now let's write some code. Firstly, init your project by running the following command: npm init -y Great, now install the following dependencies.

• firebase-admin
• uuid

  Command:

  npm install firebase-admin uuid

Great, now fire up your favorite code editor. (vs-code) and code along with me.

Requiring the dependencies.

const firebaseAdmin = require('firebase-admin');
const { v4: uuidv4 } = require('uuid');

Importing our creditions.json file, the one we downloaded from firebase dashboard

// change the path of json file
const serviceAccount = require('./hashnode-dev-c6f91-firebase-adminsdk-20fsu-2d218c1c69.json');

initializeApp

const admin = firebaseAdmin.initializeApp({
    credential: firebaseAdmin.credential.cert(serviceAccount),
});

Create a storage refrence

const storageRef = admin.storage().bucket(`gs://hashnode-dev-c6f91.appspot.com`);

.bucket() function accepts the bucket name as a parameter. To get your bucket name, open the firebase dashboard, navigate to the Storage tab, and then click on Get started.

After clicking on Get started, firebase will ask you cloud storage location, you can go with default storage.

Now, copy the bucket name of your storage.

and then create a firebase storage refrence. (As we did earlier)

const storageRef = admin.storage().bucket(`gs://hashnode-dev-c6f91.appspot.com`);

Upload files

Now, create a simple function uploadFile that accepts filePath and fileName as params, and uploads the file to the firebase storage.

async function uploadFile(path, filename) {
    return storageRef.upload(path, {
        public: true,
        destination: `/uploads/hashnode/${filename}`,
        metadata: {
            firebaseStorageDownloadTokens: uuidv4(),
        }
    });
}

Great, now let's test our function.

(async() => {
    await uploadFile('./mypic.png', "my-image.png");
})();

Let's start the server: node index.js.

As you can see, my image file is successfully uploaded 🚀.

Creating public and downloadable URLs of the uploaded files.

So far, we have successfully uploaded the file to firebase storage, but we don't have a public URL that is shareable and downloadable. So, let's add some code and implement this.

Edit rules in firebase dashboard.

In order to share the public URL, we need to change some rules in the Firebase dashboard. In the Storage tab, navigate to the Rules tab and change the default rule to the rule pasted below.

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

Great, Now inside the uploadFile function, Add the below code that is responsible for generating a public URL.

Updated uploadFile function:

async function uploadFile(path, filename) {

    // Upload the File
    const storage = await storageRef.upload(path, {
        public: true,
        destination: `/uploads/hashnode/${filename}`,
        metadata: {
            firebaseStorageDownloadTokens: uuidv4(),
        }
    });


    return storage[0].metadata.mediaLink;
}

Let's test our implementation

(async() => {
    const url = await uploadFile('./mypic.png', "my-image.png");
    console.log(url);
})();

Run the server: node index.js

As you can see, I got my link to download the file.

Complete Code

// index.js
const firebaseAdmin = require('firebase-admin');
const { v4: uuidv4 } = require('uuid');

const serviceAccount = require('./hashnode-dev-c6f91-firebase-adminsdk-20fsu-2d218c1c69.json');

const admin = firebaseAdmin.initializeApp({
    credential: firebaseAdmin.credential.cert(serviceAccount),
});

const storageRef = admin.storage().bucket(`gs://hashnode-dev-c6f91.appspot.com`);

async function uploadFile(path, filename) {

    // Upload the File
    const storage = await storageRef.upload(path, {
        public: true,
        destination: `/uploads/hashnode/${filename}`,
        metadata: {
            firebaseStorageDownloadTokens: uuidv4(),
        }
    });


    return storage[0].metadata.mediaLink;
}

(async() => {
    const url = await uploadFile('./mypic.png', "my-image.png");
    console.log(url);
})();

Thank you for reading. Happy Learning 🚀.

Producer side

Consumer side

and it's all real-time.

Tech stack

• Backend: Node.js & Express
• Front-End: React.js
• Video Confrence: WebRTC
• Real-Time code sharing: Socket.io

Important

Now, I am deciding to implement more features such as chatting, IDE with compiling options, and way more. For that I need collaborators, and If you feel like you can collaborate with me, please drop your details in the comments section.

Also, it's really difficult to explain and show the code of the whole project, but I would be sharing the GitHub URL of the backend code. Also, I would be sharing the front-end code only with my subscribers. So, If you haven't subscribed yet, please do so.

I would try to publish a series about this application and step by step guide so that you can also build this application. Meanwhile, you all can read the webRTC series that I have published: webRTC Series by Piyush Garg.

Code link for the project: webRtc Collab Project

Installation

Open a terminal at the project's root dir and run the following commands:

• npm install
• npm run build
• IP=<YOUR IP ADDRESS> npm start

and then open http://localhost:8000/.

Firstly, create a room with a name let's say 'a', and then again open ``http://localhost:8000/``` in some other browser or incognito tab. Now just type your room name 'a' in the join section and click join room. That's it. Try to type something on the text area where you created the room and check the result on the consumer side.

Happy learning 🚀

This article would be really short and sweet, as sharp (the library we are using) is powerful and great. It does all the things under the hood, so we need to worry.

Setup

Firstly, we would set up our project by installing one dependency i.e sharp. Sharp is a great library for image processing. So, install the sharp by running npm install sharp.

const sharp = require('sharp');

Great, now let's code.

Converting images

async function convertImg(img) {
    return await sharp(img)
          .toFile('output.png')
}   

convertImg('/images/input.jpeg')

Resizing quality of images

async function resizeBy(img, { height, width }) {
    return await sharp(img)
            .resize({ height, width })
            .toFile('output.png')
}

Rotating images

async function rotateImage(img) {
    return await sharp(img)
                .rotate()
                .resize(null, 200)
                .toFile('output.png')
}

and you can even do tons & tons more manipulation with sharp.

Note: The best part of this article is at the last, so, please read this article till the end. 🙂

Building an Instagram bot with node.js is really easy. All you need is an Instagram account and node.js installed on your machine.

So, let's get started.

Setup project

Firstly, create an empty project and run npm init -y command to create package.json file. After that install instagram-web-api package to get started. npm install instagram-web-api

Great, now open your fav editor and code along with me.

Login to instagram

In this step, we would create an Instagram client and authenticate via username and password.

const Instagram = require('instagram-web-api');

let username = '<YOUR_USERNAME>';
let password = '<YOUR_PASSWORD>';

const client = new Instagram({ username, password });

(async() => {
    await client.login();
    const profile = await client.getProfile();
    console.log('profile');
})()

Now, Let's play around with the API

Upload photos to your Instagram account

const uploadPhoto = async (photoUrl) => {
    const { media } = await client.uploadPhoto({ photo: photoUrl });
    console.log(`Pic uploaded!!`);
}

uploadPhoto('https://example.com/cat.png')

Change your display picture

const changeMyDp = async (photoPath) => {
    await client.changeProfilePhoto({ photo: photoPath });
    console.log('DP changed!!');
}

Update Instagram profile

const updateProfile = async (data) => {
    await client.updateProfile(data);
    console.log('Profile updated')
}

updateProfile({ name: 'Piyush', username: 'piyushgargdev', bio: 'piyushgarg.hashnode.dev' });

Okay, I hope that now you are pretty much familiar with API, now let's build a bot that runs at a specific time and likes, comments on the posts based on hashtags.

Instagram BOT

To get started, go and install node-cron. This enables us to schedule tasks on a specific time. npm install node-cron.

Now, I am going to firstly build a function that fetches posts by hashtags, then I would loop over posts and like them.

const likePostsByHashTag = async (hashtag) => {
    const LIMIT = 10;
    const feed = await client.getMediaFeedByHashtag({ hashtag });
    const posts = feed.edge_hashtag_to_media.edges;
    for (let i = 0; i < LIMIT; i++) {
        const mediaId = posts[i].node.id

        setInterval(() => {
            await client.like({ mediaId:  mediaId}); // let each like has a gap of 4 seconds
        }, 4000);

    }
}

Cool, now let's work with node-cron and schedule our posts in such a way that one post is uploaded every day at 12:00am.

Import node-cron

const cron = require('node-cron');

Create post array that you want to schedule

const posts = [
    'https://expample.com/pic1.png',
    'https://expample.com/pic2.png',
    'https://expample.com/pic3.png',
    'https://expample.com/pic4.png',
    'https://expample.com/pic5.png',
]

Define current variable to keep track of current post.

let current = 0;

Define a function that uploads the photo to Instagram

const uploadPhoto = async (photoUrl, caption) => {
    const { media } = await client.uploadPhoto({ photo: photoUrl, caption });
    current++;
    console.log(`Pic uploaded!!`);
}

Finally, let's schedule them with node-cron

// 0 0 0 * * ? - means everyday at 12:00am 
// Read more about these expression at https://www.npmjs.com/package/node-cron

cron.schedule('0 0 0 * * ?', async () => {
    await uploadPhoto(posts[current], 'Great! Its posted automatically!');
});

Done 🙂

To read more about webRTC architectures, visit Different WebRTC Architectures

Note: This article is a part of the WebRTC Series, if you haven't read previous articles, please read them before this one.

Let's begin

Setting up the server

Firstly, set up a basic express server.

const express = require('express');

const app = express();

app.use(express.json());
app.use(express.static('./public'))

app.listen(9000, () => console.log('Server started!!'))

Install wrtc by running npm install wrtc and import the library.

const wrtc = require('wrtc');

Now, start by creating a /broadcast route for the broadcaster.

app.post('/broadcast', async (req, res) => {
    const { sdp } = req.body;
    const peer = new wrtc.RTCPeerConnection();
    peer.ontrack = (e) => handleTrackEvent(e, peer);
    const desc = new wrtc.RTCSessionDescription(sdp)
    await peer.setRemoteDescription(desc);
    const answer = await peer.createAnswer();
    await peer.setLocalDescription(answer);
    res.json({
        sdp: peer.localDescription
    })
});

function handleTrackEvent(e, peer) {
    console.log(e.streams[0])
    senderStream = e.streams[0]; // create a global variable senderStream
}

This is the route where we would first create an offer on the client-side and then create a peer-to-peer connection with our server (just like we used to do with other clients in previous tutorials).

and now, let's create a route for consumers where we would make a peer-to-peer connection with our clients and share the senderStream with them.

app.post('/consumer', async (req, res) => {
    const { sdp } = req.body;
    const peer = new wrtc.RTCPeerConnection();
    const desc = new wrtc.RTCSessionDescription(sdp)
    await peer.setRemoteDescription(desc);
    senderStream.getTracks().forEach(track => peer.addTrack(track, senderStream));
    const ans = await peer.createAnswer();
    await peer.setLocalDescription(ans);
    res.json({
        sdp: peer.localDescription
    })
});

Great. Now create two files in your public folder:

1. broadcast.html - For the broadcaster
2. consumer.html - For the consumer

Broadcast

Inside your broadcast.html you need to implement the following steps in sequence

1. Get the user's media stream and set it to the video tag's srcObject.
2. Create a peer object for the broadcaster.
3. Create a local offer and send the offer to the /broadcast route.
4. Finally add your media stream to the peer (backend server).

async function init() {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    document.getElementById('my-video').srcObject = stream;
    const peer = createPeer();
    stream.getTracks().forEach(track => peer.addTrack(track, stream));
}

function createPeer() {
    const peer = new RTCPeerConnection();
    peer.onnegotiationneeded = () => handleonnegotiationneeded(peer);
    return peer;
}

/**
 * @param {RTCPeerConnection} peer
*/
async function handleonnegotiationneeded(peer) {
    const offer = await peer.createOffer();
    await peer.setLocalDescription(offer);
    const payload = {
        sdp: peer.localDescription
    }
    const response = await(await fetch('/broadcast', { 
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
    })).json();

    peer.setRemoteDescription(new RTCSessionDescription(response.sdp));
}

init();

Great!

Consume

Inside consume.html you have to do pretty much the same things, the only difference is that instead of sending streams, you have to listen on incoming streams.

async function init() {
    const peer = createPeer();
    peer.addTransceiver('video', { direction: 'recvonly' })
}

function createPeer() {
    const peer = new RTCPeerConnection();
    peer.ontrack = handleTrack;
    peer.onnegotiationneeded = () => handleonnegotiationneeded(peer);
    return peer;
}

async function handleTrack(ev) {
    document.getElementById('remote').srcObject = ev.streams[0];
}

/**
 * @param {RTCPeerConnection} peer
*/
async function handleonnegotiationneeded(peer) {
    const offer = await peer.createOffer();
    await peer.setLocalDescription(offer);
    const payload = {
        sdp: peer.localDescription
    }
    const response = await(await fetch('/consumer', { 
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
    })).json();

    peer.setRemoteDescription(new RTCSessionDescription(response.sdp));
}

window.addEventListener('load', init);

And that's it. It was that easy. Now start your server and open http://localhost:9000/broadcast.html and broadcast yourself. Then open several other tabs at http://localhost:9000/consume.html and you would be seeing the broadcaster's video.

Complete code: Server.js

const express = require('express');
const wrtc = require('wrtc');
const app = express();

let senderStream;;

app.use(express.json());
app.use(express.static('./public'))

app.post('/broadcast', async (req, res) => {
    const { sdp } = req.body;
    const peer = new wrtc.RTCPeerConnection();
    peer.ontrack = (e) => handleTrackEvent(e, peer);
    const desc = new wrtc.RTCSessionDescription(sdp)
    await peer.setRemoteDescription(desc);
    const answer = await peer.createAnswer();
    await peer.setLocalDescription(answer);
    res.json({
        sdp: peer.localDescription
    })
});

app.post('/consumer', async (req, res) => {
    const { sdp } = req.body;
    const peer = new wrtc.RTCPeerConnection();
    const desc = new wrtc.RTCSessionDescription(sdp)
    await peer.setRemoteDescription(desc);
    senderStream.getTracks().forEach(track => peer.addTrack(track, senderStream));
    const ans = await peer.createAnswer();
    await peer.setLocalDescription(ans);
    res.json({
        sdp: peer.localDescription
    })
});

/**
 * 
 * @param {RTCTrackEvent} e 
 * @param {RTCPeerConnection} peer 
 */
function handleTrackEvent(e, peer) {
    console.log(e.streams[0])
    senderStream = e.streams[0];
}

app.listen(9000)

broadcast.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video id="my-video" autoplay></video>

    <script>
async function init() {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    document.getElementById('my-video').srcObject = stream;
    const peer = createPeer();
    stream.getTracks().forEach(track => peer.addTrack(track, stream));
}

function createPeer() {
    const peer = new RTCPeerConnection();
    peer.onnegotiationneeded = () => handleonnegotiationneeded(peer);
    return peer;
}

/**
 * @param {RTCPeerConnection} peer
*/
async function handleonnegotiationneeded(peer) {
    const offer = await peer.createOffer();
    await peer.setLocalDescription(offer);
    const payload = {
        sdp: peer.localDescription
    }
    const response = await(await fetch('/broadcast', { 
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
    })).json();

    peer.setRemoteDescription(new RTCSessionDescription(response.sdp));
}

init();

    </script>
</body>
</html>

consume.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> 
    <video id="remote" autoplay></video>
    <script>
async function init() {
    const peer = createPeer();
    peer.addTransceiver('video', { direction: 'recvonly' })
}

function createPeer() {
    const peer = new RTCPeerConnection();
    peer.ontrack = handleTrack;
    peer.onnegotiationneeded = () => handleonnegotiationneeded(peer);
    return peer;
}

async function handleTrack(ev) {
    document.getElementById('remote').srcObject = ev.streams[0];
}

/**
 * @param {RTCPeerConnection} peer
*/
async function handleonnegotiationneeded(peer) {
    const offer = await peer.createOffer();
    await peer.setLocalDescription(offer);
    const payload = {
        sdp: peer.localDescription
    }
    const response = await(await fetch('/consumer', { 
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(payload),
    })).json();

    peer.setRemoteDescription(new RTCSessionDescription(response.sdp));
}

window.addEventListener('load', init);

    </script>
</body>
</html>

Note, in order to proceed with the tutorial, I would highly recommend you to please read my previous tutorial on webRTC Build a video chat app with webRTC.

Alright, let's begin.

Setting up the server for signaling.

In this very step, we are going to set up a simple signaling server using node and socket.io. I won't be explaining the signaling process as I have already that in Build a video chat app with webRTC article. If you haven't read that, please go and read.

// signaling server

const http = require('http');
const express = require('express');
const { Server: SocketIO } = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = new SocketIO(server, { cors: true });

const PORT = process.env.PORT || 8000;

app.use(express.static('./public'));

io.on('connection', socket => {

    socket.emit('me', socket.id);

    socket.on('make:offer', data => {
        const { offer, to } = data;
        socket.to(to).emit('incomming:offer', { offer, from: socket.id });
    });

    socket.on('make:answer', data => {
        const { answer, to } = data;
        socket.to(to).emit('incomming:answer', { answer, from: socket.id });
    });
});

server.listen(PORT, () => console.log(`🚀 Server started at PORT${PORT}`));

Very basic, no rocket science. I hope that the above code is clear to you.

Great, now let's move further to our front-end part.

Let's start with a basic boiler plate code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3 id="my-id"></h3>

    <form id="connect">
        <input type="text" id="id" />
        <button type="submit">SEND</button>
    </form>

    <form id="file-transfer">
        <input id="file" type="file" />
        <button type="submit">SEND</button>
    </form>

    <script src="/socket.io/socket.io.js"></script>
</body>
</html>

Pretty simple.

Now let's define some global variables.

const form = document.getElementById('file-transfer');
const connectForm = document.getElementById('connect');

const socket = io();
const peer = new RTCPeerConnection();
let dataChannel;

Alright, good going 🚀

Now let's add some event listeners to our form and socket.

socket.on('me', id => document.getElementById('my-id').innerText = id); // to get our own socket id.

form.addEventListener('submit', async (ev) => {
    ev.preventDefault();
});

connectForm.addEventListener('submit', async (ev) => {
    ev.preventDefault();
});

Alright, now let's focus on our connection process.

So, what we would be doing is, when a user submits the connection form, we are going to init the signaling process and connect both the peers.

connectForm.addEventListener('submit', async (ev) => {
    ev.preventDefault();
    const remoteId = document.getElementById('id').value;

    const offer = await peer.createOffer();
    await peer.setLocalDescription(new RTCSessionDescription(offer));

    // This dataChanel we are going to use to send data
    dataChannel = peer.createDataChannel('file-transfer');
    socket.emit('make:offer', { offer, to: remoteId });
});

and now, create an event listener for the incoming offer

socket.on('incomming:offer', async data => {
    await peer.setRemoteDescription(new RTCSessionDescription(data.offer));
    const answer = await peer.createAnswer();
    await peer.setLocalDescription(new RTCSessionDescription(answer));
    socket.emit('make:answer', { answer, to: data.from })

    // Init the remote datachannel as soon as the first peer creates a data channel
    peer.addEventListener('datachannel', ev => {
        dataChannel = ev.channel
        dataChannel.send('Hello Peer');
    });
})

and finally, the incoming answer

socket.on('incomming:answer', async data => {
    await peer.setRemoteDescription(new RTCSessionDescription(data.answer));
})

Now let's complete our file transfer form listener where are actually going to transfer the files.

form.addEventListener('submit', async (ev) => {
    ev.preventDefault();

    // Get the file from input field.
    const file = document.getElementById('file').files[0];
    // convert the file to buffer
    const fileBuffer = await file.arrayBuffer();

    // finally, send it to the peer data channel
    dataChannel.send(fileBuffer);
});

Great, so on the receiver side, listen for this file and download the file to the client.

connectForm.addEventListener('submit', async (ev) => {
    ev.preventDefault();
    const remoteId = document.getElementById('id').value;

    const offer = await peer.createOffer();
    await peer.setLocalDescription(new RTCSessionDescription(offer));

    // This dataChanel we are going to use to send data
    dataChannel = peer.createDataChannel('file-transfer');
    socket.emit('make:offer', { offer, to: id });

    // Adding a message listener
    dataChannel.addEventListener('message', ev => {

        if (typeof ev.data == 'object') {
            const a = document.createElement('a');
            const blob = new Blob([ev.data]);
            const obj = URL.createObjectURL(blob);
            a.href = obj;
            a.download = 'rec.png';
            a.click()
        }     
    });
});

And that's it, the file would get downloaded to the client's machine.

Now, very important note, in order to create this application you need to understand WebRTC and this tutorial is an extended to my previous article in which I had thought about how to build a video call application using webRTC. If you have already read that article you are ready to go. If not, please go and read that first.

Link: Build video call application with webRTC

Let's begin

Okay, trust me, this is going to be a very short and easy tutorial. You need to add few lines to our video call application that we build here-> Build video call application with webRTC

Just add the following code and boom! now you are able to share your screen as well, along with video.

const getUserMedia = async () => {

          const userMedia = await navigator.mediaDevices.getUserMedia({
              video: true
          });

          // Capture the screen stream
          const screenSteam = await navigator.mediaDevices.getDisplayMedia();

          const videoEle = document.getElementById('local-video');
          videoEle.srcObject = userMedia;
          videoEle.play()

          // This is our webcam stream
          for (let track of userMedia.getTracks()) {
                  peer.addTrack(track, userMedia)
          }

          // Finally add the screen stream to peer
          for (let track of screenSteam.getTracks()){
                  peer.addTrack(track, userMedia)
          }
 }

Okay, there is a task for you, we made a `peer.ontrack event listener which receives an array of streams. You have to loop over these streams and render multiple video tags dynamically and add the stream to the video's srcObject. Good luck 🙂

Hint In peer.ontrack method, we can get video and audio tracks:

peer.ontrack = async(ev) => {
    ev.streams[0].getAudioTracks(); // Returns all the audio tracks
    ev.streams[0].getVideoTracks(); // Returns all the audio tracks
}

Just in case, you want me to make a full tutorial on this, do leave a comment.

Happy learning

Now, what is webRTC? In simple terms, webRTC refers to as web real-time communications. You can use webRTC to design video calling, audio calling, and chatting applications on the web.

Do you know what's the best part about WebRTC? The answer is, you don't need any backend to handle the communications. This means that two or more people are having video calls without any server, how? because WebRTC is implemented inside your browser. Isn't interesting? So, let's build our own video call application.

Note: As I have mentioned we don't need any backend, that does not mean that we are not going to have any type of backend. We need a backend at an initial point just to connect them both initially. after that, you can even stop your server but the video call would go on. I hope you got the point.

Technologies we would be using

1. Node.js & Express
2. Socket.io
3. A good browser (Chrome, Firefox)

Setup

Let's begin to set up our project. Create an empty folder naming video-app and initialize package.json by running npm init -y.

Now, let's install express and socket.io by running

npm install express socket.io

{
  "name": "video-call",
  "version": "1.0.0",
  "description": "A simple video calling application",
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "keywords": [],
  "author": "Piyush Garg",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1",
    "socket.io": "^4.1.2"
  }
}

don't forget to add the start script in package.json.

Good going, now let's create a index.js file on the server and start coding along with me.

// index.js

const http = require('http');
const express = require('express');
const { Server: SocketIO } = require('socket.io');
const path = require('path');

const app = express();
const server = http.createServer(app);

const io = new SocketIO(server);
const PORT = process.env.PORT || 8000;

app.use(express.static( path.resolve('./public') ));

server.listen(PORT, () => console.log(`Server started at PORT:${PORT}`));

let's try to run our server with npm start.

Server started at PORT:8000

Cool 😎

Now let's start adding event listeners to our socket.io

// index.js

const http = require('http');
const express = require('express');
const { Server: SocketIO } = require('socket.io');
const path = require('path');

const app = express();
const server = http.createServer(app);

const io = new SocketIO(server);
const PORT = process.env.PORT || 8000;

io.on('connection', socket => {
    console.log(`user connected: ${socket.id}`);


    socket.on('disconnect', () => {
        console.log(`user disconnected: ${socket.id}`);
    });
});


app.use(express.static( path.resolve('./public') ));

server.listen(PORT, () => console.log(`Server started at PORT:${PORT}`));

Okay, you are really fast at learning. Now create a folder named public on your server and create a index.html file. This is the file where all our front-end code goes.

node_modules/
public
     | index.html
index.js
package-lock.json
package.json

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Video App</title>
</head>
<body>

</body>
</html>

Now, things become a little serious, before moving further I want you to understand some basic terms

1. RTCPeerConnection – creates and navigates peer-to-peer connections.
2. RTCSessionDescription – describes one end of a connection (or a potential connection) and how it’s configured.

What is a peer? A peer is a node or a user connected to webRTC.

Flow of WebRTC

The flow of webRTC is simple, yet confusing. Once you understand this flow, whoa you know webRTC. I don't expect that you would understand this in one go, so please read this topic 2-3 times.

To understand the flow of WebRTC, let's take the real-life situations on how it works.

There are 2 online users named A and B. A wants to call B, so first of all A would create an offer and send it to B via socket.io. B would then accept the offer sent by A and after accepting the offer, B will create an answer and send back the answer to A via socket.io. This process is called signaling .

Did you understand that? If not, please read that again slowly. If yes, please read that carefully.

Now, let's code the above situation to make things more sensual.

On the server index.js

// create a users map to keep track of users
const users = new Map();

socket.on('outgoing:call', data => {
     const { fromOffer, to } = data;
     socket.to(to).emit('incomming:call', { from: socket.id, offer: fromOffer });
});

In the above code sample, to refers to the id of B.

So, basically in the above implementation, whenever a client emits an outgoing call event to someone our server would emit the incoming call event for the client who is being called along with the offer. I hope it makes sense to you.

Now, let's code when B accepts the call and sends back the answer to the server.

socket.on('call:accepted', data => {
     const { answere, to } = data;
     socket.to(to).emit('incomming:answere', { from: socket.id, offer: answere })
});

In this case, to refers to the id of A.

Complete index.js code.

// index.js

const http = require('http');
const express = require('express');
const { Server: SocketIO } = require('socket.io');
const path = require('path');

const app = express();
const server = http.createServer(app);

const io = new SocketIO(server);
const PORT = process.env.PORT || 8000;

// Create a users map to keep track of users
const users = new Map();

io.on('connection', socket => {
    console.log(`user connected: ${socket.id}`);
    users.set(socket.id, socket.id);

    // emit that a new user has joined as soon as someone joins
    socket.emit('user:joined', socket.id);

    socket.on('outgoing:call', data => {
        const { fromOffer, to } = data;

        socket.to(to).emit('incomming:call', { from: socket.id, offer: fromOffer });
    });

    socket.on('call:accepted', data => {
        const { answere, to } = data;
        socket.to(to).emit('incomming:call', { from: socket.id, offer: answere })
    });


    socket.on('disconnect', () => {
        console.log(`user disconnected: ${socket.id}`);
        users.delete(socket.id);
    });
});


app.use(express.static( path.resolve('./public') ));

server.listen(PORT, () => console.log(`Server started at PORT:${PORT}`));

Good job, lets move further and code our front-end part where we would be creating and accepting these offers.

<!-- Import socket.io script -->
<script src="/socket.io/socket.io.js"></script>

Complete html code

<!DOCTYPE html>
<html lang="en">
    <head>

        <link rel="stylesheet" href="style.css">

        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Video App</title>
    </head>
    <body>

        <div>
                <h3>Your Id: <span id="myId"></span></h3>
                <h3>Online Users (click to connect)</h3>
                <div id="users">

                </div>
                <video id="local-video"></video>
                <video id="remote-video"></video>
            </div>
            </div>
            <p id="status"></p>
        </div>

        <!-- Import socket.io script -->
        <script src="/socket.io/socket.io.js"></script>

        <script>
            const socket = io();
        </script>
    </body>
</html>

also, add the following CSS styles

body {
    font-family: Arial, Helvetica, sans-serif;
}

button {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid;
    cursor: pointer;
    display: block;
    margin-top: 10px;
}

#local-video {
    position: absolute;
    border: 2px solid green;
    height: 250px;
    width: 250px;
    top: 20px;
    right: 20px
}

#remote-video {
    position: absolute;
    border: 2px solid blue;
    height: 550px;
    width: 550px;
    top: 20px;
    right: 300px
}

#status {
    position: absolute;
    bottom: 30px;
    font-size: 20px;
    left: 30px;
}

Start the server npm start and go to http://localhost:8000

Okay, please don't judge my front end. I know it's horrible. 🥲

Displaying online users

Firstly, create a route on the backend that gets the users from the user Map and sends them as json.

app.get('/users', (req, res) => {
    return res.json(Array.from(users));
});

Great, let's fetch users on the front end.

index.html

<script>
            const socket = io();

            const getAndUpdateUsers = async () => {
                const usersDiv = document.getElementById('users');

                const response = await fetch('/users', { method: 'GET' });
                const jsonResponse = await response.json();

                console.log(jsonResponse)

                jsonResponse.forEach(user => {
                    const btn = document.createElement('button');
                    const textNode = document.createTextNode(user[0]);

                    btn.setAttribute('onclick', `createCall('${user[0]}')`);
                    btn.appendChild(textNode);
                    usersDiv.appendChild(btn);
                });
            }


            socket.on('user:joined', (id) => {
                const usersDiv = document.getElementById('users');
                const btn = document.createElement('button');
                const textNode = document.createTextNode(id);

                btn.appendChild(textNode);
                btn.setAttribute('onclick', `createCall('${id}')`);
                usersDiv.appendChild(btn);
            })

            window.addEventListener('load', getAndUpdateUsers);
        </script>

As you can see, I have opened http://localhost:8000 on three different tabs, and I got 3 buttons.

Now, create a peer object.

const peer = new RTCPeerConnection({
    iceServers: [
        {
            urls: "stun:stun.stunprotocol.org"
        }
    ]
});

and define a function createCall

const createCall = async (to) => {
         const status = document.getElementById('status');
         status.innerText = `Calling ${to}`;

         const localOffer = await peer.createOffer();
         await peer.setLocalDescription(new RTCSessionDescription(localOffer));

         socket.emit('outgoing:call', { fromOffer: localOffer, to })
}

Great, now let's add a listener for incoming: call

socket.on('incomming:call', async data => {
         const { from, offer } = data;

         await peer.setRemoteDescription(new RTCSessionDescription(offer));

         const answereOffer = await peer.createAnswer();
         await peer.setLocalDescription(new RTCSessionDescription(answereOffer));

         socket.emit('call:accepted', { answere: answereOffer, to: from });
})

and finally, a listener for incoming: answer

socket.on('incomming:answere', async data => {
       const { offer } = data;
       await peer.setRemoteDescription(new RTCSessionDescription(offer));
});

Great, Now finally get the user's video via webcam and share them.

So, firstly get the user's video and display it on screen.

const getUserMedia = async () => {
     const userMedia = await navigator.mediaDevices.getUserMedia({
            video: true,
     });

      const videoEle = document.getElementById('local-video');
      videoEle.srcObject = userMedia;
      videoEle.play()
 }

Refresh the tab, and you would see something like this.

Okay, now we have to share this so-called media stream with our remote user. Inside incoming: call listener. I have added code to share the stream.

socket.on('incomming:call', async data => {
                const status = document.getElementById('status');
                status.innerText = 'incomming:call';

                const { from, offer } = data;

                await peer.setRemoteDescription(new RTCSessionDescription(offer));

                const answereOffer = await peer.createAnswer();
                await peer.setLocalDescription(new RTCSessionDescription(answereOffer));

                socket.emit('call:accepted', { answere: answereOffer, to: from });
                const mySteam = await navigator.mediaDevices.getUserMedia({
                    video: true,
                });

                for (const track of mySteam.getTracks()) {
                    peer.addTrack(track, mySteam);
                }
            })

and finally, add a listener on incoming streams

peer.ontrack = async ({streams: [stream]}) => {

       const status = document.getElementById('status');
       status.innerText = 'Incomming Stream';

        console.log(stream)

         const video = document.getElementById('remote-video');
         video.srcObject = stream;
         video.play();

         const mySteam = await navigator.mediaDevices.getUserMedia({
                  video: true,
         });

         for (const track of mySteam.getTracks()) {
                 peer.addTrack(track, mySteam);
         }

 }

And you are done. Try to open this app on 2 tabs and call each other.

Note: I have made very minor changes such as disconnecting the user and displaying my own id. I would recommend you implement that of your own. Anyways I have pasted the complete code below.

Happy learning 🚀

Complete Code:

Server: index.js

// index.js

const http = require('http');
const express = require('express');
const { Server: SocketIO } = require('socket.io');
const path = require('path');

const app = express();
const server = http.createServer(app);

const io = new SocketIO(server);
const PORT = process.env.PORT || 8000;

// Create a users map to keep track of users
const users = new Map();

io.on('connection', socket => {
    console.log(`user connected: ${socket.id}`);
    users.set(socket.id, socket.id);

    // emit that a new user has joined as soon as someone joins
    socket.broadcast.emit('users:joined', socket.id);
    socket.emit('hello', { id: socket.id });

    socket.on('outgoing:call', data => {
        const { fromOffer, to } = data;

        socket.to(to).emit('incomming:call', { from: socket.id, offer: fromOffer });
    });

    socket.on('call:accepted', data => {
        const { answere, to } = data;
        socket.to(to).emit('incomming:answere', { from: socket.id, offer: answere })
    });


    socket.on('disconnect', () => {
        console.log(`user disconnected: ${socket.id}`);
        users.delete(socket.id);
        socket.broadcast.emit('user:disconnect', socket.id);
    });
});


app.use(express.static( path.resolve('./public') ));

app.get('/users', (req, res) => {
    return res.json(Array.from(users));
});

server.listen(PORT, () => console.log(`Server started at PORT:${PORT}`));

HTML: index.html

<!DOCTYPE html>
<html lang="en">
    <head>

        <link rel="stylesheet" href="style.css">

        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Video App</title>
    </head>
    <body>

        <div>
                <h3>Your Id: <span id="myId"></span></h3>
                <h3>Online Users (click to connect)</h3>
                <div id="users">

                </div>
                <video id="local-video"></video>
                <video id="remote-video"></video>
            </div>
            </div>
            <p id="status"></p>
        </div>

        <!-- Import socket.io script -->
        <script src="/socket.io/socket.io.js"></script>

        <script>
            const socket = io();

            const peer = new RTCPeerConnection({
                iceServers: [
                    {
                        urls: "stun:stun.stunprotocol.org"
                    }
                ]
            });

            const createCall = async (to) => {
                const status = document.getElementById('status');
                status.innerText = `Calling ${to}`;

                const localOffer = await peer.createOffer();
                await peer.setLocalDescription(new RTCSessionDescription(localOffer));

                socket.emit('outgoing:call', { fromOffer: localOffer, to });
            }

            peer.ontrack = async ({streams: [stream]}) => {

                const status = document.getElementById('status');
                status.innerText = 'Incomming Stream';

                console.log(stream)

                const video = document.getElementById('remote-video');
                video.srcObject = stream;
                video.play();

                const mySteam = await navigator.mediaDevices.getUserMedia({
                    video: true,
                });

                for (const track of mySteam.getTracks()) {
                    peer.addTrack(track, mySteam);
                }

            }

            socket.on('users:joined', (id) => {
                const usersDiv = document.getElementById('users');
                const btn = document.createElement('button');
                const textNode = document.createTextNode(id);

                btn.id = id;

                btn.setAttribute('onclick', `createCall('${id}')`);
                btn.appendChild(textNode);
                usersDiv.appendChild(btn);
            });


            socket.on('incomming:answere', async data => {
                const status = document.getElementById('status');
                status.innerText = 'incomming:answere';

                const { offer } = data;
                await peer.setRemoteDescription(new RTCSessionDescription(offer));
            });

            socket.on('user:disconnect', id => {
                document.getElementById(id).remove()
            })

            socket.on('incomming:call', async data => {
                const status = document.getElementById('status');
                status.innerText = 'incomming:call';

                const { from, offer } = data;

                await peer.setRemoteDescription(new RTCSessionDescription(offer));

                const answereOffer = await peer.createAnswer();
                await peer.setLocalDescription(new RTCSessionDescription(answereOffer));

                socket.emit('call:accepted', { answere: answereOffer, to: from });
                const mySteam = await navigator.mediaDevices.getUserMedia({
                    video: true,
                });

                for (const track of mySteam.getTracks()) {
                    peer.addTrack(track, mySteam);
                }
            })

            const getAndUpdateUsers = async () => {
                const usersDiv = document.getElementById('users');
                usersDiv.innerHTML = ''

                const response = await fetch('/users', { method: 'GET' });
                const jsonResponse = await response.json();

                console.log(jsonResponse)

                jsonResponse.forEach(user => {
                    const btn = document.createElement('button');
                    const textNode = document.createTextNode(user[0]);

                    btn.id = user[0];

                    btn.setAttribute('onclick', `createCall('${user[0]}')`);
                    btn.appendChild(textNode);
                    usersDiv.appendChild(btn);
                });
            }

            socket.on('hello', ({ id }) => document.getElementById('myId').innerText = id)


            const getUserMedia = async () => {
                const userMedia = await navigator.mediaDevices.getUserMedia({
                    video: true,
                });

                const videoEle = document.getElementById('local-video');
                videoEle.srcObject = userMedia;
                videoEle.play()
            }


            window.addEventListener('load', getAndUpdateUsers);
            window.addEventListener('load', getUserMedia);
        </script>
    </body>
</html>

CSS: style.css

body {
    font-family: Arial, Helvetica, sans-serif;
}

button {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid;
    cursor: pointer;
    display: block;
    margin-top: 10px;
}

#local-video {
    position: absolute;
    border: 2px solid green;
    height: 250px;
    width: 250px;
    top: 20px;
    right: 20px
}

#remote-video {
    position: absolute;
    border: 2px solid blue;
    height: 550px;
    width: 550px;
    top: 20px;
    right: 300px
}

#status {
    position: absolute;
    bottom: 30px;
    font-size: 20px;
    left: 30px;
}

Queuing jobs is a really easy task, we would be installing a couple of dependencies and then write some code. I would highly recommend you to code along for better understanding.

with that being said, let's get started.

Step 0: Setup

In this project, we would be using a package known as "bull" which is great for queuing jobs in the background. But in order to run the bull package, we must have Redis installed on our machine. So, head over to https://redis.io/download and download the stable version of Redis. After successful installation, we are good to go.

Step 1: Project Setup and installing dependencies

Now, go ahead and initialize an empty nodejs project with npm init. I would assume that you are already familiar with node.js and express and won't be going deep into the basics. After setting up the project install express and bull library by running npm install express bull.

Step 2: Basic express server

In this step, we would be creating a simple express server up and running.

// index.js
const express = require('express');

const app = express();

const PORT = process.env.PORT || 8000;

app.get('/', (req, res) => {
    res.end('Hello from the server')
})

app.listen(PORT, () => console.log(`Server started at PORT:${PORT}`))

let's start the server node index.js.

Step 3: Implementing Queue

Now, in this step, we would be implementing the queue feature. To understand the implementation queue, let's simulate a fake situation. Please read and understand the following situation carefully.

A user visits your website and sees a form. He fills up the form and uploads some high-quality photos and clicks on submit. The request is then sent to the backend along with the data and photos he uploaded. Now, on the server, you want to first compress the images and upload the image to let's say amazon s3 bucket and then update the URL of images in the database.

As you can already guess, the above scenario is a time taking process. If you do all the above-mentioned tasks on the main thread it would highly affect the performance of your server and users have to wait really long. So, to avoid that let's code the above scenario with queues.

const express = require('express');
const Queue = require('bull'); // import the bull package

const app = express();

const PORT = process.env.PORT || 8000;

// create a middleware that creates queue and add to the request object
app.use((req, res,next) => {
    const imageProcessingQueue = new Queue('imageProcessingQueue'); // Create a queue object.
    req.queue = imageProcessingQueue; // add this queue to req object so its accessible in the request handler.

    next(); // important!
});

app.get('/', (req, res) => {
    res.end('Hello from the server')
});

// Submit route, where the data is actually submitted.
app.post('/submit', (req, res) => {
    const imageFiles = req.files; // Images uploaded by the user.
    const data = insertIntoDatabase(req.body); // Rest of the form data has been saved in database;

    // Define a queue.process method
    req.queue.process((job, done) => {
        // Write all the logic to compress and upload file here.
        // I would be using setTimeout to simulate this thing.

        setTimeout(() => {
            console.log('Compression and upload done');
            // update the links in database. job.data.id contains the id of the insertedData,
            done(); // call the done method when all things are done;
        }, 5000);
    });

    req.queue.add(data); // finally add the queue and pass the required info as parameter.

    return res.json({
        message: 'successfully queued',
    });

});

app.listen(PORT, () => console.log(`Server started at PORT:${PORT}`))

let's start the server node index.js

Now, I would fire up my postman and try to send POST requests at /submit route.

Great! I got a "successfully queued" response. Now let's check our server console.

As you can see, after 5 seconds, I got a log saying "Compression and upload done" as I set a time out of 5 seconds.

I hope that now you have understood how you can queue tasks in nodejs and express server.

Hello reader, in this article I would provide you step by step guide to integrate the Razorpay payment gateway into your node.js application. Trust me, it’s easy than you think.

So, let’s begin…

Step 0: Initialize Project

First things first, so let's create a simple project folder and start our journey.

Here I have created a folder named “razorpay-tutorial”. Now open your terminal in the folder and run the following command to init the node server.

npm init -y

This command would create a package.json file in your project.

Step 1: Install dependencies

In order to integrate razor pay, we need to install the following dependencies.

1. express

2. razorpay

Run the following command to install the above dependencies.

npm install express razorpay

Step 2: Create and set up a simple express server

const express = require('express');

const app = express();
const PORT = 8000;


app.listen(PORT, () => console.log(`Express server started at PORT:${PORT}`));

also, create a public folder in your project and serve it via express.

const express = require('express');

const app = express();

const PORT = 8000;

app.use(express.static('./public'));
app.use(express.json());


app.listen(PORT, () => console.log(`Express server started at PORT:${PORT}`));

Step 3: Let's begin with razorpay

To begin with, firstly we have to create an order on our server.

Step 3.1: Creating an order on our server

Note: You need to create an test account on the razorpay. Then in the settings pannel of razorpay, go to API keys and generate keys. Copy the key_id and key_secret.

const { request, response } = require('express');
const express = require('express');
const Razorpay = require('razorpay');

const app = express();

const PORT = 8000;

app.use(express.static('./public'));
app.use(express.json());

app.post('/order', async (request, response) => {

    const amount = request.body.amount;

    if (!amount) return response.json({ message: 'Please provide amount' })

    // Create a razorpayInstance
    const razorpayInstance = new Razorpay({ 
        key_id: '<YOUR_KEY_ID_HERE>',
        key_secret: '<YOUR_SECRET_HERE>',
     });

     const paymentOptions = {
        amount: amount * 100,
        currency: 'INR',
        receipt: '#1',
     };

     const razorpayOrder = await razorpayInstance.orders.create(paymentOptions);

     return response.json({ 
        message: 'success', 
        order: razorpayOrder 
    });

});


app.listen(PORT, () => console.log(`Express server started at PORT:${PORT}`));

As you can see, we have defined a post route “/order” which is responsible for creating an order and return a JSON response with the created order.

Step 3.2 Design our front-end

Navigate to your public folder and add the following code to public/index.html file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Razorpay</title>
</head>
<body>
    <div>
        <button id="buy-now-btn">Buy Now</button>
    </div>

    <!-- Razorpay Script -->
    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>

    <script>
        // Get the button
        const buyButton = document.getElementById('buy-now-btn');

        // Add click event listner
        buyButton.addEventListener('click', (event) => {

        });

    </script>
</body>
</html>

Now start your server and head to http://localhost:8000

Run the following command to start the server

node index.js

buyButton.addEventListener('click', async (event) => {

            const response = await fetch('/order', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ amount: 500 }) // Rs.500
            });

            const responseJson = await response.json();

            const { order } = responseJson;

            const razorPayOptions = {
                key: '<YOUR_KEY_ID_HERE>',
                amount: 500,
                currency: 'INR',
                name: `Buy Shirt`,
                description: `Paying for testing`,
                order_id: order.id,
                handler: function (response) { // handler function when payment is successfull
                    const razorpayPaymentId = response['razorpay_payment_id'];
                    const razorpayOrderId = response['razorpay_order_id'];
                    const razorpaySignature = response['razorpay_signature'];

                    console.log('Payment successfull');
                },
            };

            const razorpayInstance = new Razorpay(razorPayOptions);
            razorpayInstance.open();

        });

In your button click event listener add the above code and done. You have successfully integrated the Razorpay gateway.

For this application, we would be using Express.js and Socket.io.

I would recommend you to code along with me to better understand the code.

So, Let’s begin 😉

Step 0: Setting up the project

Firstly, let's create a folder chatApp

After then create the following two new folders inside the chatApp folder:

1. server

2. client

Step 1.1: Server

Now, head over to the server folder and run the following command:

npm init

After initializing package.json lets now install some dependencies

npm install socket.io

Great, and finally let's create our index.js file

Now, let's have our boilerplate code to server/index.js

const http = require('http');
const socket = require('socket.io');

const server = http.createServer();
const io = socket(server);

server.listen(8080, () => console.log(`Server Running`))

In the above code firstly we required the node’s build-in HTTP module and created a server using createServer() method.

Then, we imported our socket.io and named it as socket which returns a function.

Finally, we initialised our io by calling the function socket and passed our server as parameter to it.

Great, now we have successfully created a server and initialized our io.

Step 1 Creating socket.io listeners on the backend

const http = require('http');
const socket = require('socket.io');

const server = http.createServer();
const io = socket(server);

io.on('connection', socket => {
  console.log('A new user has joined the chat')

  socket.emit('message', 'You have successfully joined the chat')

})

server.listen(8080, () => console.log(`Server Running`))

Whenever there is a new user or a connection joins the chat, the ‘connection’ event is fired by the socket.io, to which we are listening with the .on method.

so io.on(‘connection’), means whenever there is a connection this function will be called. This function has a second argument which is a callback function that has access to a single parameter and that is a socket. The socket contains information about the user who has just joined.

So whenever a new user joins the chat, our server would log A new user has joined the chat. Also, we must welcome the user who has just joined by saying, You have successfully joined the chat.

So, to send a message only to a particular user who has just joined we do:

socket.emit('message', '**You have successfully joined the chat');**

.emit method is used to fire up an event where the first parameter is event name and second is the data.

With that being set now let us set up our listeners for the incoming and outgoing chat messages.

So to listen to an event we use the .on method.

const http = require('http');
const socket = require('socket.io');

const server = http.createServer();
const io = socket(server);

io.on('connection', socket => {
  console.log('A new user has joined the chat')

  socket.emit('message', 'You have successfully joined the chat')

  socket.on('message', (msg) => {
    io.emit('message', msg)
  })

})

server.listen(8080, () => console.log(`Server Running`))

Let me simplify, In the above code, we are listening to an event named as “message” which would be fired up from our frontend later. So whenever a socket ( which is a user ) sends a message we will take that message and send that to everyone. The io means everyone.

socket.emit — Only to the user. IO — To all the users connected to our application.

I hope you got the point. 🤓

Now Run your server:

node index.js

and keep it running…

Good News! 🎉Our backend is complete. Yes! That's it.

Step 1.2: Creating FrontEnd

Now, navigate to the client folder and create index.html and index.js file.

Now, let's design a simple frontend in index.html

Copy the code below into index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chat App</title>
  <style>
    .chat-container{
      border: 2px solid;
      padding: 20px;
      height: 500px;
      overflow: scroll;
    }
  </style>
</head>
<body>
  <div class="bg-dark text-white p-3 text-center">
    <h1>Chat App</h1>
  </div>
  <div class="container mt-5">
    <ul id="chat-box" class="list-group chat-container">

    </ul>
    <form class="mt-3" id="chat-form">
      <input type="text" class="form-control" id="messageBox" required/>
      <button type="submit" class="btn btn-success form-control mt-2">Send</button>
    </form>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
  <script src="./index.js"></script>
</body>
</html>

Our Design

Now navigate to index.js file in the client folder

const form = document.getElementById('chat-form');
const messageBox = document.getElementById('messageBox');
const chatBox = document.getElementById('chat-box')

const socket = io('localhost:8080');

  socket.on('message', (msg) => {
    const liTag = document.createElement('li');
    liTag.classList.add('list-group-item')
    liTag.innerText = msg;

    chatBox.appendChild(liTag)
  })


form.addEventListener('submit', e => {
  e.preventDefault();
  socket.emit('message', messageBox.value)
  messageBox.value = ''
})

So firstly we initialize our socket variable and pass our servers address.

Then, we listen to the message event fired by our backend which contains the message.

server/index.js: Rember this?

And finally, we add an event listener to our form and emits the user message to a socket which is being listened by our backend.

Now, on the vscode, run the index.html with live server and test the application

Ohh! I got a welcome Message

Also, my server says that

Congrats! You have successfully build your own chatting server.

Authentication in Nodejs using Passport.js In this article I would be teaching you authentication in nodejs using express and passport.jsmedium.com Express and MongoDB In this article, I would be teaching you how to use MongoDB with express.js and perform CRUD operations.medium.com Building REST API with Node.js Build your own REST API from scratchmedium.com Top 10 visual studio code extensions 2020 Best vscode extensions to make your development smooth and powerful.medium.com

Social Links:

Github: https://github.com/piyushgarg195

Linkedin: https://www.linkedin.com/in/piyushgarg195/

Website: https://www.piyushgarg.dev/

What is MongoDB?

MongoDB is a no-SQL database. It is a general-purpose, document-based, distributed database built for modern application developers and for the cloud era.

MongoDB stores the data as form of document inside collections.

For Example: If I have a record of 5 students, So I can say that I have 5 documents inside a collection named as students.

I hope you got the point. 😄

Note: In this tutorial, I will be using MongoDB atlas to avoid the complexities faced while installing MongoDB and it would also be easier for beginners to understand too. MongoDB Atlas is a cloud service to use mongoDb.

Let’s Begin

Step 0: Create an account on MongoDB

Head over to https://www.mongodb.com/ and create your free account to use MongoDB atlas.

After creating your account, choose free cluster and click on create a cluster

Now, wait for 2–3 minutes for the cluster to get deployed.

Congrats! You have successfully deployed your cluster and now we are ready to move on to next step. 🎉

Step1: Configuring MongoDB Atlas

There are a couple of tweaks here and there which we need to follow to get started with MongoDB Atlas.

Creating a user role to access the database from our application

Navigate to Database Access

Click add new database user

Now, We have to whitelist the IP’s from where we can access the database.

Navigate to Network access and click Add IP Address

Select Allow Access from anywhere and select confirm

Step 2: Project Setup

Now, lets set up our project structure and create boilerplate code.

Firstly, create a folder. Let's name it as “myProject”.

Now, Fire-up your terminal or command prompt and run:

npm init

Great, Now let's install dependencies.

Run:

npm i express mongoose

Great Going, Now let's create some files and folders. For the time bear with me and create these folders. I am going to explain the working of each and file step by step.

Our Project Structure:

myProject
|
|- model
     |- user.js
|- index.js
|- package.json

In the above project structure, we have created a folder model, this is the folder where we are going to keep all our schemas for different collection.

Currently, we have one, the user.js

Step 3: Creating the Boilerplate Code

Head over to index.js and code along with me.

const express = require('express');

const app = express()

app.get('/', (req, res) => {
  res.send('Welcome to my API');
})

app.listen(9000, () => console.log('Server Started at PORT 9000'))

Step 4: Connect our node application to MongoDB Atlas

Connecting application to MongoDB is really simple.

1. Head over to Clusters panel and click connect.

2. Click on connect your application.

3. Copy the connection string

Great Now back to our code …..

Follow the steps below to connect to MongoDB Atlas

1. Import the mongoose package in index.js

const express = require('express');
const mongoose = require('mongoose');


const app = express()

app.get('/', (req, res) => {
  res.send('Welcome to my API');
})

app.listen(9000, () => console.log('Server Started at PORT 9000'))

1. Use connect function of mongoose to connect to our application and pass the connection string that we copied earlier.

Replace the original password with <password>

const express = require('express');
const mongoose = require('mongoose');

const app = express()

mongoose.connect(
  `mongodb+srv://piyushgarg:hello123@cluster0-2bghc.mongodb.net/test?retryWrites=true&w=majority`
  )
  .then(() => console.log('MongoDB Connect'))
  .catch((err) => console.log(`Error Occured ${err}`))


app.get('/', (req, res) => {
  res.send('Welcome to my API');
})

app.listen(9000, () => console.log('Server Started at PORT 9000'))

Additionally, pass the following parameters to the connect function:

Refer to https://mongoosejs.com/docs/deprecations.html for more info

{

useNewUrlParser: true,

useUnifiedTopology: true

}

const express = require('express');
const mongoose = require('mongoose');

const app = express()

mongoose.connect(
  `mongodb+srv://piyushgarg:hello123@cluster0-2bghc.mongodb.net/test?retryWrites=true&w=majority`,
  {
    useNewUrlParser: true,
    useUnifiedTopology: true
  }
  )
  .then(() => console.log('MongoDB Connect'))
  .catch((err) => console.log(`Error Occured ${err}`))


app.get('/', (req, res) => {
  res.send('Welcome to my API');
})

app.listen(9000, () => console.log('Server Started at PORT 9000'))

Congrats! 🎉… try running the server and you would see MongoDB connected on the console.

Step 4: Creating user schema

In this step, we would be working with the user.js inside our models folder and create a user schema.

const mongoose = require('mongoose');

const userSchema = mongoose.Schema({
  name: {
    type: String,
    required: true,
  },
  email:{
    type: String,
    required: true,
    unique: true,
  },
  password:{
    type: String,
    required: true,
  },
  age: {
    type: Number
  }
})

const user = mongoose.model('users', userSchema);

module.exports = user;

In this file, we, first of all, require the mongoose package and then use the . Schema method to create the schema. In the Schema method, we pass an object specifying our schema of the user with various properties like type, unique and required.

Finally, we create a model using mongoose. model which requires two parameters:

First: The name of the model as a string. [ users ]

Second: The user schema we created above.

Hooray! User Schema Ready! Now we are ready to perform CRUD operations

Step 5: API and CRUD operations

In this step, we would be creating API's to perform crud operation on our DB.

Back to index.js

Import the user.js and start coding along with me.

const express = require('express');
const mongoose = require('mongoose');

const app = express()

const User = require('./model/user');

mongoose.connect(
  `mongodb+srv://piyushgarg:hello123@cluster0-2bghc.mongodb.net/test?retryWrites=true&w=majority`,
  {
    useNewUrlParser: true,
    useUnifiedTopology: true
  }
  )
  .then(() => console.log('MongoDB Connect'))
  .catch((err) => console.log(`Error Occured ${err}`))


app.get('/', (req, res) => {
  res.send('Welcome to my API');
})

app.get('/users/all', (req, res) => {

  User.find({}, (err, users) => {
    if(err) return res.json(err);
    return res.json(users)
  })

})


app.get('/users/:id', (req, res) => {

  const id = req.params.id;
  User.findById(id, (err, user) => {
    if(err) return res.json(err);

    return res.json(user);
  })
})

app.post('/user/new', (req, res) => {
  const {name, email, password, age} = req.body;
  const myUser = new User();
  myUser.name = name;
  myUser.email = email;
  myUser.password = password; // Make sure you hash the passowrd;
  myUser.age = age;

  myUser.save()
    .then(() => res.send('User inserted into db'))
    .catch(err => res.send(err))
})

app.listen(9000, () => console.log('Server Started at PORT 9000'))

There is one error in code and that is we have not implemented the express.json() middleware.

Well, that’s your task.

And Done! 😍

Let's test our implementation in Postman

In your MongoDB Atlas go to collections and see your newly created user document there.

Great! 😍 Our API is working great.

Authentication in Nodejs using Passport.js In this article I would be teaching you authentication in nodejs using express and passport.jsmedium.com Building REST API with Node.js Build your own REST API from scratchmedium.com Top 10 visual studio code extensions 2020 Best vscode extensions to make your development smooth and powerful.medium.com Authentication in Nodejs using JSON web tokens (JWT) Hey there, In this article, we would be learning how to implement authentication in nodejs using express and JWT aka…medium.com

Social Links:

Github: https://github.com/piyushgarg195

Linkedin: https://www.linkedin.com/in/piyushgarg195/

Website: https://www.piyushgarg.dev/

I know working with passport.js is a little bit tricky and confusing, but trust me I'll make it really simple.

I would highly recommend you to code along with me to better understand the flow of the code.

Note: Before we begin I would like you to understand the term “Strategy”

Passport uses what is termed strategies to authenticate requests.

Like authenticating with username and password is a strategy, authenticating with google or Facebook is a strategy.

So the strategy is a way to authenticate a user.

In this tutorial, we would be using the username and password authentication known as a local strategy in terms of passport.js

Step 0: Project setup and Installing dependencies

First of all, Create a new folder, let’s say “myApplication” and open your terminal or command prompt in that folder.

After opening your terminal or command prompt run the following command to initialize your node application.

npm init

After successfully creating your JSON file, now we are ready to install the following dependencies:

1. express

2. express-session

3. passport

4. passport-local

Install the above dependencies by typing following command:

npm install express express-session passport passport-local

Now, Our project is set up and we are ready to move to the next step.

Step 1: Creating a Boilerplate Code

Lets now create index.js and write the boilerplate code for the express app.

const express = require('express');

const app = express();


app.get('/', (req, res) => {
  if(req.isAuthenticated()){
    res.send(`Heyyyy ${req.user.email}`)
  }else{
    res.send('Whooo Areee youuuuuu ???')
  }
});

app.post('/login', (req, res) => {
  // ...
})

app.listen(9000, () => console.log(`Server Started at PORT 9000`))

So, I hope that you have got an idea that what we are going to implement.

In the above code we have two routes:

1. Home Route ‘/’: This route checks if the req.user is present, which means the user is logged in and sends heyy and email if so, else it sends a response saying Heyy how are you?.

2. Login Route ‘/login’: This route is a route that we need to implement later. This route is responsible for logging in the user.

Now, in the next step, we would be implementing some middleware functions which we need to authenticate the user.

Step 2: Implementing Middleware functions

To authenticate our user using passport we need to implement the following middleware functions:

1. express-session() — Maintaining Sessions

2. passport.initialize() — Initialize Passport.js

3. passport.session() — Using Passport Sessions

With that being set lets import and implement them.

const express = require('express');
const passport = require('passport');
const session = require('express-session');

const app = express();


app.use(session({ secret: 'mysecret', resave: true, saveUninitialized: true }));
app.use(passport.initialize())
app.use(passport.session())

app.use(express.json())

app.get('/', (req, res) => {
  if(req.user) {
    res.send(`Hey There.... You are ${req.user.email}`)
  }
  else{
    res.send('Hey.. I dont know who are you??? ')
  }
})

app.post('/login', passport.authenticate('local'), (req, res) => {
  res.send('Loggin Sucess')
})


app.listen(9000, () => console.log(`Server running at 9000`))

Okay, With that being set let's move to next step.

Step 3: Code the passport.js

In this step, we would be coding the logic part of passport.js which is really simple.

Step 1: Create a file named as passport.js in your project root directory.

Step 2: Import passport-local Strategy

const LocalStrategy = require('passport-local').Strategy;

Finally exporting a helper function that accepts passport as a parameter and configures it as a local strategy for us.

It okay for now if you didn't understand the above line.

So our passport.js would look something like this:

const LocalStrategy = require('passport-local').Strategy;

module.exports = function(passport){
  passport.use(
    new LocalStrategy({usernameField: 'email', passwordField: 'password'}, (email, password, done) => {
      // ... do the database stuff with email and passsword and get all the details 
      // of user. In this case I am hardcoding the user.
      const user = {
        email
      }
      if(user){
      done(null, user);
      }
      else{
        done(null, false, {message: "Incorrect Password"});
    })
  )
}

Let me simplify the above code

In the above code, we are exporting a function that takes passport as a parameter(line #3), After then it calls the use method on the passport that we get from the parameter and passes a new instance of the strategy we want to use (local strategy in this case, the one we imported on the top).

The LocalStrategy instance which is being passed to passport.js(line #5) takes in two parameters:

1. Options: We are passing an option{usernameField: ‘email’, passwordField: ‘password’}, which means that the user would provide his username with a field named as email and password with field named as password.

2. callback function: The second argument is a callback function which has access to 3 parameters:

3. email: Email Id of the user

4. password: Password of the user

5. done: We call the done function after we process our logic with email and password to call next middleware.

If we found the user from database and we match the password we call done function with the first parameter as null and second as user object.

done(null, user);

If we could not found the user or the password is wrong we call the done function as:

done(null, false, {message: "Incorrect Password or no user found"}

Step 4: Completing our login route

Before we complete our login route we need to configure our passport js with the help of function we just created in the previous step.

Back to index.js

const express = require('express');
const passport = require('passport');
const session = require('express-session');

const app = express();

// Configure the Passport JS
require('./passport')(passport);

app.use(session({ secret: 'mysecret', resave: true, saveUninitialized: true }));
app.use(passport.initialize())
app.use(passport.session())

app.use(express.json())


app.get('/', (req, res) => {
  if(req.isAuthenticated()){
    res.send(`Heyyyy ${req.user.email}`)
  }else{
    res.send('Whooo Areee youuuuuu ???')
  }
});

app.post('/login', (req, res) => {
  // ...
})

app.listen(9000, () => console.log(`Server Started at PORT 9000`))

After we configure the passport, lets now complete our login route

app.post('/login', passport.authenticate('local'), (req, res) => {
  res.send('Login Success')
})

Yeah! That's it. Your Login route is ready.

The passport.authenticate(‘local’) would call the function we exported from passport.js and pass the email and password to the Local Strategy we created.

If everything goes well, passport then called the next middleware that is our req, res function where we send a response saying login success.

Last Step: Serialize and Deserialize the user

Don’t panic! Serialising and the deserializing user simply means that every time the user makes a request to the server we need to parse the incoming user and set the user value to the req.user object.

const LocalStrategy = require('passport-local').Strategy;

module.exports = function(passport){
  passport.use(
    new LocalStrategy({usernameField: 'email'}, (email, password, done) => {
      // ... do the database stuff with email and passsword and get all the details 
      // of user. In this case I am hardcoding the user.
      const user = {
        email
      }
      if(user){
      done(null, user);
      }
      else{
        done(null, false, {message: "Incorrect username"});
      }
    })
  )


  passport.serializeUser(function(user, done) {
    done(null, user.email);
  });


  passport.deserializeUser((email, done) => {
    // Find user by the email from your db
    const user = {
      email,
      name: 'Piyush', // In future, this value would come from your db
    }
    done(null, user)

  })
}

Every time the user makes a request to server firstly the Serialize user gets called which has the user that we created before. (passport.js line number #12).

Then this function further calls the deserialize user in which we set the req.user and pass the control to next middleware.

Congrats! You have learned how to implement authentication using Passport.js

Let's test our implementation in Postman

Authentication in Nodejs using JSON web tokens (JWT) Hey there, In this article, we would be learning how to implement authentication in nodejs using express and JWT aka…medium.com Building REST API with Node.js Build your own REST API from scratchmedium.com Top 10 visual studio code extensions 2020 Best vscode extensions to make your development smooth and powerful.medium.com

Social Links:

Github: https://github.com/piyushgarg195

Linkedin: https://www.linkedin.com/in/piyushgarg195/

Website: https://www.piyushgarg.dev/

1. Ant Design

Ant Design is a design system for enterprise-level products. Create an efficient and enjoyable work experience. It offers tons and tons of components with very powerful features.

2. React Bootstrap

The React Bootstrap library is exactly what the name describes: Bootstrap components built with React. Bootstrap is an open-source toolkit for developing with HTML, CSS, and JS. Bootstrap is the world’s most popular front-end component library.

What is great about React Bootstrap is that it replaces the old Bootstrap JavaScript. Each component in this library has been built from scratch as a true React component, without unneeded dependencies like jQuery.

As one of the oldest React libraries, React Bootstrap has evolved and grown alongside React, making it a great choice as your UI foundation.

Source: Daan

3. React Spinners

There is no space any longer for boring spinners in your applications. React spinner is a library that offers a wide variety of fancy spinners. The properties of these spinners can be tweaked so you can fully customize the spinners the way you want.

This is a small library that has about 1k stars on GitHub, but it could give your application a real boost in terms of UX.

Source: Daan

4. Evergreen

Evergreen provides a Design System for the Web. It provided various pre-build components with great UI. It would be worth checking out.

5. Webix

Webix is yet another and very advance UI library that provides you UI for building complex and heavy web applications on a Large Scale. Top 10 visual studio code extensions 2020 Best vscode extensions to make your development smooth and powerful.medium.com Building REST API with Node.js Build your own REST API from scratchmedium.com Authentication in Nodejs using JSON web tokens (JWT) Hey there, In this article, we would be learning how to implement authentication in nodejs using express and JWT aka…medium.com

Social Links:

Github: https://github.com/piyushgarg195

Linkedin: https://www.linkedin.com/in/piyushgarg195/

Website: https://www.piyushgarg.dev/

What are JSON web tokens?

JSON web tokens or JWT is a simple long string that contains some data in an encoded way. Sounds confusing? here is an example

A Sample JWT String may look like:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiUGl5dXNoIEdhcmciLCJlbWFpbCI6ImluZm9AcGl5dXNoZ2FyZy5kZXYiLCJpYXQiOjE1MTYyMzkwMjJ9.XaQC6iMAgESX8b-HT2AkclCAWDnAmNiHV7tq7b6GWRE

Now, Let’s decode the above JWT string

You can decode the string by visiting https://jwt.io/ and paste the above string into the debugger present on the mentioned link.

{
  "name": "Piyush Garg",
  "email": "info@piyushgarg.dev",
  "iat": 1516239022
}

So, I hope that now you have a simple idea that what JSON web tokens are!

Now, with that being set let's create an express application and implement authentication with JWT

I'll be guiding you step by step and I would highly recommend you to code along with me.

Step 0: Creating a boilerplate code.

const express = require('express');
const cookieParser = require('cookie-parser')
const app = express();

app.use(express.json())
app.use(cookieParser())

app.get('/', (req, res) => {
  res.send('Welcome to my API')
})

app.get('/profile', (req, res) => {
  res.send('Hello')
})

app.listen(9000, () => console.log('Server Started at PORT 9000'))

A very basic express starter code. We would be protecting the ‘/profile’ route so that only logged in users can access that route.

Step 1: Installing Dependencies

For this project, we would be installing a few dependencies.

1. Express

2. jsonwebtoken

3. cookie-parser

Run the following command in your terminal or command prompt:

npm install express jsonwebtoken cookie-parser

Step 2: Creating Middleware functions to deal with tokens

In this step, we would be creating functions which would be used as middlewares to protect our certain routes.

Trust me it's really simple 😉

Creating auth.js

So, Create a new .js file in your project directory. Lets call it as auth.js. In this file, we would be creating functions that we need to deal with tokens.

Great going, Now let's create a couple of functions

1. generateToken(): This function would take data as a parameter and return the token after generating it.

2. isLoggedIn(): This function is responsible for checking if the current user is logged in or not.

Yeah! That's it. Lets Codeee 🤟🏻

const jwt = require('jsonwebtoken');

function generateToken(payload) {
  const token = jwt.sign(payload, 'mySecretKey');
  return token;
}

function isLoggedIn(req, res, next) {

  // Check if the user has token in cookies. If not return the request;
  if(!req.cookies.jwt) return res.json({ error: 'Please Login' });

  const clientToken = req.cookies.jwt;

 try {
  //  Decode the client token by using same secret key that we used to sign the token
    const decoded = jwt.verify(clientToken, 'mySecretKey');
    req.user = decoded;
     next();
 }
 catch(err){
    return res.json({error: 'Invalid Token'})
 }

}

module.exports = {
  generateToken,
  isLoggedIn
}

In auth.js we have created two functions as mentioned above. Please go through the code and you would understand the flow behind it.

Yep, that's it. Now let's protect our routes

Back to index.js let's create two routes signup route and login route.

In this article, I’ll be coding only the signup route.

Your assignment is to create the login route.

const express = require('express');
const cookieParser = require('cookie-parser')
const app = express();

// Import auth.js that we created earlier
const auth = require('./auth');


app.use(express.json())
app.use(cookieParser())

app.get('/', (req, res) => {
  res.send('Welcome to my API')
})

app.get('/profile', (req, res) => {
  res.send('Hello')
})

app.post('/signup', (req, res) => {
  const {name, email, password} = req.body;
  // .. code to save user in database

  // Now lets generate token and give it to user as a cookie
  const payload = {
    name,
    email
  }
  const token = auth.generateToken(payload);
  res.cookie('jwt', token);
  return res.redirect('/profile')
})

app.listen(9000, () => console.log('Server Started at PORT 9000'))

Step 3: let's protect our route

To protect your route, just call the isLoggedIn function as middleware before the route that you want to protect and that's it.

Updated profile route:

app.get('/profile', auth.isLoggedIn, (req, res) => {
  res.send(`Hello ${req.user.name}`);
})

req.user holds the current user which is logged in. Navigate to auth.js line number 18:

req.user = decoded;

This is where we set the value of req.user to the current user.

Value of req.user is exactly the same as we defined the payload while generating the token.

Finally: Let's test our implementation in postman

Congratulations! 😍 You have now learned how to do authentication in nodejs using JWT

Building REST API with Node.js Build your own REST API from scratchmedium.com Top 10 visual studio code extensions 2020 Best vscode extensions to make your development smooth and powerful.medium.com How to create a VS Code extension Hi there, in this article we would be creating an extension for VS Code and publishing it to the vscode marketplace.medium.com

Social Links:

Github: https://github.com/piyushgarg195

Linkedin: https://www.linkedin.com/in/piyushgarg195/

Website: https://www.piyushgarg.dev/

Excited about that 🥰? Lets Start

What we are going to create?

We would be building an auto-complete extension that auto-completes the bootstrap snippets in an Html file.

Prerequisites

You must have node.js installed on your machine.

Step 1. Install Yo! 🤟🏻

Yes, you read that correctly. We have to install yo to create our vscode extension.

To install yo fire-up your terminal or command prompt.

Note: Windows users please open your command prompt as an administrator.

After being set type in the following command:

macOS:

sudo npm install -g yo

Windows:

npm install -g yo

Yo! you have successfully installed Yo 🎉

Step 2: Project setup

Setting up the project is really simple.

All you need to do is:

1. Create a new folder. Let us say “myFirstExtension”

2. Open your terminal or command prompt and navigate to the folder we have just created.

3. Run the following command

yo code

At this step, vscode extension generator would show up

From the given options choose New Code Snippets to create an auto-complete snippets extension.

After that being done, you would be prompted with some questions such as the name of the extension, description etc.

Also, there would be a prompt saying

“Enter the language for which the snippets should appear. The id is an identifier and is a single, lower-case name such as ‘PHP’, ‘javascript”

Type in html for this as we are creating snippets for HTML

Hora 🎉 ! You have successfully set up the project and we are now ready to code our extension.

Step 3: Code the extension.

Now you may close your terminals and command prompts and open the folder we created in the previous step. There you will notice a folder created with the name of your extension. Open this folder inside your favourite code editor. Like vscode in my case.

Now, head over to snippets folder and open snippets.json file.

At this point, your snippets.json file would we something like this

{}

Yep, it’s an empty object and we have to code our snippets inside this object.

Lets Code!

Code along with me:

{
  "start":{
     "prefix": "!start",
      "body": [
        "<html>",
        "</html"
      ],
    "description": "Basic Starter Template"
  }
}

prefix: what user would type to access the snippet

body: the body of the snippet. In this case Array of HTML tags

Yes that it! We have successfully created our first snippet.

So whenever users types “!start” in vscode the body of our snippet would be printed there.

You can Create multiple snippets by adding more objects to the main object

{
  "start":{
     "prefix": "!start",
      "body": [
        "<html>",
        "</html"
      ],
    "description": "Basic Starter Template"
  },
  "h1":{
    "prefix": "!h1",
    "body": [
        "<h1>",
        "</h1"
      ],
     "description": "Basic html tag"
  }
}

Wola! You have created your own very first extension 🥰

Just keep adding your snippets and create some great snippets.

Please post your extension links below because I cant wait to see what you have made.

Complete Bootstrap Snippets Code

https://gist.github.com/piyushgarg195/36fda82a1662e04618a34afbca293830

Step 4: Configuring the Extension

At this point, you have successfully created your vscode extension.

Now open package.json file present in your project folder.

{
    "name": "bootstrap-snippets",
    "displayName": "bootstrap-snippets",
    "description": "A simple Bootstrap snippets",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.44.0"
    },
    "categories": [
        "Snippets"
    ],
    "contributes": {
        "snippets": [
            {
                "language": "html",
                "path": "./snippets/snippets.json"
            }
        ]
    }
}

In this file, we need to make a few changes as listed below:

1. Adding Publisher name in package.json

{
    "name": "bootstrap-snippets",
    "displayName": "bootstrap-snippets",
    "description": "A simple Bootstrap snippets",
    "publisher": "piyushgarg",
    "version": "0.0.1",
    "engines": {
        "vscode": "^1.44.0"
    },
    "categories": [
        "Snippets"
    ],
    "contributes": {
        "snippets": [
            {
                "language": "html",
                "path": "./snippets/snippets.json"
            }
        ]
    }
}

2. Updating Readme.md file

This file is the documentation of your extension. You need to edit this file before publishing your extension.

Finally: let's publish our extension

To publish your extension first you need to download vse tool by writing a command

macOS

sudo npm install -g vsce

Windows ( open command prompt as administrator)

npm install -g vsce

Now, after installing vse, navigate to your extension directory and open that directory in terminal or command prompt and type the following command

vsce package

After this you would be prompted with a message saying

“A ‘repository’ field is missing from the ‘package.json’ manifest file. Do you want to continue? [y/N]”

Hit ‘y’ and press enter.

This would create <extension_name>.vsix file

Congratulation! you are now ready to publish it.

• Head over to **https://marketplace.visualstudio.com/vscode **and create your free account.

• After signing select publish extensions from the top right corner.

• Create a publisher

  Note: Please make sure that the publisher name in package.json is same as you create a publisher here.

• Select + Create new extension and select visual studio from the dropdown

• Upload your .vsix extension

• Click Continue

Congrats! Your extension is now published! 😍

Do visit:

Top 10 visual studio code extensions 2020 Best vscode extensions to make your development smooth and powerful.medium.com

Node.js provides a run time environment to run javascript code. It is built on the chrome’s open-source V8 engine.

After being said that let's build a real REST API in Node.js & Express from scratch.

I'll be guiding you step by step with a detailed explanation from installing node to building our restful API.

Now, What is an API? 🤷🏻‍♂️

API stands for Application Programming Interface. Yes I know it’s too much jargon.

In simple terms, API is a service that is used to deliver data and the content between the server and the client.

So let’s build our very first API 😍

Step 1. Download and Install Node.js

To download and install node js on your machine, head over to https://nodejs.org/en/ and select your download version.

There are two types of download version:

1. LTS — Long Term Support

2. Current Version

In this tutorial, I would recommend you to download the LTS version as it’s more stable.

Download Link: https://nodejs.org/en/

To Verify your installation open your terminal (macOS) or Command Prompt (Windows) and type “node — version”. This will show your current installed version of nodejs on your machine.

Congrats! you have successfully installed nodejs on your machine.

Step 2: Setting up the project folder

After you have successfully installed node on your machine, lets set up our project structure for building API.

Step 1: Create a new folder, let's name it as “myApi”

Step 2: Open terminal or command prompt and navigate to the recently created folder i.e “myApi”.

Step 3: Setting up package.json

Every node project has a file named as package.json. This file contains some configs and names about your project. This file also keeps the track of the dependencies and packages used in our project.

To create a package.json, In your terminal or command prompt type

npm init

in your project folder and press enter. At this step, npm would ask you some questions like name, description, etc. Keep pressing enter key to accept all at default names.

Now you have successfully created your own package.json file.

{
  "name": "myapi",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Please do verify that package.json is created inside the folder.

Create an index.js file

Note: If you had a look on to our package.json file, there is a key named as “main” and value is “index.js”, which means that index.js is the entry point of our application. So we need to create an index.js file in our project directory.

Our Project Structure:

myApi
|- index.js
|- package.json

Huraa! 🎉 our project is now set up and we can finally move on to code our API.

Step 4: Install dependencies

Before we get started to code our API we need to install some dependencies in our project.

Installing dependencies is really simple. All you need to type is a command in your terminal or command prompt.

For this project, we need a dependency i.e express.js

Command:

npm install express

Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

At this point a package.lock and node_modules folder would be created in your project directory. node_modules folder contains the source code of your all the dependencies that you install (express in our case).

Step 5: Lets Code! 💻

Open your index.js file and code along with me.

// Import the Express using require() module
const express = require('express');

// Initalize express app
const app = express();

// Lets create Fake Data for api
const userData = [
  {
    id: 1,
    name: 'Jhon',
    age: 20
  },
  {
    id: 2,
    name: 'Jane',
    age: 23
  },
  {
    id: 3,
    name: 'Tim',
    age: 34
  },
];

// Create Endpoints for API

// Endpoint 1
app.get('/api', function(req, res){
  res.send('Welcome to our API')
})

// Endpoint 2
app.get('/api/users', function(req, res){
  res.json(userData);
})

// Endpoint 3
app.get('/api/user/:id', function(req, res){
  const id = req.params.id;
  const user = userData.find(user => user.id == id);

  if (user) {
    res.json(user)
  }
  else {
    res.send('No User Found')
  }
})

// Start the Server
const PORT = 3000;
app.listen(PORT, function(){
  console.log('Server Started')
})

So firstly we will import express in our application using require() function and store it into a variable express.

const express = require('express')

Now, the express module that we have just imported returns a function which we can store into a different variable. By convention it is named as an app;

const app = express()

Great going! Now let's create a fake array of users which we would serve to our clients as an API.

const userData = [

{

id: 1,

name: 'Jhon',

age: 20

},

{

id: 2,

name: 'Jane',

age: 23

},

{

id: 3,

name: 'Tim',

age: 34

},

];

Feel free to add more users or data. 😉

Now we are finally ready to create our API Endpoints

An API endpoint is a URL where users can access to our API.

Creating Endpoints (also known as routes) is really simple.

Syntax: app.<Request_Method>(‘ Endpoint ’, callback function)

Example: Suppose we want an endpoint named as posts that accept GET requests.

app.get('/posts', function(req, res){
  // ... do stuff !
})

The callback function has access to two parameters i.e Request and Response respectively.

So now you know how to create endpoints lets create some for our API.

// Endpoint 1
app.get('/api', function(req, res){
  res.send('Welcome to our API')
})

// Endpoint 2
app.get('/api/users', function(req, res){
  res.json(userData);
})

// Endpoint 3
app.get('/api/user/:id', function(req, res){
  const id = req.params.id;
  const user = userData.find(user => user.id === id);

  if (user) {
    res.json(user)
  }
  else {
    res.send('No User Found')
  }
})

Now, please pay a little attention to endpoint 3.

app.get(‘/api/user/:id’, function(req, res){
})

Here “: id” at the end of the endpoint is a parameter.

Suppose user types **www.example.com/api/user/1, **then the value of id would be equal to 1. you got the point!

We can access these parameters by typing req.params.id where req is the request which we received from the first parameter of the call back;

app.get(‘/example’, function(req, res){}) ;

Sending Response

To send a response to the client we use the res parameter.

res.send(“Hey There”);

or JSON Response

res.json(object);

In the end, we have to start our server by listening to some PORT and trust me this is also really simple.

Just use .listen function that accepts two parameters, PORT number and a callback function (which gets called when our server starts).

app.listen(3000, function(){
   console.log('Server Started');
})

In our example, we have used 3000 as our PORT number.

Congratulations 🎉! Now let's start our application

To start your server type

node index.js

in command prompt or terminal and your server would get started.

Let's test our API

Navigate to your favourite web browser and visit localhost:3000/api

Now let's test the users API endpoint.

Visit: localhost:3000/api/users

Last but not the least, let's test our endpoint three

Visit: localhost:3000/api/user/<id>

Example: localhost:3000/api/user/2

Congrats! 😍 You have build your very own first API.

Follow me on social media:

Github: piyushgarg195

Linkedin: Piyush Garg