DEV Community: Soumya Dey

Verifying requests from Slack - The CORRECT method for Node.js

Soumya Dey — Wed, 04 Jan 2023 17:02:46 +0000

As the official documentation from Slack says

There are some blogs and tutorials available for helping you do this verification, but nearly all of them ignore one very important point in the process. And because of this when I had to implement this verification process in a backend server API service I struggled a long time because the signature coming from Slack and the signature calculated by me in the server was not matching. I finally made it work after one advice from the Slack's team.

We need to confirm that you're extracting the raw version of the callback request payload and preserving it in its "raw" form when used in code? This is important because the "raw" form of the request body, including whitespace, is used by Slack's system to calculate the signature.

For more details you can check the official documentation where this very important point is written in such a way that if you are not absolutely attentive to each and every line you'll surely miss it, as I did myself.

Sine all the steps are already available in the official docs here Verifying requests from Slack, I am going through the steps in short.

The main objective of this article is to show you how to get the request body is raw format and then use it to calculate the signature to match it with the provided signature from Slack's side.

The steps go like this:

1. Update your main JavaScript file

the file where you have initialized the express app i.e. the entry point to your server API service



const express = require('express');
const app = express();
...
...
...
app.listen(8000, () => console.log(`server started`));

Add the following middlewares to your app to get the raw request body after the line const app = express();:

for application/json content type



app.use(
  express.json({
    verify: (req, _, buf) => {
      req.rawBody = buf;
    },
  })
);

for application/x-www-form-urlencoded content type



app.use(
  express.urlencoded({
    extended: true,
    verify: (req, _, buf) => {
      req.rawBody = buf;
    },
  })
);

Now you can access the raw request body inside any of your API routes or any middlewares in your app like the following:



const router = require('express').Router();
...
...
...
router.post('/some-route', (req, res) => {
  console.log({rawBody: req.rawBody});
  ...
  ...
  ...
});

2. Verify the requests coming from Slack

Here's an overview of the process to validate a signed request from Slack:

Retrieve the X-Slack-Request-Timestamp header on the HTTP request, and the body of the request.
Concatenate the version number, the timestamp, and the body of the request to form a basestring. Use a colon as the delimiter between the three elements. For example, v0:123456789:command=/weather&text=94070. The version number right now is always v0.
With the help of HMAC SHA256 implemented in the NPM package crypto, hash the above basestring, using the Slack Signing Secret as the key. Compare this computed signature to the X-Slack-Signature header on the request.

This package crypto is now a built-in Node module. If you've depended on crypto, you should switch to the one that's built-in.

Here I have written a middleware method that I am using in my API routes for handling Slack request [message actions, data submissions, slash commands, webhook payloads etc.]

The code for the middleware is as follows. The method is written in a file named webhookVerifier.js and later the method is imported in the file needed.



const crypto = require('crypto');
...
...
...
const slack = (req, res, next) => {
  // verify that the timestamp does not differ from local time by more than five minutes
  if (
    !req.headers['x-slack-request-timestamp'] ||
    Math.abs(
      Math.floor(new Date().getTime() / 1000) -
        +req.headers['x-slack-request-timestamp']
    ) > 300
  )
    return res.status(400).send('Request too old!');

  // compute the basestring
  const baseStr = `v0:${req.headers['x-slack-request-timestamp']}:${req.rawBody}`;

  // extract the received signature from the request headers
  const receivedSignature = req.headers['x-slack-signature'];

  // compute the signature using the basestring 
  // and hashing it using the signing secret 
  // which can be stored as a environment variable
  const expectedSignature = `v0=${crypto
    .createHmac('sha256', process.env.SLACK_SIGNING_SECRET)
    .update(baseStr, 'utf8')
    .digest('hex')}`;

  // match the two signatures
  if (expectedSignature !== receivedSignature) {
    console.log('WEBHOOK SIGNATURE MISMATCH');
    return res.status(400).send('Error: Signature mismatch security error');
  }

  // signatures matched, so continue the next step
  console.log('WEBHOOK VERIFIED');
  next();
};

// exporting the method
module.exports = { slack };

3. Add the middleware in your routes

You can import the middleware in your routes file and use it in your API routes for Slack like the following



const router = require('express').Router();

// importing the webhook verifier method for slack
const webhookVerifier = require('./path/to/the/webhookVerifier/file/webhookVerifier');

// for managing slack user interactions
router.post('/interact', [webhookVerifier.slack], async (req, res) => {
...
...
...
});

// for handling slack slash commands
router.post('/slash', [webhookVerifier.slack], async (req, res) => {
...
...
...
});

// for managing the slack webhook evevt subscription payloads
router.post('/webhook', [webhookVerifier.slack], async (req, res) => {
...
...
...
});

module.exports = router;

Note: Your API routes will be different than mine. The above code is just an example

The most important point is to use the raw request body instead of the encoded request body. Because of this small but very important point which was missing from my code, I was breaking my head for a long time. Hope that your head will not get that treatment after this tutorial.

My Recent Blog Posts 📓:

Find me around web 🕸:

💻 Visit my Website
🌟 Check out my Substack
😸 Check my Repos on GitHub
🦊 Check my Repos on GitLab
📦 Check my Packages on NPM
🔗 View my Profile on LinkedIn
📝 View my Blogs on Dev.to
😜 Follow me on Instagram
📚 Check out my Goodreads Profile
📪 Contact me Here

Make Arrays your best friend with these methods!

Soumya Dey — Sun, 13 Dec 2020 18:45:23 +0000

I know many people have already written a lot about arrays, but most of them only contain the most used and basic methods.

But there are lots of not so popular methods that you can use to manipulate, iterate, and do many things with your arrays. So we are going to talk about those methods in this post using JavaScript.

Arrays

JavaScript array is a non-primitive data type that can store multiple values in it which can be of the same data type or different data type. Also, the length of a JavaScript array is not fixed.

Array methods

We all know about push(), pop(), indexOf() methods.
arr.push('x') adds x at the end of the array arr and arr.pop() removes the last item from arr.
arr.indexOf('x') finds the index of x in arr.

So let's talk about the unpopular but equally important guys here.

Manipulate arrays

unshift()

The unshift() method adds the new element at the beginning of the array and returns the new length of the array.

Example

const array = ["world"];
array.unshift("hello"); // 2

console.log(array); // ["hello", "world"]

shift()

The shift() method removes the first element from the array and returns the removed element. It also changes the length of the array.

Example

const array = ["hello", "world"];
array.shift(); // "hello"

console.log(array); // ["world"]

slice()

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end, excluding the item at the end index. The original array is not modified

Example

const array = ["js", "py", "java", "c++", "c#"];

array.slice(3); // [ 'c++', 'c#' ]

array.slice(0, 2); // [ 'js', 'py' ]

console.log(array); // ["js", "py", "java", "c++", "c#"]

splice()

The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

Example

const array = ["js", "py", "java", "c++", "c#"];

array.splice(0, 2); // delets 2 items starting from index 0
console.log(array); // ["java", "c++", "c#"]

array.splice(0, 1, 'kotlin');
// delets 1 item starting from index 0,
// and puts 'kotlin' in that place
console.log(array); // ["kotlin", "c++", "c#"]

join()

The join() method creates and returns a new string by concatenating all of the elements in an array separated by commas or a specified separator string.

Example

const array1 = ["1", "2", "3"];
array1.join(); // "1,2,3"

const array2 = ["I", "love", "programming"];
array2.join("-"); // "I-love-programming"

concat()

The concat() method is used to merge two or more arrays. This method does not change the existing arrays but instead returns a new array.

Example

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3); // ["a", "b", "c", "d", "e", "f"]

Iterate over arrays

every()

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

Example

const array = [10, 2, 1, 13, 17, 19, 6, 9];

array.every(item => item > 4) // false
array.every(item => item < 20) // true

some()

The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns a Boolean value.

Example

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
array.some(item => item % 2 === 0); // true

map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

Example

const array = [1, 2, 3, 4, 5];

const doubleOfArray = array.map(item => item * 2);

console.log(doubleOfArray); // [2, 4, 6, 8, 10]

filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

Example

const array = [1, 2, 3, 4, 5];

// only the element that are even
const evenArray = array.filter(item => item % 2 === 0);

console.log(evenArray); // [2, 4]

Reduction methods

reduce()

The reduce() method executes a reducer function defined by you on each element of the array, resulting in a single output value.

Example

const array = [1, 2, 3, 4, 5];

// ((((1-2)-3)-4)-5) = -13
const result = array.reduce((accumulator, current) => accumulator - current);

console.log(result); // -13

reduceRight()

The reduceRight() method applies a function against an accumulator and each value of the array (from right-to-left) to reduce it to a single value.

Example

const array = [1, 2, 3, 4, 5];

// ((((5-4)-3)-2)-1) = -5
const result = array.reduceRight((accumulator, current) => accumulator - current);

console.log(result); // -5

Sorting arrays

sort()

The sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending.

Example

const months = ['March', 'Jan', 'Feb', 'Dec'];
const nums = [4, 6, 2, 5, 1, 7, 3]

months.sort();
nums.sort();

console.log(months); // ["Dec", "Feb", "Jan", "March"]
console.log(nums); // [1, 2, 3, 4, 5, 6, 7]

reverse()

The reverse() method reverses an array in place and returns the sorted array. Don't confuse it with sorting in descending order.

Example

const nums = [4, 6, 2, 5, 1, 7, 3]

nums.reverse();

console.log(nums); // [3, 7, 1, 5, 2, 6, 4]

That's it. You have made a new best friend now.

Thanks for reading.
If you want to get a deeper knowledge of Arrays in JavaScript then make sure to read the MDN docs of Array here 👉 Array - JavaScript | MDN

Comment here if you have any questions about these awesome array methods.

Find me around web 🕸:

💻 Visit my Website
🌟 Check out my Substack
😸 Check my Repos on GitHub
🦊 Check my Repos on GitLab
📦 Check my Packages on NPM
🔗 View my Profile on LinkedIn
📝 View my Blogs on Dev.to
😜 Follow me on Instagram
📚 Check out my Goodreads Profile
📪 Contact me Here

Node & Express server, but with TypeScript !

Soumya Dey — Thu, 19 Nov 2020 15:41:15 +0000

In this post, I am not going to insist you use TypeScript over JavaScript or talk about how TypeScript is better than JavaScript.

This post will guide you on how to start building a Node and Express server using TypeScript. So if you don't care about which language is better or which is bad and just want to learn TypeScript, then follow along.

Let's Start 🤓

Initialize a project

Navigate to your folder of choice and open the terminal in that folder. Now use npm to initialize a new project.

cd code/
mkdir node-typescript-demo
npm init -y

-y flag is for using all the default values. You can omit that if you want to enter the values manually.

Now you should have a package.json file in your project directory.

{
  "name": "node-typescript-demo",
  "version": "1.0.0",
  "description": "",
  "main": "server.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Soumya Dey",
  "license": "MIT"
}

Now let's create our main file server.ts in the root of the project directory. And open the project in your choice of code editor. I am gonna use Visual Studio Code.

touch server.ts
code .

Install dependencies

Now let's install all the required dependencies for our server.
We'll install express and typescript.

npm i express typescript

We'll also need the versions of express and node with the types for TypeScripts to recognize the types. Also, a package called ts-node is required to run a development server written using TypeScript directly from the terminal

npm i -D @types/node @types/express ts-node

Get the server up and running

Now let's add the code for the server to run.
Open server.ts file in your editor and create an express app. Add the following code to run the server.

import express from "express";

const app = express();

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

app.get("/", (req, res) => res.send("Hello from server!"));

app.listen(PORT, () => console.log(`⚡Server is running here 👉 https://localhost:${PORT}`));

But before we run the server, there is one last thing to set up.
We'll need to create a config file for typescript so that our code gets compiled properly.
Create a tsconfig.json file at the root of the development server project and add the following lines of code.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "rootDir": "./",
    "outDir": "./build",
    "esModuleInterop": true,
    "strict": true
  }
}

The compilerOptions is a mandatory field that needs to be specified. The options used in the config above are:

target allows us to specify the target JavaScript version that compiler will output.
module allows us to use a module manager in the compiled JavaScript code. The commonjs is supported and is a standard in Node.js.
rootDir is an option that specifies where the TypeScript files are located inside the Node.js project.
outDir specifies where the output of the compiled is going to be located.
esModuleInterop allows us to compile ES6 modules to commonjs modules.
strict is an option that enables strict type-checking options.

There might be other configuration options that you can add on for the TypeScript compiler but these are the basic configuration options specified that can help you to get started.

Now open the terminal and enter the following command to start your server.
I am going to use nodemon to watch for file changes. You can install nodemon globally in your machine by using the command npm i -g nodemon.

To use it, you may add a server script in the package.json file as specified below.

"scripts": {
    "server": "nodemon server.ts"
  },

Now start the server with the server script

npm run server

You should see this output in the terminal if there are no errors.

[nodemon] 2.0.6
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node server.ts`
⚡Server is running here 👉 https://localhost:4000

Now you can open https://localhost:4000 in your browser and it should show the following screen.

As we are using nodemon, it will restart the server for us automatically whenever there is a file-change.

So that's your node js server up and running with all its glory using TypeScript.

Compile your TypeScript project

To compile a TypeScript project to a valid JavaScript one, start by declaring a new script called build inside the package.json file.

"scripts": {
    "server": "nodemon server.ts",
    "build": "tsc --project ./"
  },

TypeScript provides a command to compile the code called tsc. This command demands a flag to specify as to what to compile.
The --project (shorthand: -p) is used to specify the project directory that the compiler can pick the code files from to compile to valid JavaScript.
The ./ specifies the root project.

From the terminal window, run the build command to compile the code

npm run build

Now there will be a folder named build in the root of your project directory.
Open the folder and you'll see a file that contains your TypeScript code compiled to JavaScript.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const app = express_1.default();
const PORT = process.env.PORT || 4000;
app.get("/", (req, res) => res.send("Hello from server!"));
app.listen(PORT, () => console.log(`⚡Server is running here 👉 https://localhost:${PORT}`));

If you specify any other directory named as the value of the property outDir in the tsconfig.json file that name of the directory would have reflected here instead of build.

Source code

You can get the final source code here 👉 @Soumya-Dey/node-typescript-server-demo

Thanks for reading. Show some love if you like the post.

Don't forget to share your views about this post in the comments.

Find me around web 🕸:

💻 Visit my Website
🌟 Check out my Substack
😸 Check my Repos on GitHub
🦊 Check my Repos on GitLab
📦 Check my Packages on NPM
🔗 View my Profile on LinkedIn
📝 View my Blogs on Dev.to
😜 Follow me on Instagram
📚 Check out my Goodreads Profile
📪 Contact me Here

Understanding Lexical Scope & Closures in JavaScript

Soumya Dey — Sun, 01 Nov 2020 11:55:15 +0000

This post is a continuation of my other post Javascript Scope rules. If you haven't read it, check it out first.

First, let me say that this blog post is highly inspired by the great JavaScript book You Don't Know JS, by Kyle Simpson.

I am assuming you have a good understanding of how JS scope rules work.

Let's start

The first traditional phase of a standard language compiler is called tokenizing or, lexing.

What is Lexical Scope?

Lexical scope is a scope that is defined at the lexing time. In other words, lexical scope is based on where variables and blocks of scope are authored, by you, at write time.

Let's consider this block of code:

This example is taken from the book You Don't Know JS

function foo(a) {

    var b = a * 2;

    function bar(c) {
        console.log( a, b, c );
    }

    bar(b * 3);
}

foo( 2 ); // 2 4 12

There are three nested scopes inherent in this code example

In the above code snippet, the Engine executes the console.log(..) statement and goes looking for the three referenced variables a, b, and c. It first starts with the innermost scope bubble, the scope of the bar(..) function. It won't find a there, so it goes up one level, out to the next nearest scope bubble, the scope of foo(..). It finds a there, and so it uses that a. Same thing for b. But c, it does find inside of bar(..).

Had there been a c both inside of bar(..) and inside of foo(..), the console.log(..) statement would have found and used the one in bar(..), never getting to the one in foo(..).

Hence,

Scope look-up stops once it finds the first match.

So in short, Lexical scope means that scope is defined by author-time decisions of where functions are declared. The lexing phase of compilation is essentially able to know where and how all identifiers are declared, and thus predict how they will be looked-up during execution.

There are two mechanisms in JavaScript that can 
"cheat" lexical scope: `eval(..)` and `with`. 
We will talk about those in another post.

Now that we have a solid understanding of scope, let's enlighten ourselves with an incredibly important part of the language: Closures

So what are Closures?

Closures are not a special opt-in tool that you must learn new syntax and patterns for. Closures are all around in your javascript code. You just have to recognize and embrace it.

Let's take an example to fully understand closures once and for all.

This example is taken from the book You Don't Know JS

function foo() {
    var a = 2;

    function bar() {
        console.log( a );
    }

    return bar;
}

var baz = foo();

baz(); // 2 -- Whoa, closure was just observed, man.

The function bar() has lexical scope access to the inner scope of foo(). But then, we take bar(), the function itself, and pass it as a value. In this case, we return the function object itself that bar references.

After we execute foo(), we assign the value it returned (our inner bar() function) to a variable called baz, and then we actually invoke baz(), which of course is invoking our inner function bar(), just by a different identifier reference.

bar() is executed, for sure. But in this case, it's executed outside of its declared lexical scope.

After foo() executed, normally we would expect that the entirety of the inner scope of foo() would go away, because we know that the Engine employs a Garbage Collector that comes along and frees up memory once it's no longer in use.

But the "magic" of closures does not let this happen. That inner scope is in fact still "in use", and thus does not go away.

By virtue of where it was declared, bar() has a lexical scope closure over that inner scope of foo(), which keeps that scope alive for bar() to reference at any later time.

bar() still has a reference to that scope, and that reference is called closure.

Closure lets the function continue to access the lexical scope it was defined in at author-time.

Closures are everywhere!

Let's see an example that shows that closures are really everywhere in Javascript

function wait(message) {

    setTimeout( function timer(){
        console.log( message );
    }, 1000 );

}

wait( "Hello, closure!" );

We take an inner function (named timer) and pass it to setTimeout(..). But timer has a scope closure over the scope of wait(..), indeed keeping and using a reference to the variable message.

For more in-depth knowledge of Javascript Scopes and Closures be sure to have a read of the awesome book You Don't Know JS, by Kyle Simpson.

More in Closures:

Loops + Closures

Modules

Review

Closure seems to be like a mystical world set apart inside of JavaScript which only a few bravest souls can reach. But it's actually just a standard and almost obvious fact of how we write code in a lexically scoped environment, where functions are values and can be passed around at will.

So, that's it. I hope you learned something new from this post.
Show some love if you liked this post.

Follow me on Github.

And don't forget to comment your views about this post.

Thanks for reading. 😄

Find me around web 🕸:

💻 Visit my Website
🌟 Check out my Substack
😸 Check my Repos on GitHub
🦊 Check my Repos on GitLab
📦 Check my Packages on NPM
🔗 View my Profile on LinkedIn
📝 View my Blogs on Dev.to
😜 Follow me on Instagram
📚 Check out my Goodreads Profile
📪 Contact me Here

What & Where to Learn - Web Development Roadmap in 2020

Soumya Dey — Tue, 20 Oct 2020 14:12:05 +0000

Before you begin with the Roadmap

I am sharing a roadmap for learning web-development starting from the absolute beginner stage
This is not the only way you can become a web developer. You don't have to follow the exact sequence of learning these technologies.
You can of course mix and match according to your preference.
I am sharing the courses or tutorials that I found helpful in learning the various web technologies.
And most importantly, the course creators or instructors haven't paid me to talk about their courses.
The courses that I am sharing here are for learning MERN stack [MongoDB, Express.js, React, Node.js].

Let's Begin

The typical roadmap for learning all the technologies for becoming a decent MERN stack web developer would be something like the following 👇

🖥️ Front-End technologies:

Html

CSS

CSS frameworks like Bootstrap, Tailwind, etc.

Preprocessor libraries like SASS etc.

Responsive Web Design

Javascript

DOM manipulation

ES6 features in-depth

React, Vue or Angular

Design frameworks line Material UI etc.

Packages like Redux etc.

🛠️ Back-End technologies:

Node.js

Express.js

REST API with Express.js

Authentication in Backend

Git and Github for version control

MongoDB

Mongoose.js

📱 Mobile development technologies:

React Native or Flutter

Courses for learning these awesome technologies

When I started to learn I didn't felt very comfortable reading the documentation for learning something. So I went for online tutorials.
These courses gave me a headstart. And after several months [more like a year and a half] learning these things, I can say that I'm comfortable now to learn a new technology on my own, following written tutorials and documentation.

For knowing about all the technologies in a single course you can go for the following course. 👉

The Complete 2020 Web Development Bootcamp by Angela Yu

But keep in mind this won't give you in-depth 
knowledge of these technologies. After this course, 
you'll be comfortable working with these 
technologies, and then you have to continue for more 
advanced knowledge.

If you want to take more of a modular approach 👉

For Html, CSS with responsive web design
- The Creative HTML5 & CSS3 Course by Dev Ed | very much recommended
- Build Responsive Real World Websites with HTML5 and CSS3 by Jonas Schmedtmann
For Javascript and ES6
- The Creative Javascript Course by Dev Ed
- The Complete JavaScript Course 2020: Build Real Projects! by Jonas Schmedtmann | very much recommended
- 20 Web Projects With Vanilla JavaScript by Brad Traversy | very much recommended
For a complete package of MERN Stack with Node.js, Express, React, Redux & MongoDB
- MERN Stack Front To Back: Full Stack React, Redux & Node.js by Brad Traversy | very much recommended
For React.js
- React Front To Back by Brad Traversy
For Node.js with Express and MongoDB
- Node.js API Masterclass With Express & MongoDB by Brad Traversy
- Node.js, Express, MongoDB & More: The Complete Bootcamp 2020 by Jonas Schmedtmann
For Mobile development with React Native
- The Ultimate React Native Series by Mosh Hamedani | very much recommended
For Mobile development with Flutter
- The Complete 2020 Flutter Development Bootcamp with Dart by Angela Yu

Hope you will have a good time learning these 😄.

Again I'm saying, none of the instructors of the mentioned courses sponsored me to write about their courses.
I am sharing these because some of these courses helped me a lot to learn about web development and I'm very grateful to these awesome people for making these tutorials.

Show some love if you like my blogs.

Thanks for reading 😃.

Find me around web 🕸:

💻 Visit my Website
🌟 Check out my Substack
😸 Check my Repos on GitHub
🦊 Check my Repos on GitLab
📦 Check my Packages on NPM
🔗 View my Profile on LinkedIn
📝 View my Blogs on Dev.to
😜 Follow me on Instagram
📚 Check out my Goodreads Profile
📪 Contact me Here

Understanding JavaScript Scope Rules with Examples

Soumya Dey — Wed, 30 Sep 2020 14:24:27 +0000

First, let me say that this blog post is highly inspired by the great JavaScript book You Don't Know JS, by Kyle Simpson.

After finishing the 1st title, I realized how I was only scratching the surface of JavaScript till now. It doesn't teach JavaScript as if you've never used it but it makes you realize how little you knew about the under-the-hood workings.

This post is about Scopes in JS, but I highly recommend you to give this book a try.

So let's get into the topic.

What is scope actually?

Every programming language has a well-defined set of rules for storing variables in some locations, and for finding those variables at a later time. We'll call that set of rules: Scope.

Understanding Scope

The way we will approach learning about scope is to think of the process in terms of a conversation. But, who is having the conversation?

The Cast

Let's meet the cast of characters that interact to process the program var a = 2;, so we understand their conversations that we'll listen in on shortly:

Engine : responsible for start-to-finish compilation and execution of our JavaScript program.
Compiler : one of Engine's friends; handles all the dirty work of parsing and code-generation (see the previous section).
Scope : another friend of Engine; collects and maintains a look-up list of all the declared identifiers (variables), and enforces a strict set of rules as to how these are accessible to currently executing code.

When you see the program var a = 2;, you most likely think of that as one statement. But that's not how our new friend Engine sees it. In fact, Engine sees two distinct statements, one which Compiler will handle during compilation, and one which Engine will handle during execution.

Compiler will proceed as :

Encountering var a, Compiler asks Scope to see if a variable a already exists for that particular scope collection. If so, the Compiler ignores this declaration and moves on. Otherwise, Compiler asks Scope to declare a new variable called a for that scope collection.
Compiler then produces code for Engine to later execute, to handle the a = 2 assignment. The code Engine runs will first ask Scope if there is a variable called a accessible in the current scope collection. If so, Engine uses that variable. If not, Engine looks elsewhere (see nested Scope section below).
If the Engine eventually finds a variable, it assigns the value 2 to it. If not, Engine will raise its hand and yell out an error!

Before proceeding further let us know about 2 important terms.

LHS : It means that the Engine would be performing a look-up for a variable.
RHS : It means "retrieve his/her source (value)", implying that RHS means "go get the value of...".

Engine/Scope Conversation

This example is taken from the book You Don't Know JS

function foo(a) {
    console.log( a ); // 2
}

foo( 2 );

Let's imagine the above exchange (which processes this code snippet) as a conversation. The conversation would go a little something like this:

Engine: Hey Scope, I have an RHS reference for foo. Ever heard of it?
Scope: Why yes, I have. Compiler declared it just a second ago. He's a function. Here you go.
Engine: Great, thanks! OK, I'm executing foo.
Engine: Hey, Scope, I've got an LHS reference for a, ever heard of it?
Scope: Why yes, I have. Compiler declared it as a formal parameter to foo just recently. Here you go.
Engine: Helpful as always, Scope. Thanks again. Now, time to assign 2 to a.
Engine: Hey, Scope, sorry to bother you again. I need an RHS look-up for console. Ever heard of it?
Scope: No problem, Engine, this is what I do all day. Yes, I've got console. He's built-in. Here ya go.
Engine: Perfect. Looking up log(..). OK, great, it's a function.
Engine: Yo, Scope. Can you help me out with an RHS reference to a. I think I remember it, but just want to double-check.
Scope: You're right, Engine. Same guy, hasn't changed. Here ya go.
Engine: Cool. Passing the value of a, which is 2, into log(..).
...

Nested Scope

Just like we can have nested blocks of code, we can also have nested scope i.e. one or more scopes nested inside another scope.
So when a variable couldn't be found in a scope, the Engine consults the immediate outer scope, and continuing until it reaches the global scope.

Another great example from the book

function foo(a) {
    console.log( a + b );
}

var b = 2;

foo( 2 ); // 4

The RHS reference for b cannot be resolved inside the function foo, but it can be resolved in the Scope surrounding it (in this case, the global).

So, revisiting the conversations between Engine and Scope, we'd overhear:

Engine: "Hey, Scope of foo, ever heard of b? Got an RHS reference for it."

Scope: "Nope, never heard of it. Go fish."

Engine: "Hey, Scope outside of foo, oh you're the global Scope, ok cool. Ever heard of b? Got an RHS reference for it."

Scope: "Yep, sure have. Here ya go."

The simple rules for traversing nested Scope: Engine starts at the currently executing Scope, looks for the variable there, then if not found, keeps going up one level, and so on. If the outermost global scope is reached, the search stops, whether it finds the variable or not.

Errors

If an RHS look-up fails to ever find a variable, anywhere in the nested Scope*s, this results in a ReferenceError being thrown by the *Engine. It's important to note that the error is of the type ReferenceError.
By contrast, if the Engine is performing an LHS look-up and arrives at the top floor (global Scope) without finding it, and if the program is not running in Strict Mode, then the global Scope will create a new variable of that name in the global scope, and hand it back to Engine.

"No, there wasn't one before, but I was helpful and created one for you."

Now, if a variable is found for an RHS look-up, but you try to do something with its value that is impossible, such as trying to execute-as-function a non-function value, or reference a property on a null or undefined value, then Engine throws a different kind of error, called a TypeError.

ReferenceError is Scope resolution-failure related, whereas TypeError implies that Scope resolution was successful, but that there was an illegal/impossible action attempted against the result.

So, that's it. I hope you learned something from this post.
Show some love if you liked this post.

And don't forget to comment your views about this post.

Thanks for reading. 😄

Find me around web 🕸:

💻 Visit my Website
🌟 Check out my Substack
😸 Check my Repos on GitHub
🦊 Check my Repos on GitLab
📦 Check my Packages on NPM
🔗 View my Profile on LinkedIn
📝 View my Blogs on Dev.to
😜 Follow me on Instagram
📚 Check out my Goodreads Profile
📪 Contact me Here

Some Lesser Known But Awesome Online Tools For Web Development

Soumya Dey — Tue, 22 Sep 2020 15:47:13 +0000

These are some not so popular sites or apps or extensions I found very useful, either because they make my life easier or because they push me to write more accessible code.

The list is divided into these parts :

UI Graphics
Colors
Icons
Product & Image Mockups
Online Design Tools
Extensions

UI Graphics

Websites	Description
Open Doodles	It's a free set of sketchy illustrations by Pablo Stanley.
Humaaans	Here you can Mix-&-Match illustrations of people with a design library.
Paaatterns	It's a free collection of beautiful patterns for all vector formats.
Open Peeps	A great hand-drawn illustration library.
avataaars	Mix & Match avatars with a sketch library also created by Pablo Stanley.
DrawKit	Hand-drawn vector illustration and icon resources, perfect for your next project.
illlustrations.co	Another great Open source illustrations kit.

↥ To Top

Colors

Websites	Description
FlatUIColors 2	Beautiful set of color palettes in various flavours.
SchemeColor	A great website to download color schemes.
Gradienta	A pure css and jpg gradients.
uiGradients	Gorgeous looking gradient generator.
Coolors	Create or get inspired by thousands of beautiful color schemes.

↥ To Top

Icons

Websites	Description
Boxicons	A simple vector icons set carefully crafted for designers and developers
FeatherIcons	Beautiful, customizable open source icons
Simple Icons	More than 1400 Free SVG icons for popular brands
Ionicons	Premium designed icons for use in web, iOS, Android, and desktop apps.
Svg Porn	1000+ high-quality SVG logos
Browser Logos	A repo for high resolution web browser logos
Heroicons	Not so large but quality set of filled and outline svg icons

↥ To Top

Product & Image Mockups

Websites	Description
Screely	Generate Website Mockups Instantly Without Complicated Software
threed.io	Generate 3D Mockups right in your Browser
ShotBot	A screenshot builder for android and ios.(currently not accepting new accounts)
SmartMockups	Generate stunning product mockups.

↥ To Top

Online Design Tools

Websites	Description
ShapeFactory	One stop of design tools including Logos, Pigments, Gradient, Duotone, Illustrations.
AngryTools	Another great all rounder design tool.
Smart upscaler	Enlarge and enhance images automatically using AI.
neumorphism.io	Generate Soft-UI CSS code.
Grid.malven	A simple visual cheatsheet for css grid.
TinyPNG	Website for smart PNG and JPEG compression.
Remove.bg	Remove image background 100% automatically and free.
Online png tools	A collection of useful PNG image utilities for working with PNG graphics files.
Bootswatch	Collection of free themes for Bootstrap.
GraphicBurger	Tasty design resources made with care for each pixel
Blobmaker	Quickly create random, unique, and organic-looking SVG shapes.
Personas	A playful avatar generator for the modern age.
CodingHeros	Jonas's resources for building great websites with html, css, javascript.
You Don't Need jQuery!	A great blog post stating why you don't need jquery.
Brumm.af	A great online tool for easily creating layered box shadows

↥ To Top

Extensions

Websites	Description
Picture-in-Picture Extension (by Google)	Watch video using Picture-in-Picture
Page Ruler Redux	A Web Developer\Designer ruler to get perfect pixel dimensions and positioning to measure elements on any web page
WhatFont	What Font allows you to know the font name, its family, color, style, size, position.
Just Color Picker	Сolor picker for web designers and digital artists, created by a designer and digital artist.
GoFullPage	Capture a screenshot of your current page in entirety and reliably without requesting any extra permissions!

↥ To Top

BONUS : You made it to the bottom of the list. So here's a bonus for you.

Websites	Description
You Don't Know JS	A great book series on JavaScript. And if you go the 1st-ed branch, the titles are all free for you to learn!

Thanks for reading. Show some love if you like the post.

Don't forget to share your favourite tools that helps you in development in the comments.

Find me around web 🕸:

💻 Visit my Website
🌟 Check out my Substack
😸 Check my Repos on GitHub
🦊 Check my Repos on GitLab
📦 Check my Packages on NPM
🔗 View my Profile on LinkedIn
📝 View my Blogs on Dev.to
😜 Follow me on Instagram
📚 Check out my Goodreads Profile
📪 Contact me Here

Integrate Razorpay Payment Gateway in your React app

Soumya Dey — Wed, 16 Sep 2020 12:19:51 +0000

What is Razorpay?

Razorpay is a payments solution in India that allows businesses to access all payment modes including credit card, debit card, netbanking, UPI and other popular wallets.

Don't confuse India-only business with single currency payments.
Razorpay accepts payments in almost all currencies.

Before integrating the payment gateway in our app let us understand the payment flow of razorpay.

Payment Flow

Customers place an order on your website or app
You create an order from your server using the Razorpay instance.
You then pass the Order ID to the checkout and collect payment details.
Authentication of a payment then happens in your back-end by verifying the signature returned by Razorpay.
Capture the payment.

This is a high-level representation of the Razorpay payment flow.
You can TRY OUT the payment flow live here.

Let's Integrate Razorpay in Our App

Create a Razorpay account

Navigate to Razorpay Dashboard and create a account for yourself. No need to activate it as we are going to work in Test mode.

Go to Settings tab and generate your API keys and save them somewhere. We'll need this later.

Create our server

Create a folder in your pc and initialize npm on that folder.

npm init

We'll need to install some dependencies for our server.
Install these dependencies.

express
razorpay
dotenv
crypto (for verifying the signature in the last step)
mongoose (Optional : If you waant to save the details in a database)

npm i express razorpay dotenv crypto mongoose

Now create a file server.js in the root directory and initialize your express server.

const express = require("express");

const app = express();
const port = process.env.PORT || 5000;

// middlewares
app.use(express.json({ extended: false }));

app.listen(port, () => console.log(`server started on port ${port}`));

So now our server is running on localhost:5000 and we need to add some routes for handling the payment steps in our backend.

Save the API keys

We'll use .env file to save our keys. Create a file .env in your root directory.
Add the following code inside .env file and replace the values with your keys.

RAZORPAY_SECRET=<your razorpay secret>
RAZORPAY_KEY_ID=<your razorpay ket id>

Don't add any quotes.

Add route for creating orders

Create a new folder called routes in your root directory and add a new file payment.js inside the routes folder.

We need to create a POST route to create a order.
For that we'll have to create a instance of Razorpay.
Then we'll call instance.orders.create()

require("dotenv").config();
const express = require("express");
const Razorpay = require("razorpay");

const router = express.Router();

router.post("/orders", async (req, res) => {
    try {
        const instance = new Razorpay({
            key_id: process.env.RAZORPAY_KEY_ID,
            key_secret: process.env.RAZORPAY_SECRET,
        });

        const options = {
            amount: 50000, // amount in smallest currency unit
            currency: "INR",
            receipt: "receipt_order_74394",
        };

        const order = await instance.orders.create(options);

        if (!order) return res.status(500).send("Some error occured");

        res.json(order);
    } catch (error) {
        res.status(500).send(error);
    }
});

Note: the amount needs to be in the smallest currency unit i.e for 500 Rupess you'll have to spicify 50000 in the amount variable

Now import this payment.js route file in your server.js file to enable the route. Now your server.js file will look like this...

const express = require("express");

const app = express();
const port = process.env.PORT || 5000;

// middlewares
app.use(express.json({ extended: false }));

// route included
app.use("/payment", require("./routes/payment"));

app.listen(port, () => console.log(`server started on port ${port}`));

Now we'll need to have a front-end form where we'll make the request for creating the order.

Create a React app

We'll create the react app inside our root directory.

npx create-react-app client

I've given my app name as client. You can give any name you want.
After all this let's review our folder structure, So that you don't get lost.

Now lets clean up all the boilerplate react code.
After clean up your react app folder should look like this. You can delete all useless files from the folder.

Also install axios inside your react app folder for making requests to the back-end.

cd client
npm i axios

Add a button to start the payment flow

Go to App.js file and replace all the code with the following.

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import axios from "axios";

function App() {

    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>Buy React now!</p>
                <button className="App-link" onClick={displayRazorpay}>
                    Pay ₹500
                </button>
            </header>
        </div>
    );
}

export default App;

You can see I've only added a button and assigned a function displayRazorpay to the onClick event. So now lets create that function.
We'll need to do 3 things when the button is clicked.

Load the Razorpay checkout script that does all the work behind the scene for us.
Make a POST request to our backend route /payment/orders to create a new order, which will return details of the order including the idand amount.
Then use that id and amount and finally show the Razorpay popup.

For loading the script I've added a function loadScript that takes a script src string as input and returns a Promise that loads the script.

function loadScript(src) {
        return new Promise((resolve) => {
            const script = document.createElement("script");
            script.src = src;
            script.onload = () => {
                resolve(true);
            };
            script.onerror = () => {
                resolve(false);
            };
            document.body.appendChild(script);
        });
}

Then I'll add the function displayRazorpay that will first load the script, then make a post request to our back-end route and finally show the popup.

async function displayRazorpay() {
        const res = await loadScript(
            "https://checkout.razorpay.com/v1/checkout.js"
        );

        if (!res) {
            alert("Razorpay SDK failed to load. Are you online?");
            return;
        }

        // creating a new order
        const result = await axios.post("http://localhost:5000/payment/orders");

        if (!result) {
            alert("Server error. Are you online?");
            return;
        }

        // Getting the order details back
        const { amount, id: order_id, currency } = result.data;

        const options = {
            key: "rzp_test_r6FiJfddJh76SI", // Enter the Key ID generated from the Dashboard
            amount: amount.toString(),
            currency: currency,
            name: "Soumya Corp.",
            description: "Test Transaction",
            image: { logo },
            order_id: order_id,
            handler: async function (response) {
                const data = {
                    orderCreationId: order_id,
                    razorpayPaymentId: response.razorpay_payment_id,
                    razorpayOrderId: response.razorpay_order_id,
                    razorpaySignature: response.razorpay_signature,
                };

                const result = await axios.post("http://localhost:5000/payment/success", data);

                alert(result.data.msg);
            },
            prefill: {
                name: "Soumya Dey",
                email: "SoumyaDey@example.com",
                contact: "9999999999",
            },
            notes: {
                address: "Soumya Dey Corporate Office",
            },
            theme: {
                color: "#61dafb",
            },
        };

        const paymentObject = new window.Razorpay(options);
        paymentObject.open();
}

For every successful payment, the checkout returns:

razorpay_payment_id
razorpay_order_id
razorpay_signature

We can access these values inside the handler property. And as you can see I've made a request to a new back-end route and sent those details with the order id that we recieved while creating the order before. This is for verifying the whether the payment is legit or not.

Don't confuse the "razorpay_order_id" with the "order_id" we got
while creating a new order. These two are entirely different.

Now your App.js file should look like the following.

import React from "react";
import logo from "./logo.svg";
import "./App.css";
import axios from "axios";

function App() {
    function loadScript(src) {
        return new Promise((resolve) => {
            const script = document.createElement("script");
            script.src = src;
            script.onload = () => {
                resolve(true);
            };
            script.onerror = () => {
                resolve(false);
            };
            document.body.appendChild(script);
        });
    }

    async function displayRazorpay() {
        const res = await loadScript(
            "https://checkout.razorpay.com/v1/checkout.js"
        );

        if (!res) {
            alert("Razorpay SDK failed to load. Are you online?");
            return;
        }

        const result = await axios.post("http://localhost:5000/payment/orders");

        if (!result) {
            alert("Server error. Are you online?");
            return;
        }

        const { amount, id: order_id, currency } = result.data;

        const options = {
            key: "rzp_test_r6FiJfddJh76SI", // Enter the Key ID generated from the Dashboard
            amount: amount.toString(),
            currency: currency,
            name: "Soumya Corp.",
            description: "Test Transaction",
            image: { logo },
            order_id: order_id,
            handler: async function (response) {
                const data = {
                    orderCreationId: order_id,
                    razorpayPaymentId: response.razorpay_payment_id,
                    razorpayOrderId: response.razorpay_order_id,
                    razorpaySignature: response.razorpay_signature,
                };

                const result = await axios.post("http://localhost:5000/payment/success", data);

                alert(result.data.msg);
            },
            prefill: {
                name: "Soumya Dey",
                email: "SoumyaDey@example.com",
                contact: "9999999999",
            },
            notes: {
                address: "Soumya Dey Corporate Office",
            },
            theme: {
                color: "#61dafb",
            },
        };

        const paymentObject = new window.Razorpay(options);
        paymentObject.open();
    }

    return (
        <div className="App">
            <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>Buy React now!</p>
                <button className="App-link" onClick={displayRazorpay}>
                    Pay ₹500
                </button>
            </header>
        </div>
    );
}

export default App;

If you start your react app the app should look like this in the browser

And if you click the Pay ₹500 button a popup should appear.

But don't proceed with the payment yet. We need to add another route in our back-end to verify the payment.

Verify the payment

For this step we just need to create a signature by ourselves in the back-end and check if our signature is same as the signature sent by razorpay.
Remember, after successful payment our react app is sending back four values to the backend route /payment/success.

orderCreationId (order id, we got back while creating the order)
razorpayPaymentId
razorpayOrderId
razorpaySignature

We'll need to use the SHA256 algorithm, use the razorpayPaymentId and the orderCreationId to construct a HMAC hex digest. Then compare the digest with the razorpaySignature. If both are equal, then out payment is verified.

Create a route for verification

Navigate to payment.js file inside your routes folder and the following POST route.

router.post("/success", async (req, res) => {
    try {
        // getting the details back from our font-end
        const {
            orderCreationId,
            razorpayPaymentId,
            razorpayOrderId,
            razorpaySignature,
        } = req.body;

        // Creating our own digest
        // The format should be like this:
        // digest = hmac_sha256(orderCreationId + "|" + razorpayPaymentId, secret);
        const shasum = crypto.createHmac("sha256", "w2lBtgmeuDUfnJVp43UpcaiT");

        shasum.update(`${orderCreationId}|${razorpayPaymentId}`);

        const digest = shasum.digest("hex");

        // comaparing our digest with the actual signature
        if (digest !== razorpaySignature)
            return res.status(400).json({ msg: "Transaction not legit!" });

        // THE PAYMENT IS LEGIT & VERIFIED
        // YOU CAN SAVE THE DETAILS IN YOUR DATABASE IF YOU WANT

        res.json({
            msg: "success",
            orderId: razorpayOrderId,
            paymentId: razorpayPaymentId,
        });
    } catch (error) {
        res.status(500).send(error);
    }
});

Now all the steps are completed.
Now you can proceed to make a payment and if successfull you can view the payment inside your Razorpay Dashboard in the Transactions tab.
Below are some demo card details you can use to test the payment flow in Test mode.

Use any valid expiration date in the future and any random CVV to create a successful payment.
And when ready you can switch to Live mode and activate your account before production. You'll be given a new set of API keys for the Live mode.

You can find all the source code in my Github repo.

When you are there don't forget to Follow me on Github

Thanks a lot for reading.

I'll also make a blog post about Integrating Stripe with React. Stay tuned for that!

Find me around web 🕸:

💻 Visit my Website
🌟 Check out my Substack
😸 Check my Repos on GitHub
🦊 Check my Repos on GitLab
📦 Check my Packages on NPM
🔗 View my Profile on LinkedIn
📝 View my Blogs on Dev.to
😜 Follow me on Instagram
📚 Check out my Goodreads Profile
📪 Contact me Here

Advantages of Git-flow over standard git commands

Soumya Dey — Mon, 14 Sep 2020 12:15:41 +0000

In this post we'll look at a git workflow called Git-flow, and discuss why you should use it over the standard git commands.

What is git-flow?

git-flow has become quite popular in recent years, as it provides handful of extra commands.
It automates some tasks for you that you'll need to do manually if you are using standard git commands.

git-flow is by no means a replacement for Git. It's just a set of scripts that combine standard Git commands in a clever way.

Install Git-flow

Windows:

For Windows users, Git for Windows is the recommended method.
Follow the instructions on the Git for Windows homepage to install Git for Windows. As of Git for Windows 2.6.4, GitFlow (AVH edition) is included, so you're all done.

Linux(Ubuntu 18.04):

git-flow AVH edition is packaged with Ubuntu. You can install the last version of git-flow AVH Edition using the following command.

$ sudo apt-get install git-flow

For other linux distros follow these instructions

Mac OS X:

For Mac OS installation follow these instructions

Using Git-flow In Your Project

It's totally up to you to use special git-flow commands and normal Git commands in this repository side by side.

First you have to initialize git-flow in your project using the command git flow init

$ git flow init
Initialized empty Git repository in E:/Development/projects/git-flow-tut/.git/
No branches exist yet. Base branches must be created now.
Branch name for production releases: [master]
Branch name for "next release" development: [develop]

How to name your supporting branch prefixes?
Feature branches? [feature/]
Bugfix branches? [bugfix/]
Release branches? [release/]
Hotfix branches? [hotfix/]
Support branches? [support/]
Version tag prefix? []
Hooks and filters directory? [E:/Development/projects/git-flow-tut/.git/hooks]

Although the setup assistant allows you to enter any names you like, I strongly suggest you stick with the default naming scheme and simply confirm each step by pressing Enter.

Git-flow Branching Model

The git-flow workflow model needs you to have two branches in your repository.

master branch contains the production stable code. You won't commit directly to master, instead will work on separate feature branches.
develop is the basis for any new development efforts you make: when you start a new feature branch it will be based on develop.

These two branches remain in your project during its whole lifetime. Other branches, e.g. for features or releases, are created on demand and are deleted after they've fulfilled their purpose.

Feature Branch

Starting a new feature

Let's say you are going to add a payment gateway to your project. So that is a new feature.

Let's start a new payment-gateway feature

$ git flow feature start payment-gateway
Switched to a new branch 'feature/payment-gateway'

Summary of actions:
- A new branch 'feature/payment-gateway' was created, based on 'develop'
- You are now on branch 'feature/payment-gateway'

This action creates a new feature branch based on 'develop' and switches to it.

Finishing the Feature

After all your hard work is done and committed, its time to finish the feature.

$ git flow feature finish payment-gateway
Switched to branch 'develop'
Updating 6bcf266..41748ad
Deleted branch feature/payment-gateway.

After this action Git-flow deletes the (now obsolete) feature branch and checks out to the "develop" branch.

Release Branch

Start a Release

When "develop" branch is ready for a new release, then start a release using the git flow release command. It creates a release branch created from the 'develop' branch.

$ git flow release start 1.1.5
Switched to a new branch 'release/1.1.5'

Finishing the Release

When its time to finish our release use the following command

$ git flow release finish 1.1.5

This action performs the following tasks at once:

It pulls from the remote repository to make sure you are up-yo-date.
Then, the release is merged back to both master and develop branches, so that your production code as well as all feature branches will be based on the latest code.
A release commit is tagged with the release's name (1.1.5 in our example).
Deletes the release branch and checks out to develop.

Hotfix Branch

These are for the mischievous bugs that might appear even after thorough testing in a release.

Starting Hotfix

$ git flow hotfix start missing-link

hotfix is quite similar to release branch. Just like with a release, however, we bump up our project's version number and - of course - fix that bug!

But we need to remember one thing that `Hotfix` is based on the `master` branch whereas `release` is based on `develop` branch

Finishing Hotfix

$ git flow hotfix finish missing-link

The procedure is very similar to finishing a release:

The changes are merged both into master as well as into develop, to make sure the bug doesn't slip into the next release, again.
The hotfix is tagged for easy reference.
The branch is deleted and "develop" is checked out again.

So now's the time to build / deploy your product.

As a bonus here's a great illustration for you to remember the Git-flow commands easily.

I found it on Daniel Kummer's git-flow cheatsheet repo. Check it out in his repo.

Thanks for reading my blog. Hope it helps you and your team to be more productive.

Let me know if you are already using Git-flow or planning to use it?

Find me around web 🕸:

💻 Visit my Website
🌟 Check out my Substack
😸 Check my Repos on GitHub
🦊 Check my Repos on GitLab
📦 Check my Packages on NPM
🔗 View my Profile on LinkedIn
📝 View my Blogs on Dev.to
😜 Follow me on Instagram
📚 Check out my Goodreads Profile
📪 Contact me Here

Build Your Own Hook for Uploading Images to Firebase

Soumya Dey — Sun, 13 Sep 2020 14:00:33 +0000

Before we start building our own custom react hook, let me remind you that you should have a good understanding of the basic inbuilt react hooks. And if you're not familiar with the basics you can start from Here and then come back here.

Let's Start

For building you custom hook you should keep the following things in your mind...Read about all the rules Here.

Now we've covered the basics and are ready to build our own custom Hook.

We are going to build a custom hook that will take a file as a prop and upload it to Firebase storage while returning the upload progress on the way and at the end will return the public URL which you can store in you database or use as your img src.

Create a React project

Create your react project and cd into the project directory

npx create-react-app <your app name here>
cd <your app name here>

Then start your react app

npm run start

Now you should have a boilerplate React project like the following.

Clean up and start building the UI

Your file structure look like this after clean up

Clean up all the boilerplate code and add a form with a input of type file in App.js and add method handleChange to handle the event when user selects a file.
App.js after adding those things...

import React, { useState } from "react";
import "./App.css";

function App() {
    const [file, setFile] = useState(null);
    const [error, setError] = useState(null);

    const types = ["image/png", "image/jpeg", "image/jpg"];

    const handleChange = (e) => {
        let selectedFile = e.target.files[0];

        if (selectedFile) {
            if (types.includes(selectedFile.type)) {
                setError(null);
                setFile(selectedFile);
            } else {
                setFile(null);
                setError("Please select an image file (png or jpg)");
            }
        }
    };

    return (
        <div className="App">
            <form>
                <label>
                    <input type="file" onChange={handleChange} />
                    <span>Upload Image</span>
                </label>
            </form>
        </div>
    );
}

export default App;

I have also added filter that only accepts image files and used the useState hook to store the file selected in file state and all errors in error state.
Now your app should look like this...

Create a Firebase Project

Go to Firebase Console and sign in with your google account and then click on Add project

Then give your project a name and continue

Disable google analytics and Create project

Register your app with Firebase

Add your app to Firebase.

Give your app a name and register. Firebase will give you your credentials for the app which will look like the following object.

var firebaseConfig = {
    apiKey: "AIzaSyDo5UUe86THOjczUAhytr7yu67FlLVmpj2E",
    authDomain: "new-project.firebaseapp.com",
    databaseURL: "https://new-project.firebaseio.com",
    projectId: "new-project",
    storageBucket: "new-project.appspot.com",
    messagingSenderId: "509872254322",
    appId: "1:509872254322:web:d63d977d86c734nu829e12f"
  };

Copy that object given to you by firebase and then go to your project directory.

Connect your app with Firebase

Create a new folder naming firebase inside the src folder. Create a file config.js inside the firebase folder and paste the firebaseConfig object in the file.

Now install firebase npm package. Execute the following command from your root directory.

npm i firebase

Now initialize firebase by imporitng firebase package in config.js file and the export the storage method.

import firebase from "firebase";
import "firebase/storage";

const firebaseConfig = {
    apiKey: "AIzaSyDo5UUe86THOjczUAhytr7yu67FlLVmpj2E",
    authDomain: "new-project.firebaseapp.com",
    databaseURL: "https://new-project.firebaseio.com",
    projectId: "new-project",
    storageBucket: "new-project.appspot.com",
    messagingSenderId: "509872254322",
    appId: "1:509872254322:web:d63d977d86c734nu829e12f"
 };

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

const projectStorage = firebase.storage();

export { projectStorage };

Set-up storage in Firebase console

Click on the Storage link from the left side-bar and then click on Get Started

Then click Next and Done in the next step.

Now we need to change the rules so everyone can read and write from your Firebase storage.
For that navigate to the rules tab.

Then delete the current rules and paste the following rules in the rule editor. Then make sure to Publish your new rules.

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

Now we are all set to upload images from our app to Firebase.

Finally let's create our custom hook

Create a new folder inside src folder naming hooks. Then create a new file useStorage.js inside the hooks folder. This will be our custom hook for uploading images to Firebase storage.

The final folder structure will be like the following.

We will use two basic hooks useState and useEffect in our custom hook.

We need to create a reference to the Firebase storage, which we initialized and exported in our config.js file.
Then use the put() method on that reference to upload the image.
The put() method will gives us a snap each time state changes. We can use this snap to track the upload progress in percentage.
At the end we will get the public URL from the uploaded image.

So add the following code inside useStorage.js file.

import { useState, useEffect } from "react";

import { projectStorage } from "../firebase/config";

export const useStorage = (file) => {
    const [progress, setProgress] = useState(0);
    const [error, setError] = useState(null);
    const [url, setUrl] = useState(null);

    // runs every time the file value changes
    useEffect(() => {
        if (file) {
            // storage ref
            const storageRef = projectStorage.ref(file.name);

            storageRef.put(file).on(
                "state_changed",
                (snap) => {
                    // track the upload progress
                    let percentage =
                        Math.round(
                        (snap.bytesTransferred / snap.totalBytes) * 100
                    );
                    setProgress(percentage);
                },
                (err) => {
                    setError(err);
                },
                async () => {
                    // get the public download img url
                    const downloadUrl = await storageRef.getDownloadURL();

                    // save the url to local state
                    setUrl(downloadUrl);
                }
            );
        }
    }, [file]);

    return { progress, url, error };
};

We added all the logic inside the useEffect hook and added file as the dependency. So whenever the file changes our hook will re-run.
At the end we are exporting the progress, url and error.

Integrate the hook in our component

We can now import the useStorage hook in our component and use it with the file selected.
We can also show the progress.
App.js file after integrating with the useStorage hook.

import React, { useState } from "react";
import "./App.css";

import { useStorage } from "./hooks/useStorage";

function App() {
    const [file, setFile] = useState(null);
    const [error, setError] = useState(null);

    const types = ["image/png", "image/jpeg", "image/jpg"];

    const handleChange = (e) => {
        let selectedFile = e.target.files[0];

        if (selectedFile) {
            if (types.includes(selectedFile.type)) {
                setError(null);
                setFile(selectedFile);
            } else {
                setFile(null);
                setError("Please select an image file (png or jpg)");
            }
        }
    };

    // Getting the progress and url from the hook
    const { progress, url } = useStorage(file);

    return (
        <div className="App">
            <form>
                <label>
                    <input type="file" onChange={handleChange} />
                    <span>Upload Image</span>
                </label>
            </form>

            {error && <p>{error}</p>}
        </div>
    );
}

export default App;

Now we have access to the progress and url of the file. So we can use that to give users some feedback and then we can show the image using the url when the upload is complete.
Add these html inside the root div after the paragraph tag where we are showing the error.
Now our app will also show the progress and image.

{file && <p>{progress}% uploaded</p>}
{url && (
          <p>
             <b>File url: </b>
             <a href={url}>{url}</a>
          </p>
)}
{url && <img src={url}></img>}

Our App.js now...

import React, { useState } from "react";
import "./App.css";

import { useStorage } from "./hooks/useStorage";

function App() {
    const [file, setFile] = useState(null);
    const [error, setError] = useState(null);

    const types = ["image/png", "image/jpeg", "image/jpg"];

    const handleChange = (e) => {
        let selectedFile = e.target.files[0];

        if (selectedFile) {
            if (types.includes(selectedFile.type)) {
                setError(null);
                setFile(selectedFile);
            } else {
                setFile(null);
                setError("Please select an image file (png or jpg)");
            }
        }
    };

    // Getting the progress and url from the hook
    const { progress, url } = useStorage(file);

    return (
        <div className="App">
            <form>
                <label>
                    <input type="file" onChange={handleChange} />
                    <span>Upload Image</span>
                </label>
            </form>

            {error && <p>{error}</p>}
            {file && <p>{progress}% uploaded</p>}
            {url && (
                <p>
                    <b>File url: </b>
                    <a href={url}>{url}</a>
                </p>
            )}
            {url && <img src={url}></img>}
        </div>
    );
}

export default App;

So now we have created our own custom hook successfully.
Integrated it in our component.
And also showing the progress and displaying the image after the upload is completed.
You can also store the URL in your database if you want.

You can check out the app live Here. Go ahead and check it out.

You can also check out the full source code in my Github Repo. Before using the code make sure to replace my firebase credentials with your credentials. Otherwise it won't work.

Find me around web 🕸:

💻 Visit my Website
🌟 Check out my Substack
😸 Check my Repos on GitHub
🦊 Check my Repos on GitLab
📦 Check my Packages on NPM
🔗 View my Profile on LinkedIn
📝 View my Blogs on Dev.to
😜 Follow me on Instagram
📚 Check out my Goodreads Profile
📪 Contact me Here