DEV Community: Vivek Kumar

Exploring ReadableStream in the Browser: A Guide to Asynchronous Reading

Vivek Kumar — Thu, 25 Jan 2024 09:44:52 +0000

The ReadableStream interface in the browser environment provides a standardized way to work with streams of data asynchronously. It is implemented by various classes and objects, offering a versatile set of options for handling data from different sources. In this article, we'll explore common classes and objects that implement the ReadableStream interface, enabling you to perform asynchronous reading operations in your web applications. Additionally, we'll dive into using the for await...of loop and async iterators to simplify the process of consuming data from these streams.

1. Fetch API: `Response.body`

When making network requests using the Fetch API, the Response.body property returns a ReadableStream representing the body of the response. This allows you to asynchronously handle the data received from the server.

const response = await fetch('https://example.com/data');
const readableStream = response.body;

// Using for await...of loop
for await (const chunk of readableStream) {
  console.log(chunk);
}

2. WebSocket API: `WebSocket`

The WebSocket API provides a ReadableStream for receiving data from a WebSocket connection. This is particularly useful for real-time communication scenarios where data is sent and received continuously.

const socket = new WebSocket('wss://example.com/socket');
const readableStream = socket;

// Using for await...of loop
for await (const message of readableStream) {
  console.log(message);
}

3. File API: `Blob`

The Blob object, representing a binary large object, implements the ReadableStream interface. This is commonly used when working with files or binary data.

const blob = new Blob(['Hello, World!'], { type: 'text/plain' });
const readableStream = blob.stream();

// Using for await...of loop
for await (const chunk of readableStream) {
  console.log(chunk);
}

4. Streams API: `ReadableStream.from`

The Streams API provides the ReadableStream.from method, allowing you to create a readable stream from an iterable. This provides a convenient way to work with data from various sources.

const iterable = [1, 2, 3];
const readableStream = ReadableStream.from(iterable);

// Using for await...of loop
for await (const item of readableStream) {
  console.log(item);
}

5. Server-Sent Events: `EventSource`

The EventSource API, used for handling Server-Sent Events, exposes a ReadableStream for receiving events from the server. This is commonly used for establishing a unidirectional communication channel from the server to the client.

const eventSource = new EventSource('https://example.com/events');
const readableStream = eventSource;

// Using for await...of loop
for await (const event of readableStream) {
  console.log(event);
}

6. File Input: File API

When working with file input elements (<input type="file">), the selected file can be treated as a Blob with a ReadableStream. This allows you to asynchronously process the content of the selected file.

const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const readableStream = file.stream();

// Using for await...of loop
for await (const chunk of readableStream) {
  console.log(chunk);
}

In conclusion, the ReadableStream interface opens up possibilities for handling asynchronous data streams in the browser. Whether you are fetching data from a server, working with WebSocket connections, processing files, or dealing with other iterable data sources, understanding these implementations of ReadableStream empowers you to build more efficient and responsive web applications. Utilizing the for await...of loop and async iterators further simplifies the consumption of asynchronous streams, making your code cleaner and more readable.

Advanced use of JavaScript toString() and parseInt()

Vivek Kumar — Thu, 25 Jan 2024 05:29:09 +0000

You might have been using toString() method and parseInt() in javaScript in day to day coding life.

One basic use case is like converting a number to string with the help of toString() method

const n = 10;
console.log(n.toString())
//Output
//"10"

and converting a "10" to number using parseInt().

const str = "10";
console.log(parseInt(str));
//Output
//10

If you know this means then you understand the basics of toString() and parseInt().

Lets understand it further:

toString()

When you use .toString()
There is an optional parameter called base.

You might have heard about number systems in Mathematics.

The number system which we use in day to day life is decimal.

A Decimal System uses 10 as base. We can represent it as
25 -> 2x10^1 + 5x10^0

I am assuming you understand above representation.

There are few famous representations such as Hexadecimal, Octal and Binary.
Hexadecimal - base 16
Octal - base 8
Binary - base 2

I understand I moved away from the main agenda of this discussion. But the reason behind I was explaining about number system is we can use these bases to convert a number from one type to another.

Lets say we need to convert "25" to binary

 const a = 25;
 a.toString(2) 
 // Output
 // 11001

Or we want to convert "111" to hexadecimal

 const a = 111;
 a.toString(16) 
 // Output
 // 6f

Or we want to convert "43" to octal

 const a = 43;
 a.toString(8) 
 // Output
 // 53

There can be many use cases where you want to do these conversions one example is when you are dealing with buffer and you want to decode.

Lets take another example,
We want to convert text "Hello" to binary

How we will do this ?

 Array.from("Hello").map(char => char.charCodeAt(0).toString(2));
// Output
[ "1001000", "1100101", "1101100", "1101100", "1101111" ]

If you add prefix to each no with 0b, you can use it with TypedArray View ( Uint8Array, Uint16Array or Uint32Array, etc)

const unsignedArray = new Uint8Array([ "0b1001000", "0b1100101", "0b1101100", "0b1101100", "0b1101111" ])

You can use it as stream or convert it to blob.

Again I don't want to go deep in Unit8Array. But just for understanding, we can use '0x' as hexadecimal, '0o' for octal.

If you convert this to hexadecimal, then following will be the output

Array.from("Hello").map(char => '0x'+char.charCodeAt(0).toString(16)); 
// Output
// [ "0x48", "0x65", "0x6c", "0x6c", "0x6f" ]

And I am sure, you must have seen these type of data specially while dealing with buffers.

parseInt()

So, parseInt() method accepts first parameter as data we want to covert to integer and second optional parameter as base.

Whatever data you pass inside parseInt() it will always try to convert it to a number or you can say to a decimal number to be exact that means its base will be 10.

lets say we have a binary number 1001000 and we want to convert it to decimal. Then we can use parseInt()

const num = parseInt(1001000, 2) // base 2

console.log(num)
//OUTPUT
// 72

and 72 is ASCII value of 'H'

String.fromCharCode(72)
// Output
// 'H'

You can experiment further and use it with other number system like hexadecimal.

If you want to learn about ArrayBuffer, Uint8Array, Uint16Array, etc just comment below.

Uploading file in chunks from React to Node-Express

Vivek Kumar — Tue, 23 Jan 2024 16:12:58 +0000

In almost every web application we get some use cases where we need to upload files to server.
One of the easiest way is using input type="file" and then sending to server as a blob.

But sometimes sending files in chunks can be useful, for performance, security and other stuffs like showing upload completion percentage.

In this tutorial we are going to upload a file from React application to Server in node and express.

Step 1 Setting up React App

I am using react-formvik for quick form setup, I will create input type="file".



import React from 'react';
import { Form } from 'react-formvik';
const App = () => {
    return <Form
        config={
            {
                fields: [
                    {
                        field: 'avatar',
                        css: {
                            containerClass: 'mt-4',
                            inputClass: 'form-control',
                            labelClass: 'form-label'
                        },
                        inputProps: {
                            type: 'file'
                        },
                        label: 'Upload'
                    }
                ],
                css: {
                    formContainerClass: 'container'
                }

            }
        }
        onChange={async ({ avatar }) => {
           //We will add code here in further steps
        }
}

export default App;

I have also installed bootstrap to style our input field.
Add below line in index.js or you can import it in css file as well.



import 'bootstrap/dist/css/bootstrap.css';

Preview

Step 2: Setting up server

In express app, we need multer,
npm i -S multer

Add following line in your server file
const multer = require('multer');
const storage = multer.memoryStorage();
const upload = multer({ storage });

Make sure you have body parser setup in express app.

Create one route for upload



app.post('upload', (req, res) => {
    //We will add code here in further steps
});

Step 3: Understanding the approach of File chunking on Client

So, we are going to follow below sub steps

we will click browse on UI and upload a file(image)
In React component - in onChange method we will get file blob.
We will keep one constant for chunk size (say: 1024 bytes)
Knowing the chunkSize and file Size, we can find out how many chunks we need to create.
We will create one loop and slice blob based on chunk size and in each iteration we will be sending next chunk to the server
That means we are going to call server multiple times for the same route '/upload'. For backend(node) approach we will discuss in upcoming steps.

Step 4: Implementing chunking in onChange method

Now that we understand how we are going to implement we can start writing code.
First we need to get file details in onChange event



 onChange={async ({ avatar }) => {
            const chunkSize = 1024;
            if (avatar) {
                  // we will proceed if we have files here
             }

}

Next, lets find out total chunks we need



 onChange={async ({ avatar }) => {
            const chunkSize = 1024;
            if (avatar) {
                   const totalChunks = Math.ceil(avatar[0].size/chunkSize);
             }

}

Create a loop to iterate for each chunk



 onChange={async ({ avatar }) => {
            const chunkSize = 1024* 100;
            if (avatar) {
                   const totalChunks = Math.ceil(avatar[0].size/chunkSize);

           for(let i=0; i<totalChunks; i++) {
                    const start = i*chunkSize;
                    const end = (i + 1) * chunkSize;
                    await sendChunk(start,end);
                }
             }

}

Lets create a sendChunk method to send chunk to server.



 onChange={async ({ avatar }) => {
            const chunkSize = 1024;
            if (avatar) {
                   const totalChunks = Math.ceil(avatar[0].size/chunkSize);


                const sendChunk = async (start,end) =>{
                    const formData = new FormData();
                    const blobSlice = avatar[0].slice(start, end);
                    formData.append('file', blobSlice, avatar[0].name);
                    return await fetch('http://localhost:3000/upload', {
                        method: 'POST',
                        body: formData
                    });
                }
           for(let i=0; i<totalChunks; i++) {
                    const start = i*chunkSize;
                    const end = (i + 1) * chunkSize;
                    await sendChunk(start,end);
                }
             }

}

Step 5: Implementing server



app.post('/upload', upload.single('file'), (req, res) => {
    const { buffer, originalname } = req.file;
    const writeStream = fs.createWriteStream(originalname, { flags: 'a' });
    writeStream.write(buffer);
    writeStream.end();

    writeStream.on('finish', () => {
        res.status(200).send('File received successfully.');
    });

    // Event listener for any errors during the write operation
    writeStream.on('error', (err) => {
        console.error(err);
        res.status(500).send('Internal Server Error');
    });

Lets understand above code,

upload.single('file') - is a middleware for multer which expects a form data with a file name 'file'
In fs.createWriteStream we have added a flag 'a' which will actually append the buffer at the end of file every time it gets a request.

Step 6: Testing

Server console:

Network Requests:

Uploaded file:

There can be many other approaches, if you know one share with me as well.

Thank you for reading this!

Understanding Buffer data in Node js

Vivek Kumar — Sun, 21 Jan 2024 06:01:03 +0000

I will keep this article short, the reason behind that is like, there can be so many questions you can explore yourself related to binary, buffer data, etc.

In this tutorial, what I am going to do is, I will help you understand buffer data, how it gets created.

In node js if you want to create one buffer, you can use one method called
Buffer.alloc(size)
However, there are other ways as well as, which you can explore and comment below.

So, when you create buffer, you can create something like this

const buff = Buffer.alloc(8)

Here 8 is the size of buffer, means 8 bytes.
1 byte = 8 bits

00000000 in binary
00 in hexadecimal

If you print buff in terminal you will see below output
<Buffer 00 00 00 00 00 00 00 00>

If you notice we have 8 pairs of zeroes - that represent 8 bytes in hexadecimal.

If you are a UI developer, you might be aware of hex color code where we use FF or AF or 3E etc, these are actually hexadecimal

Lets take an example.

We want to store "hello" in buffer.
By looking at the word we can easily see, it has 5 characters.
If we can store each character in 1 byte, we will need 5 bytes of buffer.

Lets create a new buffer

const helloBuff = Buffer.alloc(5)
//output
<Buffer 00 00 00 00 00>

As I told you each pair of zeroes represents one byte of hexadecimal number.

So what we can do here is, we can transform each character of "hello" to hexadecimal number.

To do that first we will have to convert it into it's ASCII value

'h' is 104 - 68 in hexadecimal
'e' is 101 - 65 in hexadecimal 
'l' is 108 - 6C in hexadecimal
'l' is 108 - 6C in hexadecimal
'o' is 111 - 6F in hexadecimal

To convert a decimal (say 108) to hexadecimal (say 6C ) follow below steps

Divide 108 by 16.
Quotient: 6, Remainder: 12
Continue dividing the quotient (6) by 16
Quotient: 0 (Stop since the quotient is now zero). Remainder is 6
Write in reverse order i.e. 6C ( here we can represent 12 as C in hex)

So our buffer data should be like

<Buffer 68 65 6C 6C 6F>

Now that we know what will be the output, we can test it now.

helloBuff.write("hello");

If you try to log helloBuff, your output will be same.

You can also use toString() method to get proper values

for e.g.

helloBuff.toString('utf8'). //output - 'hello'
helloBuff.toString('base64') //output - 'aGVsbG8='
helloBuff.toString('hex') //output - '68656c6c6f'

If you want to learn to calculate any string to base64 string. Please check my other article.
https://dev.to/vvkkumar06/converting-a-string-to-base64-manually-4ln2

React Server Side Rendering Setup -2024

Vivek Kumar — Tue, 16 Jan 2024 16:01:42 +0000

In this tutorial we are going to setup development environment for React Server Side Rendering.

We are going to use React v18, Webpack v5, React Router DOM v6 and Express v5.

Step 1: Creating directory structure

Create a project folder, I will name it 'react-ssr'.
Initialize project with
npm init --yes
Create a folder structure like this:

 src
 -client
 --index.js
 -server
 --index.js
 package.json

Step 2: Create a basic express server

If you have not used express js, that is fine, I will try to explain everything I will write here.

Express js is node js framework, people mostly use it to create APIs.
To get started, lets install express
npm i -S express

To create a basic server, write below code in 'server/index.js'

import express from 'express';
const app = express();

app.get('/', (req, res) => {
  res.send('Hello React SSR');
});
app.listen(3000, () => {
  console.log("Server is running on port: 3000");
})

Now, if you try to run below command
node src/server/index.js
Output:

Server is running on port:  3000

If your import doesn't work then add "type":"module" in package.json

If you try to access localhost:3000, you will see 'Hello React SSR'

Step 3: Using webpack to bundle server code

For production, we need to bundle our code and transform it to standard javascript code. So we will write webpack configuration for server.

Create a file "webpack/server.config.js"

src
webpack
-server.config.js
package.json

In server.config.js write below code:

const path = require('path');
const externals = require('webpack-node-externals');

module.exports = {
    target: 'node', // Since target is node not browser
    entry: "./src/server/index.js", 
    mode: 'production',
    output: {
        path: path.resolve(__dirname, '../dist'),
        filename: 'server.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    externals: [externals()], // will not bundle node modules
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
}

lets install dependencies for webpack
npm i -D webpack webpack-cli babel-loader webpack-node-externals
Although we have a loader called 'babel-loader' for webpack but this will not work until we configure babel.
For the basic setup of babel, create a file with name .babelrc
and write following content:

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

Lets install babel now.
npm i -D @babel/core @babel/preset-env @babel/preset-react

Step 4: Script to bundle server code

In package.json, write following command:

"scripts": {
    "build:server": "webpack --config webpack/server.config.js",

  },

We are explicitly giving path of config, if we don't do that it will try to pick webpack.config.js from root directory and we don't have that.

if you run "npm run build:server"
it will create a dist folder in root directory and if you open that folder, you will find we have one file i.e. server.js with some minified code.
And that minification is happening because we have given "mode " as production in webpack config.

Step 5: Creating our first React Component

Create a file App.jsx in 'src/client/App.jsx'

const App = () => {
 return (
    <>
       This is our App component
    <>
  )
}
export default App;

Step 6: Update server code to return html string

Now we will be updating our server/index.js file as shown below:

import express from 'express';
import { renderToString } from 'react-dom/server';
import App from '../client/App';


const app = express();

//* - it will match every request
app.get('*', (req, res) => {
    const html = renderToString(
            <App />
    );
    res.send(
        `
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>SSR React App</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `
    )
})

const port = process.env.PORT || 3000;

app.listen(port, () => {
    console.log('Server is running on port: ', port);
})

lets install react dependencies:
npm i -D react react-dom

So here we are using renderToString, this will transform component to string.

If you have noticed, we are using bundle.js, which we don't have currently. bundle.js is the bundle file for the client, which we are going to put it in public folder and server it from there.
Its ok if you didn't understand, this will be clear in next few steps:

Step 7: Webpack config for Client code

create a file webpack/client.config.js

const path = require('path');

module.exports = {
    entry: "./src/client/index.js",
    mode: "production",
    output: {
        path: path.resolve(__dirname, '../public'),
        filename: "bundle.js"
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
}

if you noticed, this will create bundle.js inside public folder.
So, lets create a public folder in root directory.

Also, on server I want to add a script while sending html string to client as shown below:

but how this bundle.js be available on /bundle.js.
For that we will have to make 'public' folder as static folder for express.

const app = express();

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

app.get('*', (req, res) => {
....

Step 8: Client hydration code

In file src/client/index.js
Write below lines:

import { hydrateRoot } from 'react-dom/client';

import App from './App';

const domNode = document.getElementById('root');

hydrateRoot(domNode, 
    <App />
);

How this hydration works?
On initial request, server will send rendered html string, and in html string we will also send a script that will have a link of client side bundle. Once we open the response in browser, bundle.js code will execute hyration code, that will compare the root component and will to attach all the user interaction code such as even listener or hooks. From here on usually we will be using react router dom which actually doesn't refresh page, so all the navigation will be part of client side bundle.
Every time we refresh our page, a request goes to server and that then server will do same thing as mentioned above

Now, lets say we have a route on client something called
localhost:3000/orders
For first time if we open this url, request will be sent to server, since we are trying to hit server's endpoint, server will do all the process irrespective of what are adding at the end of url, here '/orders'.

To use this endpoint and forward it to client, we will use StaticRouter.

Step 9: Setting up react router dom

npm i -D react-router-dom
Update our server code as given below:

import { StaticRouter } from 'react-router-dom/server';
...
...
app.get('*', (req, res) => {
    const html = renderToString(
        <StaticRouter location={req.url} >
            <App />
        </StaticRouter>
....

And on Client side, update as given below:

...
import { BrowserRouter } from 'react-router-dom';
...
...
const domNode = document.getElementById('root');

hydrateRoot(domNode, 
<BrowserRouter>
    <App />
</BrowserRouter>

);
...

In App.js we can add few routes for some pages.

import { Route, Routes } from "react-router-dom";
import Orders from "./pages/Orders";
import Products from "./pages/Products";
const App = () => {

    return (
        <Routes>
            <Route path="/" element={<Orders />} />
            <Route path="/products" element={<Products />} />
        </Routes>
    )
}

export default App;

Step 10: Update package json script

"scripts": {
    "build:client": "webpack --config webpack/client.config.js",
    "build:server": "webpack --config webpack/server.config.js",
    "build": "npm run build:client && npm run build:server",
    "start:dev": "concurrently \"npm run build:server && nodemon --exec babel-node src/server/index.js\"  \"npm run build:client -- --watch\"",
    "start": "npm run start:dev"
  },

Install nodemon and concurretly to keep watching changes and run multiple commands together.
npm i -D nodemon concurrently

Try this out and comment out the problem you face.

Instead of using renderToString, you can also use react streaming server api - renderToPipeableStream
If you use renderToPipeableStream, then you will be able to lazy load things on UI.

Help me add more features / resolve issues in react-formvik

Vivek Kumar — Sun, 14 Jan 2024 03:18:50 +0000

Sometime back I created this React library for forms, which helps user to create dynamic forms easily.

I am continuously working on it.
Though, I also need people to support me on this by using it and report some issues and awesome features.

This will give me enough motivation to work on it and continue building awesome libraries.

Please try it out once at-least!
If you don't have that much time, go through the docs and live examples and share your thoughts on Github issues or here.
Feel free to put negative feedbacks, I learn from it.
https://www.npmjs.com/package/react-formvik

Thanks in Advance!

React Webpack 5 Setup - Understand everything you need to know

Vivek Kumar — Fri, 12 Jan 2024 14:22:58 +0000

I know there are so many articles you can find online.
What I am doing different here is I will explain the process and every line you write.

So, we will use latest React 18+ version and Webpack 5.

Step 1: Creating Project Directory

Create an empty folder in your hard drive. Open it in your favorite editor. You can open integrated terminal or separate terminal.

Step 2: Initialize project with NPM

npm init --yes
It will create a package.json file
We used '--yes' to pre-fill all the required things in package.json. You can update the details later.

Step 3: Create source folder

lets create a folder 'src' to hold all the components
create two files index.js and App.jsx.
I have used 'jsx', so that we know it is bundling jsx files as well.

Step 4: Create a index.html file

Create a 'public' folder in root directory, and create index.html file.
This will be our template that will mount our react components.
To mount our react root component, create a div with id 'root', although you can use any name.

Step 5: Install react and react-dom

We are going to use 'react-dom/client' to create a root and mount our main component there.
To write jsx syntax, we need react.
npm i -D react react-dom

Step 6: Define our App component

Note - Don't forget to import it in index.js

Although, we have written code for React but till now there is no way to compile jsx syntax and run this code in browser.

Step 7: Setup babel

Install babel core and babel presets
npm i -D @babel/core @babel/preset-env @babel/preset-react
We will use babel to transform our jsx to code compatible with modern browsers.
Create a file .babelrc - this is a configuration file for babel

Presets in babel are set of some functions that help in transforming code.
@babel/preset-env - It has some set of methods which converts es6 to standard Javascript.
@babel/preset-react - It will transform React(jsx) code to javascript.

Step 8: Setup Webpack

Even though we have done setup for babel, but still there is no way to merge multiple files and bundle it one file.
To bundle our react code and inject it in html file as script, we will use Webpack.

Create a file webpack.config.js in root directory.
First we need to define is entry and output.



module.exports = {
    entry: "",
    output: ""
}

After updating entry and output



const path = require('path');
module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
     }
}

You can easily understand above code, where we have used standard node module path to give path of '/src/index.js' as entry and '/dist/bundle.js' as output.

Before we proceed, lets install webpack dependencies we need.

npm i -D webpack webpack-cli babel-loader html-webpack-plugin

I will explain each dependencies why we are using them.

webpack - It is a main webpack library, without this our configuration will not work.
webpack-cli -It will allow us to use webpack commands, using this we can run our server and build our code. Otherwise we will not be able to execute our webpack configuration.
babel-loader - Loaders in webpack are responsible for transforming code, here babel-loader will use .babelrc configuration and transform our es6 and jsx code to standard and compatible javascript that will be supported by browsers.
html-webpack-plugin - In webpack, we can also configure some plugins, this plugin will use our html file as template and this will inject bundle.js as script in html.

Lets use these libraries to configure it further.

Step 9: Resolve Extensions

resolve is a special property in webpack configuration that tells webpack to read these extensions. If we don't define this, we will get error as "Unable to resolve App.jsx' or something like this.

Now that webpack knows it needs to resolve these two types of files.

Step 10: Configure Loaders



const path = require('path');

module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    }
}

Without a loader, we can not transform our code. To configure a loader we define it under module. We can add many rules, each rule will have a loader.
In above code, this will work for only js and jsx file and will exclude node_modules.

Step 11: Configure plugin

If you remember we installed one plugin, html-webpack-plugin. Now its time to use this.



   plugins: [
        new HtmlWebpackPlugin({ template: './public/index.html'})
    ]

Step 12: Install and setup Dev server

To setup dev server, lets install a dependency provided by webpack for dev server
npm i -D webpack-dev-server



 devServer: {
        hot: true,  // hot reloading
        port: 3000,  // port on which server will run
        open: true // open browser automatically on start
    }

Add above properties.

So our final configuration will be,



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

module.exports = {
    entry: path.join(__dirname, 'src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ template: './public/index.html'})
    ],
    devServer: {
        hot: true,
        port: 3000,
        open: true
    }

}

Step 13: Configure script to run our server.

Add below scripts in package.json



  "scripts": {
    "start": "webpack serve --mode development",
    "build": "webpack --mode production"
  },

After all these 13 steps, now its time to test our server
Run below command in terminal
npm start this will open app in our default browser.
npm run build this will create a dist folder with bundle file.

To avoid using in every file



import React from 'react';

update your .babelrc with below code



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

If you noticed we have added { "runtime" : "automatic" }
This will make React object globally available.

At the end of this you will have two things,

Running server

build files

Hope it was easier to understand, if something did not work comment it out.

Happy Learning!

Setup rollup for React Library project - 2024

Vivek Kumar — Sun, 07 Jan 2024 16:41:21 +0000

In this tutorial, we will learn how we can setup our development environment for React Library Project.

I will keep it very simple in steps and will try to explain as much as i can.
I assume you must have node installed and you are already familiar with npm.
Open your terminal in your project folder.

Step 1 - Initializing npm package.

npm init --yes
You can fill rest of things in package.json.

Step 2 - Installing React dependencies

npm i -D react react-dom

Once you will install you can find it in devDependencies in package.json.
But we don't need to bundle react and react-dom in our library considering the consumers will already be having these two.
So, copy react and react-dom to peerDependencies.
By doing this it will be considered external library while bundling.

"devDependencies": {

  },
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },

Step 3 - Installing rollup

npm i -D rollup

Step 4 - Create a rollup config file in project

Create a file with name rollup.config.js

export default [
 //rollup configurations
]

This is an array because we can add multiple configurations.

Step 5 - Input configuration

So the first thing we need do is let rollup know which file is our entry file.



export default [
    {
        input: './src/index.js',

    }
]

Step 6 - Output Configuration

Next, we will define how our output files will look like and where it will reside.

export default [
    {
        input: './src/index.js',
        output: [
            {
                file: 'dist/index.js',
                format: 'cjs',
                sourcemap: true
            },
            {
                file: 'dist/index.es.js',
                format: 'es',
                exports: 'named',
                sourcemap: true
            }
        ]
    }
]

If you notice, I have added two output files, one in format of commonjs i.e. 'cjs' and another is ES6 i.e. 'es'.

Using two different types of output in the Rollup configuration is a common practice when you want to provide your library in different module formats to cater to various use cases and environments. In this specific configuration:

CommonJS (cjs) Format:
    File: dist/index.js
    Format: cjs (CommonJS)
    Sourcemap: Enabled (sourcemap: true)

CommonJS is a module format commonly used in Node.js environments. This format allows your library to be consumed by Node.js applications or projects that use bundlers compatible with CommonJS.

ECMAScript Module (es) Format:
    File: dist/index.es.js
    Format: es (ECMAScript module)
    Exports: Named exports (exports: 'named')
    Sourcemap: Enabled (sourcemap: true)

ECMAScript module format is the standard for modern JavaScript, and it is widely supported in modern browsers and other environments. Providing your library in this format allows developers to import it directly into projects that support ES modules.

The inclusion of source maps (sourcemap: true) also aids in debugging by mapping the bundled code back to the original source code.

Now since we have defined input and output configurations, the next thing is how we will be transpiling our code from input to output.

Step 7 - Installing Babel

Before we proceed, we will install basic libraries we need to transpile our react code.

npm i -D babel-core babel-loader @babel/preset-react

Step 8 - Installing Rollup plugins

Install these plugins as devDependencies
@rollup/plugin-babel
@rollup/plugin-node-resolve
rollup-plugin-peer-deps-external
@rollup/plugin-commonjs
@rollup/plugin-terser

Step 9 - Configure rollup plugins

import babel from '@rollup/plugin-babel';
import resolve from '@rollup/plugin-node-resolve';
import external from 'rollup-plugin-peer-deps-external';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';

export default [
    {
        input: './src/index.js',
        output: [
            {
                file: 'dist/index.js',
                format: 'cjs',
                sourcemap: true
            },
            {
                file: 'dist/index.es.js',
                format: 'es',
                exports: 'named',
                sourcemap: true
            }
        ],
        plugins: [
            external(),
            resolve({ extensions: ['.js', '.jsx'] }),
            commonjs(),
            babel({
                babelHelpers: 'bundled',
                exclude: 'node_modules/**',
                presets: [['@babel/preset-react', { "runtime": "automatic" }]],
                extensions: ['.js', '.jsx']
            }),
            terser()
        ]
    }
]

lets understand line by line
external(): Marks external dependencies to avoid bundling them. External dependencies should be resolved at runtime.
resolve({ extensions: ['.js', '.jsx'] }): Resolves modules using Node.js resolution algorithm, and specifies the allowed file extensions for modules.
commonjs(): Converts CommonJS modules to ES modules, allowing interoperability between CommonJS and ES module formats.
babel({ options }): Transpiles JavaScript code using Babel. In this case, it includes presets for React (@babel/preset-react) with automatic runtime ({ "runtime": "automatic" }).
terser(): Minifies the bundled code using Terser, reducing its size.

What is runtime: "automatic ?

The "automatic" runtime in Babel refers to the new JSX transform introduced in Babel 17. This transform changes how JSX is compiled, and it eliminates the need for a global React import in each file that uses JSX.

In earlier versions of Babel, when you used JSX in your code, Babel would automatically transform it into React.createElement calls. However, this transformation required a reference to the React object, so you had to include import React from 'react' at the top of each file using JSX.

With the introduction of the automatic runtime in Babel 17, the need for the explicit React import is eliminated. Instead of injecting React.createElement calls directly into your code.

This is all you need to get started with rollup for react.

Converting a string to Base64 manually

Vivek Kumar — Sun, 07 Jan 2024 05:57:24 +0000

As a web developer, you must have heard or even used Base64 encodings. Generally we convert some texts or urls to Base64 encoded string. To do this either, we use programming language's methods or we use some third party tools.

In this tutorial we are going to learn how we can encode any text into Base64 manually.

Lets say, we want to encode a text "hi" in base64 binary encoding. Why I am saying it as binary, because base64 encoding is one of the binary representations.

Step 1: Text To ASCII ( text is "hi")

First, each character in the string is converted to its ASCII representation, For example:

h: 104       i: 105

Step 2: Convert each ASCII character to 8bit binary

01101000 01101001

Step 3: Split these binary numbers into group of 6 bits.

011010 000110 1001

Step 4: Padding(if required)

If you notice the least significant number doesn't have 6 bits, then add 0 (zeroes) at the end to make it 6bits

011010 000110 100100

Just remember one thing here,
if we add two zeroes then we will be using "=" at the end of base64 string
if we will add 4 zeroes then we will be using "==" at the end of base64 string

Step 5 Convert it to Decimal

26 6 36

Step 6: Use Base64 Table to find out corresponding character encoding

Base64 Table - it contains 64 characters

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/

   Value Encoding  Value Encoding  Value Encoding  Value Encoding
         0 A            17 R            34 i            51 z
         1 B            18 S            35 j            52 0
         2 C            19 T            36 k            53 1
         3 D            20 U            37 l            54 2
         4 E            21 V            38 m            55 3
         5 F            22 W            39 n            56 4
         6 G            23 X            40 o            57 5
         7 H            24 Y            41 p            58 6
         8 I            25 Z            42 q            59 7
         9 J            26 a            43 r            60 8
        10 K            27 b            44 s            61 9
        11 L            28 c            45 t            62 - (minus)
        12 M            29 d            46 u            63 _
        13 N            30 e            47 v           (underline)
        14 O            31 f            48 w
        15 P            32 g            49 x
        16 Q            33 h            50 y         (pad) =

So,
26 -> a
6 -> G
36 -> k

aGk

Step 7 - Now add padding ( we added two zeroes, so we will use one equal(=) sign.

aGk=

You can also verify this with JavaScript method
btoa("hi") . It will also print same.

react-formvik - a highly customizable React Form Library

Vivek Kumar — Sat, 06 Jan 2024 16:43:59 +0000

Creating a form in React sometimes become tedious and we write a lot of code.
You might have used so many third party libraries for the same.

Recently, I developed a npm package react-formvik
that allows a developer to create highly customizable React forms.

Using react-formvik, you don't need to create form from scratch. Instead you can pick one of the available preset.

For now I have provided 2 presets(login and register) in the library and in future I am planning to add more.

Presets for Quick From Development
Using preset you just need to write few lines of code to create a form.

Since our requirements won't be limited to just username or password, we can add more fields easily.

If you notice above code, you will find we can add custom styles, we can add validation message, and also we can pass inputProps as we do in html input elements.

You can also adjust order of injected field using property order.

Styling
For styling you can simply add a css property in each field object and also you can add a global css property that will apply to all the fields

{
   fields: [],
   css: {
        labelClass: 'form-label',
        inputClass: 'form-control',
        containerClass: 'mt-4 col-6',
        formContainerClass: 'row'
    }
}

Support of different Form Elements:
It supports almost all form elements including new html5 input types. There are things I still needs to add it in docs.
You can easily create different input types, radio buttons, checkboxes, dropdowns etc.

Validations
Adding validation in each field is very easy as you can add all the properties HTML elements accept for the validations.
For example, required, min, max, pattern, minlength, maxlength, etc. You just need to pass everything in inputProps property.

{
  "fields": [
    {
      "label": "Website",
      "field": "url",
      "order": 1,
      "inputProps": {
        "type": "url",
        "pattern": "^(http://|https://)?(www.)?([a-zA-Z0-9]+).[a-zA-Z0-9]*.[a-z]{3}.?([a-z]+)?$"
      },
      "validation": {
        "errorMessage": "Please enter correct url!"
      }
    }
  ]
}

Bootstrap Support
By default, each preset supports bootstrap classes, means if you add bootstrap in your project, you will start seeing the styles of form element without adding any class.

Live Demo

I will be working on the updates continuously. Feel free to add comments and suggestions.

Javascript Object.groupBy(), an important method

Vivek Kumar — Fri, 29 Dec 2023 08:46:27 +0000

Most of the time we use some third party library like underscore or lodash, to group an array of objects based on some property.

But did you know that we can also do this directly with JavaScript, since the JavaScript has a special method called .groupBy().

groupBy() is a static method on Javascript 'Object'.

Lets take an example-

const products = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

In above products data, if you want to group data by it's type, then we can use groupBy() as shown below

Object.groupBy(products, item => item.type)

Output:

{
  "vegetables": [
    {
      "name": "asparagus",
      "type": "vegetables",
      "quantity": 5
    }
  ],
  "fruit": [
    {
      "name": "bananas",
      "type": "fruit",
      "quantity": 0
    },
    {
      "name": "cherries",
      "type": "fruit",
      "quantity": 5
    }
  ],
  "meat": [
    {
      "name": "goat",
      "type": "meat",
      "quantity": 23
    },
    {
      "name": "fish",
      "type": "meat",
      "quantity": 22
    }
  ]
}

Javascript .splice() vs .toSpliced()

Vivek Kumar — Wed, 27 Dec 2023 15:00:32 +0000

In this tutorial, we will learn how .toSpliced() method can be handy.
You might have used JavaScript array splice method.

Lets have a look at how .splice() works then we will understand how .toSpliced() is different from it.

Splice

We can use splice when we want to remove some item from array.

Below code example shows what happens when we remove array items using .splice().

Below code example shows what happens when we add array items using .splice().

One thing which is important to notice here is, arr.splice() always returns removed Items.
You can also add and remove items at the same time but the output of arr.splice() will always be removed items.

And it modifies the actual array.

toSpliced

Array .toSpliced() also accepts the same parameter as .splice().
But the first difference is it won't modify the original array instead it will return the updated array.

Below code example shows what happens when we remove array items using .toSpliced().

Below code example shows what happens when we add array items using .toSpliced().