DEV Community: Sagnik Ghosh

React Development Essentials: Webpack and Babel Introduction

Sagnik Ghosh — Mon, 25 Sep 2023 08:11:56 +0000

Initiating a React project is typically an almost effortless process, largely thanks to the outstanding create-react-app tool. However, while employing it to kickstart yet another empty React project a few days ago, I had an epiphany. I realized that beyond having a vague understanding, I had never delved deep into the inner workings. So, I decided to do just that, and now I can initiate new React projects without relying on magical tools. This article serves as a manifestation of the insights I've gained in the process.

What is Webpack and Babel why do we need to know about these?

When I embarked on my coding journey and began learning JavaScript, I didn't pay much attention to file structure. For most of my tutorial projects, I used to write all the code in a single file, resulting in a massive monolithic JavaScript file that proved to be quite challenging to maintain.

It wasn't until I delved into learning React that I truly grasped the importance of writing organized code. I learned to break down code into smaller, manageable components and then import and use them effectively. Usually, when we start our React projects, we rely on the magical "create-react-app" tool, which automates many tasks, including bundling. This convenience, however, often shields us from the underlying processes. As a developer, I believe it's valuable to understand how these mechanisms work and how to set up a React project from scratch without relying on the "create-react-app" template.

Webpack:

Webpack is a popular open-source JavaScript module bundler. It is primarily used to bundle JavaScript files and assets, such as CSS stylesheets, images, and more into a 'bundle' which we can deploy. As I discussed before that writing monolithic JavaScript is a wrong and inconvenient practice and instead we use code splitting where we write smaller chunks as components into different files and then use require() or import statements to connect them together. So, when we require or import anything from a file, it forms a dependency graph with that file as well as assets(if any).Webpack uses this dependency graph based on import or require and creates a bundle of our JavaScript code and assets. Alongside, it also performs some other optimizations on top of it.

Babel:

Babel is a JavaScript transpiler which transplies the latest features of JavaScript such as ES6+ and jsx formats into ES5 syntax which is understandable by all kinds browsers.

Let's start configuring React with Webpack and Babel

First you need to have npm and node installed in your system. Now, create a folder and run npm init -y to create package.json

mkdir react-app-webpack-setup
cd react-app-webpack-setup
npm init -y

You will get a package.json like this -

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

After that, create a .gitignore file in the root directory and put the following into that file -

node_modules
dist

Now let's start with Babel first. Now-a-days, we write most of our JavaScript code in modern ES6 syntax and in React, we usually use jsx format which are not supported by many browsers. This is where Babel comes into play and it helps transpiling modern JavaScript into a format which is understandable by browsers. Let's install Babel like this -

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/preset-react

@babel/core: It contains the main functionality of Babel.
@babel/cli: It allows us to use Babel from terminal.
@babel/preset-env: This preset transforms modern ES6 syntax into common JavaScript.
@babel/preset-react: This preset transforms jsx format into vanilla JavaScript.

Now, create a file .babelrc in the root directory and set it up as following to tell the babel transpiler what presets to use to transpile the code:

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

We are done with our babel setup for now. Let's start with installing and setting up the Webpack now -

npm i webpack webpack-cli webpack-dev-server --save-dev

webpack: It is the main module bundler.
webpack-cli: It is the command line interface for webpack.
webpack-dev-server: It provides a development server for live reloading.

Now, install React and ReactDOM by running the follwing command on terminal -

npm i react react-dom

After installing, create a folder src in the root directory and put these three files into that folder as following -

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React setup with Webpack and Babel</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

App.js

import React from 'react'

const App = () => {
  return (
    <div>
      <h1>Introduction to setup React with Webpack and Babel</h1>
    </div>
  )
}

export default App

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById('root'));

Now we need to create a file webpack.config.js and set it up properly to tell webpack what to do with our source code. But before that we will install some loaders and plugins which will be needed to bundle our JavaScript files as well as static assets.

npm i --save-dev style-loader css-loader sass-loader babel-loader

css-loader: It collects CSS from all the CSS files in the app and bundle it into one file.

style-loader: It puts all stylings inside style tag in index.html file which will be created after bundling.

sass-loader: It is a package which converts sass into css. Though we don't need it in this sample project but still I will set it up.

babel-loader: It is a package that transpiles JavaScript using babel and webpack.

npm i html-webpack-plugin --save-dev

html-webpack-plugin: This plugin automatically creates an HTML file that serves the JavaScript bundles created by Webpack.

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: "./src/index.js",
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: "babel-loader"
            },
            {
                test: /\css$/,
                use: [ 
                    "style-loader",  // 2. Injects styles into DOM
                    "css-loader"    // 1. Turns css into commonjs
                ]
            },
            {
                test: /\.scss$/i,
                use: [
                    "style-loader", // 3. Injects styles into DOM
                    "css-loader",  // 2. Turns css into commonjs
                    "sass-loader" // 1. Turns sass into css
                ],
            },
            {
                test: /\.svg$/,
                loader: 'svg-inline-loader'
            }
        ]
    },
    resolve: {
        extensions: [".js", ".jsx", ".mjs", 
        ".json"],
        symlinks: false,
        cacheWithContext: false,
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.[contenthash].js"
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        })
    ]
}

entry: Here we need to provide the entry path for the webpack.

module: Here we need to add the loaders as needed under rules.
For css & sass loader, always follow the right sequence as shown otherwise there will be issues.

resolve: Here we need to define the extensions which are there in the project. If you are using typescript, then also add .ts and .tsx in the extensions array.

output: Here we need to provide the output path for the bundle created by webpack. If you follow carefully, I have used the output file name as bundle.[contenthash].js. The contenthash keyword will create a fresh new bundle file after each build followed by a unique name and the latest bundle file will be used in the created index.html.

plugins: Here we need to serve the plugins needed.

Now, we are done with the setup of the webpack.config.js file and finally let's setup the package.json by adding the follwing scripts to run and build the project -

package.json

  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"
  }

The open flag is used to open the browser just after the server has started and the hot flag is used to enable the hot module replacement feature of webpack which basically updates only the changed code instead of updating the entire code again and again.

Now, to run the application, use the following command -

npm start

open the server and you should be seeing this -

Yay! you have successfully setup React with Webpack and Babel and you can start building new React project on top of it.

If you want to create a new build, then run the following command -

npm run build

This blog is all about basic setup for React with webpack and Babel. But, there are a lot of things which can be done on top it like adding a redux-boilerplate which I will discuss in future.

You can get the code for this sample project in the following github link -

https://github.com/sagnik26/React-with-Webpack-and-Babel-setup

What is Execution Context in JavaScript?

Sagnik Ghosh — Tue, 03 Jan 2023 12:39:52 +0000

How JavaScript Code Gets Executed

The browser doesn't understand the high-level JavaScript code that we write in our applications. It needs to be converted into a format that the browser and our computers can understand – machine code.

The browser's JavaScript engine then creates a special environment to handle the transformation and execution of this JavaScript code. This environment is known as the Execution Context. The Execution Context contains the code that's currently running, and everything that aids in its execution. During the Execution context runtime, the variables and functions are stored in memory, executable byte-code gets generated, and the code gets executed.

Execution Context types

There are two kinds of Execution Context in JavaScript:

Global Execution Context (GEC)
Functional Execution Context (FEC)

Global Execution Context (GEC)
Whenever the JavaScript engine receives a script file, it first creates a default Execution Context known as the Global Execution Context. The GEC is the base/default Execution Context where all JavaScript code that is not inside of a function gets executed.

NOTE: For every JavaScript file, there can only be one GEC.

Functional Execution Context (GEC)
Whenever a function is called, the JavaScript engine creates a different type of Execution Context known as a Function Execution Context (FEC) within the GEC to evaluate and execute the code within that function.

NOTE: Since every function call gets its own FEC, there can be more than one FEC in the run-time of a script.

How are Execution Contexts Created?

The creation of an Execution Context (GEC or FEC) happens in two phases:

Creation Phase
Execution Phase

CREATION PHASE

In the creation phase, the Execution Context is first associated with an Execution Context Object (ECO). The Execution Context Object stores a lot of important data which the code in the Execution Context uses during its run-time.

The creation phase occurs in 3 stages. These stages are:

Creation of the Variable Object (VO)
Creation of the Scope Chain
Setting the value of the this keyword

CREATION PHASE : Creation Of The Variable Object (VO)

The Variable Object (VO) is an object-like container created within an Execution Context. It stores the variables and function declarations defined within that Execution Context.

In the GEC, for each variable declared with the var keyword, a property is added to VO that points to that variable and is set to 'undefined'.

Also, for every function declaration, a property is added to the VO, pointing to that function, and that property is stored in memory. This means that all the function declarations will be stored and made accessible inside the VO, even before the code starts running.

The FEC, on the other hand, does not construct a VO. Rather, it generates an array-like object called the 'argument' object, which includes all of the arguments supplied to the function. Learn more about the argument object here.

CREATION PHASE : Creation of The Scope Chain

After the creation of the Variable Object (VO) comes the creation of the Scope Chain as the next stage in the creation phase of an Execution Context.

Scope in JavaScript is a mechanism that determines how accessible a piece of code is to other parts of the codebase. Scope answers the questions: from where can a piece of code be accessed? From where can't it be accessed? What can access it, and what can't?

Each Function Execution Context creates its scope: the space/environment where the variables and functions it defined can be accessed via a process called Scoping.

CREATION PHASE : Setting The Value of The "this" Keyword

The next and final stage after scoping in the creation phase of an Execution Context is setting the value of the this keyword.The JavaScript this keyword refers to the scope where an Execution Context belongs. Once the scope chain is created, the value of 'this' is initialized by the JS engine.

EXECUTION PHASE

Finally, right after the creation phase of an Execution Context comes the execution phase. This is the stage where the actual code execution begins.

Up until this point, the VO contained variables with the values of undefined. If the code is run at this point it is bound to return errors, as we can't work with undefined values. At this stage, the JavaScript engine reads the code in the current Execution Context once more, then updates the VO with the actual values of these
variables. Then the code is parsed by a parser, gets transpired to executable byte code, and finally gets executed.

The Call Stack

The Call Stack keeps track of all the Execution Contexts created during the life cycle of a script.
JavaScript is a single-threaded language, which means that it is capable of only executing a single task at a time. Thus, when other actions, functions, and events occur, an Execution Context is created for each of these events. Due to the single-threaded nature of JavaScript, a stack of piled-up execution contexts to be executed is created, known as the Execution Stack.
When scripts load in the browser, the Global context is created as the default context where the JS engine starts executing code and is placed at the bottom of the execution stack.
The JS engine then searches for function calls in the code. For each function call, a new FEC is created for that function and is placed on top of the currently executing Execution Context.
The Execution Context at the top of the Execution stack becomes the active Execution Context, and will always get executed first by the JS engine.
As soon as the execution of all the code within the active Execution Context is done, the JS engine pops out that particular function's Execution Context of the execution stack, moves towards the next below it, and so on.

What is JWT(JSON WEB TOKEN) & how it works

Sagnik Ghosh — Tue, 27 Dec 2022 10:45:03 +0000

What is JWT ?

JSON Web Token(JWT) is an open standard(RFC 7519) that defines secure transmission of information between between two parties as a JSON object. JWTs can be signed using a public/private key pair using RSA algorithm and that's why the information shared between two parties is verified and secured.

When should you use JWTs?

There are basically two scenarios where JSON web tokens are useful:

Authorization:
This is the most common use-case of JWT. When user is logged in, each subsequent request will include a JWT token which allows the user to access routes, services, & resources that are permitted with the token.
Information Exchange:
JWTs provide a secure way to share sensitive information between two parties. JWTs can be signed using public/private key pairs & that's why you can be sure about the senders who they say they are.

Structure of JWT

JWT consists of three parts separated by dots( . ),

Header
Payload
Signature

Header.Payload.Signature

Header

The header consists of two parts such as the type of the token and the signing algorithm. The type of the token is JWT. The algorithms used are HMAC, SHA256 or RSA.

example:

{
  "alg": "HS256",
  "typ": "JWT"
}

Payload

The payload contains the claims such as the statements about an entity and additional data. There are three types of claims -

Registered claims (iss, exp, sub, aud, etc).
Public claims.
Private claims.

example:

{
  "sub": "1001",
  "iat": 1894561234,
  "name": "Sagnik ghosh",
  "admin": true
}

Signature

The signature is the most important part of a JWT which is calculated by encoding the header, the payload and a secret using encoding techniques like Base64url or HMACSHA256.

example:

For example if you want to use the HMAC SHA256 algorithm, the signature will be created in the following way:

{
HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret)
}

If you want to play with JWT, you can go to jwt.io and get your hands dirty.

How JWT works?

In authentication, when the user successfully logs in using their credentials, a JSON Web Token will be returned.
Whenever the user wants to access a protected route or resource, the user agent should send the JWT, typically in the Authorization header using the Bearer schema.

Authorization: Bearer <token>

The server's protected routes will check for a valid JWT in the Authorization header, and if it's present, the user will be allowed to access protected resources.

Advantages of using JWT

As JSON is more verbose than XML, so, when it is encoded it's size becomes smaller and more compact, which makes JWT better than SAML(Security Assertion Markup Language Tokens) which is another standard for secure transmission of data between two parties.
Signing JSON with digital signature is much easier which makes the process of validating the signature more simpler.
JSON parsers are common in most programming languages because they map directly to objects. This makes it easier to work with JWT.

Security issues

Signed tokens though protected against tampering, is readable by anyone. So, any secret information should not be put inside the payload or header elements of a JWT unless it is encrypted.
HTTPS must be used to secure the Authorization headers.
When a JWT token is assigned, it is set to automatically expire after some time. But if an attacker gets the token before it expires then, that leads to various exploits. So, one must build a token revocation list on the server to invalidate tokens in order to protect the system from such attacks.