DEV Community: Sidharth Mohanty

How to Fix React Hydration Mismatches with a Simple Inline Script Hack (Zero Flicker SSR)

Sidharth Mohanty — Sun, 29 Jun 2025 14:41:01 +0000

React's hydration process is a crucial part of server-side rendering (SSR) where React attaches event handlers to the server-rendered HTML. However, sometimes we encounter situations where the server and client need to render different content, which can lead to hydration mismatches. In this blog post, we'll explore a neat trick to handle this scenario without triggering React's hydration errors.

The Problem

When using React with SSR, you might encounter situations where you need to render different content on the server versus the client. A common example is when we need to render something that depends upon browser cookies. React expects the server-rendered HTML to match exactly what would be rendered on the client during hydration. If there's a mismatch, React throws a hydration error:

Warning: Text content did not match. Server: "Bye World" Client: "Hello World"

Example Approach (That Causes Problems)

Here's a typical example that would cause hydration issues:

export default function Home() {
  const isBrowser = typeof window !== "undefined";

  return (
    <div>
      <h1>{isBrowser ? "Hello World" : "Bye World"}</h1>
    </div>
  );
}

This code will cause a hydration mismatch because the server renders "Bye World" (since window is undefined), but the client renders "Hello World".

You could use useEffect here and render but that would cause a flicker.

The Solution: The Inline Script Trick

Here's where our trick comes in. We can use an inline script that executes immediately after the HTML is rendered but before React hydration begins. Here's how it works:

'use client'

const isBrowser = () => typeof window !== "undefined";

export default function Home() {
  const inlineScriptFn = () => {
    const helloElement = document.getElementById('hello');
    if (helloElement) {
      helloElement.textContent = 'Hello World';
    }
  }

  return (
    <div>
      {isBrowser() ? <h1 id="hello">Hello World</h1> : <h1 id="hello">Bye World</h1>}
      <script dangerouslySetInnerHTML={{ __html: `(${inlineScriptFn.toString()})()` }} />
    </div>
  );
}

Let's break down how this trick works:

On the server, React renders <h1 id="hello">Bye World</h1> because isBrowser() returns false.
Immediately after the HTML is sent to the browser, but before React hydration begins, our inline script executes:
- It finds the element with id "hello"
- Changes its content to "Hello World"
When React begins hydration, it sees "Hello World" in both:
- The actual DOM (thanks to our script)
- The virtual DOM it wants to render (because isBrowser() is now true)
No hydration mismatch occurs because the content matches!

Why This Works

This approach works because:

The inline script executes synchronously before React's hydration process begins
By the time React performs hydration, the DOM already contains the client-side content
React sees matching content in both the real DOM and its virtual DOM

Conclusion

This hydration trick provides a clean solution to handle server/client content differences without triggering React's hydration warnings.

At Builder.io, we rely on this very inline-script hydration trick to select the winning variant in our SDKs. You can see the production implementation here: inlined-fns.ts.

I first discovered the technique while building "Variant Containers" in our SDKs (block-level personalization container), essentially A/B testing at the block level, and it felt downright magical once it clicked. If you’re curious, you can peek at its implementation here: inlined-fns.ts.

Have you run into hydration mismatches or found other clever solutions? I’d love to hear about your experience. Feel free to reach out, and if you’d like to see what else I’m up to, visit my portfolio at sidharthmohanty.com.

How to Dynamically Render HTML Tags in Angular 16.2+

Sidharth Mohanty — Sat, 22 Jun 2024 10:17:16 +0000

At Builder.io, we use Mitosis to generate multi-framework SDKs, enabling us to maintain one codebase that outputs code for React, Preact, Solid, Vue, Angular, Svelte, and more.. Some frameworks leverage normal JSX syntax like React but not all frameworks use JSX right? In React, achieving dynamic HTML generation is straightforward--simply use state to update the tag directly. However, with Angular, it wasn't possile until the version 16.2, which introduced the ngComponentOutlet directive.

Dynamic HTML Generation in React

Here’s an example of dynamic HTML generation in React:

function App() {
  const [Tag, setTag] = useState("div");

  const updateTag = (e) => {
    setTag(e.target.value);
  };

  return (
    <>
      <select onChange={updateTag}>
        <option value="div">div</option>
        <option value="span">span</option>
        <option value="p">p</option>
        <option value="a">a</option>
        <option value="h1">h1</option>
      </select>
      <Tag>Inside {Tag}</Tag>
    </>
  );
}

In this example, the Tag state updates based on the selected value, rendering the corresponding HTML tag dynamically. We wanted to replicate this functionality in Angular. Is it possible? Yes, with some modifications!

Dynamic Component Generation in Angular

In Angular, you can achieve dynamic component generation using the ngComponentOutlet directive. Here’s how:

Step 1: Define Dynamic Components

First, we create components for each tag we want to generate dynamically (you can automate this using a script):

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'dynamic-div, DynamicDiv',
  template: `<div #v><ng-content></ng-content></div>`,
  standalone: true,
})
export class DynamicDiv {
  @ViewChild('v', { read: ElementRef }) v!: ElementRef;
}

@Component({
  selector: 'dynamic-h1, DynamicH1',
  template: `<h1 #v><ng-content></ng-content></h1>`,
  standalone: true,
})
export class DynamicH1 {
  @ViewChild('v', { read: ElementRef }) v!: ElementRef;
}

@Component({
  selector: 'dynamic-a, DynamicA',
  template: `<a #v href=""><ng-content></ng-content></a>`,
  standalone: true,
})
export class DynamicA {
  @ViewChild('v', { read: ElementRef }) v!: ElementRef;
}

@Component({
  selector: 'dynamic-button, DynamicButton',
  template: `<button #v><ng-content></ng-content></button>`,
  standalone: true,
})
export class DynamicButton {
  @ViewChild('v', { read: ElementRef }) v!: ElementRef;
}

Why are there unused refs here you ask? You can extend this functionality to dynamically add attributes or action attributes to any of the elements. A more complete example can be found here in our Opensource SDKs repository.

Step 2: Create a Dynamic Renderer Component

Next, we create a DynamicRenderComponent that will use the ngComponentOutlet directive to render the selected component dynamically:

import {
  Component,
  Input,
  ViewChild,
  ViewContainerRef,
  TemplateRef,
  Renderer2,
  OnChanges
} from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'dynamic-renderer',
  template: `
    <ng-template #tagTemplate><ng-content></ng-content></ng-template>
    <ng-container
      *ngComponentOutlet="Element; content: myContent">
    </ng-container>
  `,
  standalone: true,
  imports: [CommonModule]
})
export class DynamicRenderComponent implements OnChanges {
  @Input() Tag: any = 'div';
  @ViewChild('tagTemplate', { static: true }) tagTemplate!: TemplateRef<any>;

  Element: any = DynamicDiv;
  myContent: any;

  constructor(private vcRef: ViewContainerRef) {}

  ngOnChanges() {
    switch (this.Tag) {
      case 'div':
        this.Element = DynamicDiv;
        break;
      case 'button':
        this.Element = DynamicButton;
        break;
      case 'a':
        this.Element = DynamicA;
        break;
      case 'h1':
        this.Element = DynamicH1;
        break;
      default:
        this.Element = DynamicDiv;
        break;
    }
    this.myContent = [
      this.vcRef.createEmbeddedView(this.tagTemplate).rootNodes,
    ];
  }
}

Step 3: Create the Main Component

Finally, we create the main component that includes a dropdown to select the desired tag and renders the dynamic component accordingly:

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { DynamicRenderComponent } from './dynamic-render.component';

@Component({
  selector: 'app-root',
  template: `
    <select (change)="onChange($event)">
      <option value="div">div</option>
      <option value="button">button</option>
      <option value="span">span</option>
      <option value="p">p</option>
      <option value="a">a</option>
      <option value="h1">h1</option>
    </select>
    <dynamic-renderer [Tag]="Tag">Inside {{ Tag }}</dynamic-renderer>
  `,
  standalone: true,
  imports: [DynamicRenderComponent]
})
export class PlaygroundComponent {
  Tag = 'div';

  onChange(event: any) {
    this.Tag = event.target.value;
  }
}

bootstrapApplication(PlaygroundComponent);

In this example, the PlaygroundComponent handles the tag selection, and the DynamicRenderComponent dynamically renders the selected tag. This approach ensures that we can generate dynamic HTML elements in Angular, similar to how it’s done in React.

Try it out yourself using this GitHub gist. I hope you found this post insightful. While I'm not an Angular expert, we wanted to solve this problem and share our approach. If you know of a better way to handle this specific scenario in Angular, please share your insights in the comments. Your feedback and suggestions are always welcome!

Sync your fork from the terminal

Sidharth Mohanty — Sat, 16 Mar 2024 06:53:46 +0000

As a collaborator on GitHub projects who heavily relies on forks, I found myself performing a repetitive task every morning: syncing my forks with the parent repositories to stay up-to-date. This manual 3-step process of navigating GitHub, checking for updates, and syncing felt like an everyday chore.

Being a developer, I decided to automate this!

Introducing syncb, a simple script that streamlines your workflow with a single command. With syncb, you can effortlessly sync both public and private forks, saving you valuable time and frustration.

Getting Started

Install syncb globally using npm:

npm i -g syncb

Run syncb in your terminal.

That's it! syncb seamlessly syncs your repository with the latest commits from the parent repository.

Using Private Forks

Initially, I encountered authorization issues (401 errors) when syncing private forks. To overcome this, you can securely store a GitHub Personal Access Token (PAT) with repo access in your environment variable as GITHUB_TOKEN (e.g., .zshrc). syncb will automatically leverage this token for private repo syncing.

Share and Contribute!

Did syncb make your life easier? Share it with a star ⭐ on the repository! Additionally, I'd love to hear your preferred fork syncing methods – perhaps you have a more efficient approach? Feel free to contribute to the project as well!

Connect with me!

Visit sidharthmohanty.com to stay connected.

How to Ensure Pixel-Perfect Comparisons Between Websites?

Sidharth Mohanty — Sat, 03 Feb 2024 15:26:00 +0000

So here at Builder.io, my first task was to ensure that we migrated our site from Next.js to Qwik with a 100% pixel match. We aimed to utilize the power of Qwik to enhance our site's performance to unprecedented levels.

Spoiler: We began the migration, and you might think it's just a matter of adjusting HTML and CSS, right? But no, we use Builder CMS to serve our data, meaning we rely on custom components and components from the Builder SDK to make it work. This presented a challenge because you cannot directly change any CSS or other elements that appear different, as they are linked to something else.

We reached a point where it was “almost” ready, and I kept saying it was “almost matching.” Fortunately, Builder had already developed a tool called SSDiff, which facilitated the comparison of our websites, highlighting both the matches and the differences.

However, the major limitation for me was the extensive back-and-forth during development. It was cumbersome to switch to another project, run the diff, it will take a screenshot, compare them, and determine the differences. Repeatedly updating CSS and checking for matches became a tedious process.

To streamline this, I developed a Vite plugin called vite-plugin-realtime-diff that allows direct in-browser diffing by simply adding ?_diff=true to the URL. This significantly simplified my workflow, enabling real-time reflection of local changes in the browser.

Getting Started with the plugin,

Install the plugin in your Vite project:

npm install -D vite-plugin-realtime-diff

and add this to your vite.config,

// vite.config.ts
import { realtimeDiff } from "vite-plugin-realtime-diff";

export default defineConfig(() => {
  return {
    plugins: [
       ...,
       realtimeDiff("https://builder.io/"), // the base url you want to target the diff to
     ], 
  };
});

Now go to http://localhost:5173/any-path?_diff=true to diff it with the url you provided to the plugin (for example here: https://builder.io/any-path).

Approach

So its just a simple approach, imagine taking two websites (hint: iframe) and sandwich them one upon the other and then apply CSS overlay to learn the diff. This method proved so effective that I decided to share it and contributed to the SSDiff project by adding this there. Especially for those undergoing a site migration using a different framework or looking to demonstrate their front-end development skills (imagine someone asking you, do this in pixel perfect fashion and you’re hired: you know what to use now). Essentially, this tool can help you achieve a 100% pixel match in realtime which can save you hours to explain why your margin padding are not matching.

Conclusion

If you're interested in contributing, please feel free to reach out; we are open to expanding this project further. For example, in the future we can support for CORS and create pipelines to check frontend snapshots. If you want to take a look at the tool, it has been added into the SSDiff project at Builder within a monorepo here. Thank you!

If you want to reach me:
Email : sidmohanty11@gmail.com
GitHub: https://github.com/sidmohanty11
LinkedIn: https://www.linkedin.com/in/sidmohanty11
Twitter: https://twitter.com/sidmohanty11

My LFX Journey: The Zowe App Store UI Project

Sidharth Mohanty — Fri, 15 Sep 2023 17:03:20 +0000

Hi everyone! I am Sidharth Mohanty a final year CS student from India. This summer, I got a chance to work on an awesome project called the App Store for Zowe under The Open Mainframe Project. So, here I wanted to share the complete journey, hope it will help someone get started with their open-source journey and even participate in mentorship programs such as LFX.

A little backstory of how I got selected.

Long story short, I was browsing through the LFX mentorship portal after I completed my internship to look for some projects to contribute to. Surprisingly there was one project that caught my eye - The App Store which had mentioned all the tech stack that I was familiar with. So I was like, let's give it a shot - "as my mentor always said - never leave stones unturned from your side". I was very late but still I joined the Open Mainframe Project's Slack channel and messaged Lenny (Leanid Astrakou). After his first reply that the project was still accepting applications, I just went through the ZLUX repo and tried to understand as much as I could and get a brief idea about the App Store, I also watched previous meeting videos that explained ZWE's handler support and how it will help architect the App Store and applied for the mentorship program. Just the next day, Lenny messaged that he was conducting interviews for the project and asked to join. I was super nervous as I was very late plus I didn't have a very concrete picture of things. I joined the interview nonetheless and we went through some of my projects, and my work experiences. Then we talked about what is app store and just some brief ideas about what is Zowe, z/OS, and mainframe systems in general. A few days passed, I was exploring the App's framework a bit more and I messaged Lenny that I was super interested and that with a bit more time I could most definitely build the App Store. After a few days, he messages me a Mission Impossible dialogue - "your mission should you choose to accept it" and I was like YEAH! LETS GO! Fingers crossed, I was waking up in the mornings checking my email.. but one day I got the email! I was selected.

Why I shared this story?

I believe mostly we lack the perseverance to showcase or make the mentors believe that we are the right person for the thing. We just apply and sit like a duck and hope we will get selected but no, it's not just about that - majorly mentors focus on is the candidate "super" interested and have a basic understanding of things, If so, they take a leap of faith that you will be able to perform well upon their expectations (yeah talent matters, not saying it doesn't but to the project I applied, 177 others applied too so my chances should be pretty slim right?). Just communicating frequently, and sharing ideas and implementation details will 10x your chances of getting selected.

What is the App Store?

The Zowe App Store is a systems app of Zowe's Virtual Desktop where users can browse, install, and manage apps that run on top of the Zowe App's framework. As part of my LFX mentorship project, I was tasked with implementing the App Store from scratch. Along with me, Priyansh Mehta also got selected for this project to work on the backend side of things.
What did I do in the last 3 months?
This might be a long story, so please bear with me. So we started out our journey and Lenny introduced us to Zowe and mainframe terminologies and gave us our initial tasks to just explore and set up the ZLUX server in our local. After that, we had a major blockade that was we needed a mainframe system to test out the zwe commands as everything depended upon responses from that only.

A brief summary about zwe commands - it's the Zowe CLI tool to set up a Zowe instance easily on a z/OS system. With the release of Zowe 2.5, they introduced "handlers" support for the zwe components commands which means now it was possible to download and install plugins from external sources (registries) directly. This made the rollout for apps pretty fast. So, for example, if the Zlux editor was to be updated, it needed to get updated in one's local machine then either you would have to use FTP or GitHub to clone and setup the app again to see the changes on a z/OS system. This was pretty cumbersome, so now with one command you could install/upgrade/uninstall apps directly with zwe components commands. With this, it introduced one more challenge that you still need to be on the terminal to install apps right? Also, what about browsing open-source apps for the Virtual Desktop? We needed a solution and that was the App Store.

We first explored with IBM's Z trial which provides us with a VM (which is a Windows system) where you can access z/OS from the terminal. We found out that we could not access the internet on the VM which just destroyed our hope to test our code there. Also, another limitation was it was configured with an earlier version of Zowe so it didn't have the latest zwe components commands support so we couldn't even test out the responses. We then tried another approach with IBM's Z Xplore, which gives us a mainframe access to learn about Zowe's products. We, being kids thought it was great that we now have the access, and without any consultation or permission we just copied a Zowe 2.9 instance to that mainframe, and we got banned! Yep, it was not for development purposes, it was handling 50K+ users who were learning Zowe using that mainframe so resources were pretty limited. We tried to play around, and work around things but with no success. A huge shoutout to Ross from IBM who helped us throughout the process. We at least got some knowledge about a z/OS system.

I had parallelly started working on the UI part, so I was making progress there. Firstly when I saw some screenshots of the App's framework's Virtual Desktop - I was mindblown by how they had architected a complete Desktop inside a browser and how the apps that were created could be made with multiple frameworks (Angular, React, and iframe). I realized how it helped people working on mainframe systems as someone working on a mainframe means 24x7 being on a terminal working on jobs. But, with this, it was connected with a ZSS server through an API mediation layer which helped users to work directly from their machines (let's say windows/mac/linux) and use the Virtual Desktop (kind of a VM) to directly run jobs or work on a z/OS machine. Just so, I was not stuck with not having a mainframe system, I built a mock server of my own to replicate the behaviors of a ZSS Server that we were going to write in C language.

My initial App Store wireframe prototype

App Store UI inside the Virtual Desktop

I created an apps-playground repo mimicking a similar setup so that I could re-iterate through the UI pretty fast and host the UI using GitHub pages for faster feedback. After getting a good idea about the implementation of the UI part, I gradually migrated to create "The App Store". We used React to build the app. When I did the migration, I saw the project was using Webpack 4 for packaging apps, so I created a whole new plugin for Webpack 5 (for faster builds and reduced bundle sizes) and used the latest React v18 (previous apps used v16 and class components) for better performance and maintainability. I implemented a carousel for the "Discover" page and built the entire UI fully responsive. It was a bit tricky as we were using a window inside the browser window, so subscribing to a window resizing event was necessary and I built a custom hook to address that.

Another major challenge was the routing, routing inside an App inside a browser gets tricky as we don’t have access to path URLs and variables. To tackle this part, I used the memory router of React Navigation which stores its locations internally in an array. This allowed to navigate among different views easily.

Screenshots of the App Store UI

PRs:

Lenny helped us throughout and made sure that we were not blocked and were making progress as we didn't have a mainframe setup we couldn't make much progress with the backend part. But, folks from Vicom were super helpful for extending us a mainframe and allowing us to develop the App Store there. A huge shoutout to Randall from Vicom for that, he also helped us throughout as the mainframe we got access to had Zowe v1, but we needed the latest one, so he set up v2.9 for us which was a huge task. With that, we had access to a mainframe and Zowe v2.9. We were finally able to test out the zwe commands and structured our app based on that.

With this, I added a new systems app: "The App Store" to the Virtual Desktop and built the entire UI, making a full research documentation for the npm handler implementation and outputs that we will use to design the backend.

My ZWE Research document can be found here.

High level architecture

Some other contributions that I made include, creating a Zlux todo app and publishing it to npm. I analyzed their GitHub actions script and built a shell script to build and deploy the package similar to the others (PAX format). This work was pretty interesting and we were able to use this to play around with the "schema for the plugins" that we were planning to use for the apps.

Zlux ToDo App

Conclusion

Looking back on the past three months, I am proud of the progress we made on this extensive project. While we faced numerous challenges along the way, we overcame them and were able to achieve significant milestones.

Although there is still work to be done, such as refining the backend and making additions to Zowe commands and schema changes to the package.json file to add plugin information, our efforts have laid a solid foundation for future development. I am excited to continue contributing to this project and working towards its success in the future.

Overall, this experience has been both challenging and rewarding. I have gained valuable skills and knowledge that I can apply to future projects, and I look forward to utilizing them in my continued work with this project. Thank you to Lenny who was there for us throughout the journey and being such an amazing mentor, we couldn't have asked more from him - he helped us in every step of the way. Also, Priyansh and I had numerous discussions and meetings to architect things along the way and I liked a lot listening to his perspectives and enjoyed the teamwork overall. This sums up my journey. Thanks for reading this far and stay tuned for major updates coming soon in the near future.

Here is the YouTube video summarizing our progress with our mentor:

If you want to reach me:
Email: sidmohanty11@gmail.com
GitHub: https://github.com/sidmohanty11
LinkedIn: https://www.linkedin.com/in/sidmohanty11
Twitter: https://twitter.com/sidmohanty11

How to Add a Custom Domain to GitHub Pages (Hostinger Edition)

Sidharth Mohanty — Tue, 04 Jul 2023 06:12:47 +0000

I recently finished my portfolio website, and it was a dream come true to have a small space of my own on the internet. To make this happen, I bought a domain name from Hostinger. I was already using GitHub Pages to host my site, so I needed to add my new domain name to it.

There weren't any videos on how to do this, so I went through the documentation. The process is a bit different for Hostinger, but if you're like me and you want to set things up quickly, you can follow this blog post.

Refer to this.

Step 1: Go to your Hostinger domain DNS settings

The first step is to go to your Hostinger domain DNS settings. You can do this by visiting https://hpanel.hostinger.com/domain/yourdomain.com/dns. For example, https://hpanel.hostinger.com/domain/sidharthmohanty.com/dns.

Step 2: Delete the existing CNAME record and A type record

By default, there should be a CNAME record for your domain. This record points your domain to Hostinger's default website. We need to delete this record so that we can create a new CNAME record that points to our GitHub Pages site. Also delete any default A type records so that there is no collision or clash.

Step 3: Create two new CNAME records

We need to create two new CNAME records. The first record will point www.yourdomain.com to <your-github-username>.github.io. The second record will point yourdomain.com to <your-github-username>.github.io.

Enter Type - CNAME, Name - www, Points to - .github.io, TTL you can leave as default. This is for when someone types www.yourdomain.com.
Then we need the same for APEX domains or when someone just types yourdomain.com, for this enter another CNAME with Name - @ and Points to .github.io. This will automatically set an ALIAS type and add it to the DNS records.

It should look like this when added,

Step 4: Add the GitHub Pages IP addresses

Finally, we need to add the IP addresses for GitHub Pages to our DNS records. Add A type, Name - @, TTL can be left as default records for each of the following IP addresses (should be copied and pasted into “Points to”)

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Once you've added the IP addresses, your DNS records should look like this:

Step 5: Add the custom domain to GitHub Pages

The last step is to add the custom domain to GitHub Pages. You can do this by going to your GitHub repository and clicking on the Settings tab. Then, click on the Pages tab and enter your custom domain in the Custom domain field.

This should work out of the box if you’re using any “branch” to deploy your site as GitHub adds a CNAME file to the branch but if you’re using a static site generator, you need to add it manually to your public folder.

public/CNAME (should be capital with no extension)

yourdomain.com

Refer to this.

Once you've followed all these steps, you should be able to access your website by visiting https://yourdomain.com.

Congratulations! You've now successfully added a custom domain to GitHub Pages.

Thanks for reading this post ✨. Let me know if you find it useful. If you'd like to see my portfolio or what I am upto, you can visit my website at https://sidharthmohanty.com/.

I Switched to Astro for My Portfolio Website, and It's Awesome!

Sidharth Mohanty — Mon, 03 Jul 2023 20:06:04 +0000

Astro, as they say, is the all-in-one web framework designed for speed. You can pull your content from anywhere and deploy it everywhere, all powered by your favorite UI components and libraries. I kind of agree; it's like we're writing pure HTML, CSS, and JS code, reminiscent of the old days of shipping pure HTML to the browser. This allows websites to become interactive in just a few seconds and also means moving away from frontend frameworks that ship JS and are bloated with other stuff, which slows down the initial load of a webpage.

Okay coming to why I tried out Astro? To be honest, it's YouTube and blogs hyping "blazingly fast" websites. And yes, I wanted a blazingly fast website too!

And it really is blazingly fast!

A note to remember: This is not a SPA; it's an MPA. The number of pages that you create inside the pages/ directory will be built into different HTML pages.

Just like React or any frontend frameworks, where we think in terms of components, it's the same here as well.

This means less code duplication, and everything can be in order, as opposed to static HTML sites that we used to create.

Also, this doesn't mean we cannot add any interactivity. We most definitely can, and this is very neat with Astro because we can choose our own frameworks that we are comfortable with and mix and match them as well.

Ref: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

The developer experience is superb, I must say. Coming from a React.js background, I got familiar with the syntax and structure in no time. I explored some things through experimentation and googling. Here are some of them:

The server build time block contains top-level await, so you can directly fetch your blogs or data.
It has a pretty similar JSX templating structure (map, conditionals, etc.). The only difference is that for interactivity, you need to use <script> tags like in the old days (getElementById, :P). But this was quite fun as I was just building my portfolio and didn't want any hefty useEffects or interactions (dynamic behavior).
The set-html attribute is great! For every page I created, I wrote down some constant arrays where the values were strings that contained HTML elements. For example, if I needed to add a link to some page under an experience's description, I structured the content using strings, which I can now directly render as HTML without using any third-party libraries.
Integrations? Please take a look at the number of integrations they have, its enormous. This means all the good work has already been done for you, just plug and play. I used the Tailwind CSS integration, and it works like a charm. Although, in the near future, I am planning to study a bit about website SEO and integrate some other plugins to make my website even cooler.

If you want to see the end output that Astro gives, here's a sneak peek: The server builds the entire HTML pages. The client-side <script> that we define inside the Astro components gets attached to the <head> elements of the respective page HTML.

Also, the SSR feature looks quite promising in Astro, but I'm yet to explore it.

Lighthouse report:

Performance Insights (from builder.io): This tells you how bloated your website is with JS/Images/CSS and how you can optimize them.

In the end, performance really matters right? :)

Link: https://sidharthmohanty.com

GitHub Link: https://github.com/sidmohanty11/sidmohanty11.github.io

Please let me know your feedback on the site. I would love to make some improvements. If you've explored Astro and want to share some knowledge, that would be amazing! I am in no way an expert on this topic, just sharing my experience with Astro because I loved the developer experience and how fast you can build sites and how fast the sites can be (no pun intended). Cheers!

Thanks for tuning in! See you next time!

My Internship Journey at Dragonfruit AI

Sidharth Mohanty — Thu, 15 Dec 2022 04:30:40 +0000

tldr;

So, it all started with a cold apply to a job post, when I just knew that Dragonfruit does interesting things with videos. I got a reply from Amol Kulkarni (one of the co-founders of Dragonfruit) that let’s schedule interviews for an internship. Two technical interviews later, I got a call that I was selected. Three months in, I learned about:

creating APIs in Python (Flask),
E2E testing using cypress,
database migrations using alembic,
data models using sqlalchemy,
pixi.js graphics

From knowing nothing about these technologies to deploying code that is being used by many fortune 500 companies, it has been a mind-blowing journey.

What is Dragonfruit AI?

Dragonfruit offers the world's most advanced enterprise AI analytics for digital investigations, occupancy management, real-time alerts, and beyond. It stands at the intersection of video, cloud, and AI, and it aims to be the go-to solution to store videos while providing powerful insights through analytics.

Why I chose to intern at Dragonfruit AI?

When I was a little kid, I was told that all the cool things are made in the valley (Silicon Valley) so I always dreamt of working with one. I learned about Dragonfruit and its work culture through some of the previous fellow interns’ blogs and couldn’t wait to give my 100% in my technical interviews. I was so excited that people from established institutes around the globe (Harvard, Stanford, USC, IITs, VIT) were working there and I’ve gotten a chance to work there as well.

Interview Rounds

So here we go into the technical rounds:

Tech Round - 1

The first round was an overall technical knowledge round taken by Vishal Goel (Software Architect at Dragonfruit) about my projects, mainly my GSoC project and projects in Golang (mostly where I had used concurrency model of Go). It was a conversation and code walkthrough where I was asked some questions based on them.

Tech Round - 2

The second round was a coding challenge round taken by Naveen Yannamani (Founding Engineer at Dragonfruit) where I was asked to code a mini version of jQuery using JavaScript based on the requirements of the question. It was quite challenging and also a fun challenge where I got to brainstorm a lot. I was able to complete the challenge within the time period and it felt so good that after the interview I was jumping and dancing like a drunk person.

Both interviewers were amazing and had an amazing sense of aura. I never felt like I was stressed or something. It was quite fun actually. After all the interviews, I got a call - I was selected!

“The Dragonfruit Way”

I would say I loved the way the internship was structured to maximize learning and inculcate organizational best practices. I was assigned a mentor, Shubham Mandal (Member of the Technical Staff at Dragonfruit) who helped and guided me throughout my internship. He took out time from his busy schedule whenever I needed any help. It is also the same case with other “dragons”, they are there for you whenever you need any help. I fell in love with this super cooperative environment.

Other than my technical meetings, we had a weekly all-hands meeting where both technical and non-technical aspects were discussed (on what is going on, what are the future plans, infrastructure changes, updates, and business development) and also a five-minute-me where an employee got a chance to share about himself/herself. We also had a weekly intern sync with Amol sir who gave us so many insights on how startups take decisions, how it all started and how it shaped itself to what it is now, advice to 20-year-olds, and many more.

What did I do in these three months?

E2E Testing using Cypress

Firstly, I started out with e2e testing of frontend (React.js), I fixed around 20 tests and made them more generic. I wrote cleanup scripts so that any dangling server-side data can be removed before/afterward a test is run. I reduced the duration of the tests and made them faster by 36.06%.

Search filter dependency model

I had zero experience in python but Shubham sir helped me a lot to set up the backend environment in my local and guided me through this. This was a feature that checked if the search filter is used in some place, and if so - notified the user with a modal.

Customer Showstopper Issues

Region Graphics

This was one of the most challenging tasks. I needed to work with graphics (pixi.js) in which I had no previous experience. I improved the map region graphics to include interpoints functionality and then introduced drag functionality for regions and spatial filters.

Insights settings

I converted the insight settings page to a modal with subgroups.

Views Folder structure

This feature implementation looked a bit overwhelming to me at first. Previously, I had never changed the database model directly and was just working with APIs. But this needed database migrations, API implementation, and frontend adaptation. I was shit scared, I didn’t want to break anything in production and also their trust. So, I took some time studying Naveen sir’s implementation of Insight groups and made a generic parent-child relationship model which can be extended easily. Both Naveen sir and Shubham sir helped me a lot to achieve this progress.

To End,

I had an exhilarating three months with Dragonfruit. I never thought these types of organizations exist that push and help out lads to give their best. I learned a lot about React.js, best state management workflow practices, and how to scale out stuff so that it is easier in the long run. It was an amazing experience and I would definitely cherish it lifelong.

A tip: If you want to apply for an internship and take your chances with Dragonfruit AI, you may contact amol@dragonfruit.ai.

Final Part: GSoC 2022 | Rocket.Chat | EmbeddedChat

Sidharth Mohanty — Sat, 10 Sep 2022 14:05:16 +0000

Hello everyone, it’s the last week of Google Summer of Code (for medium-term projects) and it feels so amazing when I look back to the day I started it. My project was just an idea at that time; now it’s a product! I am so grateful for the love and support from the Rocket.Chat community. My project has got whooping 12+ stars on GitHub now and some potential users who are eager to use it! These few months were really hard. We had to face so many challenges, so many edge cases, and so many stages. It was an amazing journey altogether!

Some updates on EmbeddedChat:

This is the component I've worked on for the past few months. Think like it as a mini version of RocketChat that can be embedded into any web application.

At last the component looks something like this,

<RCComponent
  moreOpts={true}
  isClosable={true}
  setClosableState={setClosableState}
  width="100%"
  height="35vh"
  GOOGLE_CLIENT_ID={GOOGLE_CLIENT_ID}
  host={ROCKETCHAT_HOST}
  roomId={ROCKETCHAT_ROOM_ID}
  channelName="general"
  anonymousMode={true}
  headerColor='#F5455C'
/>

UI/UX improvements

We added a headerColor property which will automatically predict if the text and icons should be dark/light. This will help EmbeddedChat get camouflaged as a native component of the parent web application. We also removed the dependency of being fullscreen to show moreOptions rather it can be shown at all times now.

Pinning and starring

This feature helps to pin and star messages using EmbeddedChat and has a different UI (page-like) to showcase the pinned and starred messages of a channel.

Reactions to messages

This feature allows user to react to messages in real-time.

Handling attachments

This is in progress, we are now handling different types of attachments (video/audio/image/docs) but we are yet to work on sending attachments using EmbeddedChat.

Proposing an iframe solution to make it framework agnostic

This method will allow users to use EmbeddedChat without worrying about it being a React.js Component. It is now super simple to integrate EmbeddedChat within minutes.

All the coding stuff aside, I created YouTube videos to make it ever so simple for users to set up EmbeddedChat into their applications. I created some demo repositories showing the capabilities and use cases of EmbeddedChat and making it very easy for developers to integrate it.

Wiki: EmbeddedChat/wiki
For YouTube Videos: EmbeddedChat
Demo Repositories: EmbeddedChat as a component and EmbeddedChat as iframe

Presentation Day (September 8th)

Rocket.Chat organizes an internal “Demo Presentation” for all students. These presentations are attended by almost the entire Rocket.Chat engineering team including the CEO Gabriel Engel and CTO Rodrigo Nascimento. It was an amazing experience presenting the work that I had done over the past three months.
The entire recording is published at Rocket.Chat’s YouTube channel. You can also check it out here:

Presentation slides: Demo Day Presentation Slides
Work product Repository: Google-Summer-of-Code-2022
Test out EmbeddedChat here: EmbeddedChat Demo

Thanks to my mentor!

I will be forever grateful to my mentor Rohan Lekhwani sir for being such an amazing spirit to work with. Just a secret to share here, I had my internal exams around the time of Community Bonding Period and my 4th semester exams around August (10th - 24th) and I was so much worried for them as it was my first offline semester. I had asked my mentor if I could take some days off in between to manage both GSoC and exams and he was so supportive throughout that I got 9.27 GPA in my exams. Also I used to have both personal and professional talks with him about life and career in general which were super helpful for me. He is an amazing person whom I will look up to forever.

Thanks to the entire Rocket.Chat community!

Thank you so much to my mentors - SingLi sir, Duda and Debdut sir for all the support and guidance, it means a lot for any student to get appreciation, criticism and encouragement from their mentors to grow in life. I would also like to thank my friends for being there and making these months not just only about learning but enjoyable too. I hope we stay in touch in the future. Thanks!

To end,

It was one journey that will stay with me for lifetime. I learnt a lot of things - not just coding but beyond it.

What's Next?

I will continue working on adding more features to EmbeddedChat as per user requirements. Next target will be to introduce thread functionality which is the most used feature of RocketChat.

Connect with me:
Email: sidmohanty11@gmail.com
GitHub: https://github.com/sidmohanty11
LinkedIn: https://www.linkedin.com/in/sidmohanty11
Twitter: https://twitter.com/sidmohanty11

Do check out the project, and if you like it you can star ⭐ it too :)
https://github.com/RocketChat/EmbeddedChat

[PART-II] GSoC 2022 | Rocket.Chat | EmbeddedChat

Sidharth Mohanty — Sat, 23 Jul 2022 09:57:00 +0000

This blog is the part-ii of a series where I share my journey in the Google Summer of Code Program, with some tips, learnings, and some design decisions which we (me and my mentor) took to shape the EmbeddedChat Project.

So it's time, first evaluation is coming up (Jul 25th - Jul 29th). I am both excited and nervous at the same time. But let's talk about the usual first.

EmbeddedChat till now (Jul 23rd)

Adding Google Single sign-on Authentication in EmbeddedChat

We had chosen to go with SSO Auth as people visiting web apps are always in a hurry. They don't want to go through so many registration steps or even give their login creds. So we went with this approach, i.e, if someone visits a web app for the first time and doesn't have an account in the RocketChat instance of that company, then they can just click the "Sign in with Google" and an account will be created for them. Also, if someone already has an account in the respective RocketChat instance, then they can also login with just a click.

It seems to be simple at first, but it took a lot of research. At first I thought there must be a library that I could use, right? The closest I got was a library called -@react-oauth/google but it wasn't compatible with how RocketChat Google OAuth endpoint handled requests. It needed both acessToken and idToken but here on successful login we could get either accessToken or code object. The idToken is the JWT hashed version of code object. You can read more about it here. So after a while of research, I started implementing a custom hook which could handle this with the plain gapi-script from scratch.
But, the gapi-script introduced some errors/warnings. So, I went and fixed the code and published my own library around it.

Created a fixed version of gapi-script library called gapi-cjs

So, I fixed the use of eval warnings, jest - test failed error, this is set to be undefined error and published the library. I used it inside of the EmbeddedChat to create the custom hook.

// src/hooks/useGoogleLogin.js
import { gapi } from 'gapi-cjs';
import { useState, useEffect } from 'react';

export const useGoogleLogin = (GOOGLE_CLIENT_ID) => {
 ...
  const signIn = async () => {
    const auth = await gapi.auth2.getAuthInstance();
    await auth.signIn();
    const { access_token, id_token } = await auth.currentUser
      .get()
      .getAuthResponse();
    return { access_token, id_token };
  };
  ...
  return { user, signIn, signOut };
};

In the signin function, we return out the accessToken as well idToken which were needed to call the Google OAuth Endpoint in RocketChat.

There was another caveat we faced, that was RocketChat asks for the username when a user registers an account. So we handled that case also. You can read more about it here - Chapter: Authentication.

Anonymous Mode

So there will be a prop to the component called, anoynmousMode. If the developer or company using EmbeddedChat wants users to read messages without even logging in, then they can set anonymousMode as true and enable anonymous read in their RocketChat instance.

PRs Merged or under review

Issues raised

Documentation

To end

At the end of this month, we will have a fully working product in place (to demo). Then, will move forward to add more features like pinning, starring, threads and reacting to messages.

If you want to connect:
Email: sidmohanty11@gmail.com
GitHub: https://github.com/sidmohanty11
LinkedIn: https://www.linkedin.com/in/sidmohanty11
Twitter: https://twitter.com/sidmohanty11

Do check out the project, and if you like it you can star it too :)
https://github.com/RocketChat/EmbeddedChat

[PART-I] GSoC 2022 | Rocket.Chat | EmbeddedChat

Sidharth Mohanty — Fri, 01 Jul 2022 11:00:00 +0000

This blog marks the start of a series I am going to write, sharing my journey in the Google Summer of Code Program, with some tips, learnings, and some design decisions which we (me and my mentor) took to shape the EmbeddedChat Project.

What is EmbeddedChat?

Think like EmbeddedChat as a mini-version of Rocket.Chat packed in an npm module, as simple as that!

If you need the wiki definition, EmbeddedChat is a full-stack React component node module of the RocketChat application that is fully configurable, extensible, and flexible for use. It is tightly bound with the RocketChat server using Rocket.Chat nodejs SDK and its UI using RocketChat's Fuselage Design System.

Why EmbeddedChat?

It will provide a business solution to every sector of those who want to integrate/embed a chat application in their own application. The fact being, whether its Google Meet, the games you play, or the e-commerce platforms you make, you at some point have thought I really need to chat and ask the other person for more details (in case of a shop, this is the reason why people still prefer to go to an offline store rather buying online) or you want to chat in games and store it for future reference. You don’t have any solution…. Until now!

Rocket.Chat now strives to provide you with its robust solution by providing a simple react component that you can embed in just about any application. With its robust backend connected with its simplistic yet intuitive Fuselage Design System UI, let us worry about setting up functionalities for you. You can just do,

<RCComponent />

provide your custom props and you are ready to go (within minutes)!

Did you think we stopped there?

Nope! We will provide you with an RCAPIWrapper which will be a frontend SDK of RocketChat that can be used within any framework or even vanilla JavaScript.

EmbeddedChat till now (July 1st)

Initialization of the React component library

I will not take much time here, I’ve already shared a blog where I stated how we did so. So, if you are interested you can check that out.

How to create and publish a react component library (not the storybook way)

Responsiveness

Making the EmbeddedChat responsive for all screens was an important task to cover and we added another option where the user can choose if he/she wants a fullscreen or minimized screen.

Connecting to Rocket.Chat server and the real-time messaging functionality

You may have some idea about real-time messaging functionality or heard about web sockets or the third-party providers such as pusher which provide us functionality to introduce real-time connections. “Scaling” these types of APIs requires a lot of engineering and Rocket.Chat has nailed it. It has its own API built on top of MeteorJS and has a concept of “Realtime API” which they have strengthened a lot in the past 7 years.

The EmojiPicker Component

Rocket.Chat uses joypixels emoji, and there were not many npm libraries that supported this anymore. But, luckily I found a cool combination I could use to provide joypixels emojis here and I used it. You need to be good at googling things!

But here is the main part! We thought to ourselves that we really need to parse emojis in the message box because that will improve UX and provide a way for mobile users to use their native emoji set. We were getting a unified property from the emoji picker package which is a 5 letter code that can be converted to an HTML entity by embedding it between &#x; You can check it out here.

Still, we were just using state to control the message value which was ultimately a string. The question was how could we parse this inside of the input box? Yes, dangerouslySetInnerHtml was an option I guess but we researched a bit and at last went with a better way, with a better package called he which is used to encode and decode HTML entities.

Did the story end there?

Nope. The flag emojis were breaking because the package was giving us two unicodes. I and my mentor had a brainstorming session during our weekly catch-up, we discussed the possibilities and how to convert two unicodes into a flag! Then after in-depth research about UTF-8 encoding we found the way. If you come across this, just know flag emojis are a combination of two unicodes. Those two unicodes are letters indicating the country code of countries. You can definitely go with an approach where you store each unicode in a js object and map through it to convert it into a native emoji or you can use String.fromCodePoint. But I found out a much easier way which was just to split the unicodes and embed them between ““, and at last, we managed to get all emojis working with the native ones!

PRs (merged and being reviewed)

[NEW] initialize project and base setup
NEW: issue and pr template
IMPROVE: Responsiveness
NEW: sending and receiving msgs (the oop way)
Parsing emojis in message box

To end

I started maintaining the project wiki and with time I would like to introduce full end-to-end documentation of all features that we are building, including the rationale behind architectural decisions we take. For the next weeks, we are planning to make a Google SSO Auth system that will be totally connected with RocketChat’s Auth environment and then move on to add API features like pinning, starring, and reacting to messages (with emojis).

I was also selected as the community member of the month (JUNE) in Rocket.Chat and I was invited to speak a few lines in their community call. It’s published on YouTube on Rocket.Chat’s own channel. Had a lot of fun. You can check it out here:

If you want to connect:
Email :sidmohanty11@gmail.com
GitHub: https://github.com/sidmohanty11
LinkedIn:https://www.linkedin.com/in/sidmohanty11
Twitter:https://twitter.com/sidmohanty11

A huge shoutout to my mentor Rohan Lekhwani sir! Thanks a lot for guiding me and helping me all the time!

Do check out the project, and if you like it you can star it too :)
https://github.com/RocketChat/EmbeddedChat

How to create and publish a react component library (not the storybook way)

Sidharth Mohanty — Mon, 20 Jun 2022 14:20:52 +0000

Hello everyone! Just some backstory before we start, I got selected for GSoC this year (2022) with Rocket.Chat organization. The project in which I was selected is to create an easy-to-embed React component of Rocket.Chat (like a mini-version of it) that can be plugged into any web application made in React.

Something like this,

import { RCComponent } from ‘rc-react-component’

<RCComponent />

So when I was writing my proposal, I researched a lot about the ways in which we can create a React component library.

As my project demanded that it should be a single component that should be tightly coupled up with the backend features provided by the RocketChat API, I and my mentor decided to go with a traditional approach of creating a React component library i.e, by not using Storybook.

I wanted to share this way, where you can get started with creating a component library instantly and naturally (without worrying about learning any other technology). For a detailed approach about why I chose some things over the others, I will be writing bi-weekly blogs about my progress in the EmbeddedChat project. But for now, let's create a simple counter component.

First of all create a project directory and initialize your npm project with,

npm init -y

Install react and react-dom as peer dependencies by,

npm i —save-peer react react-dom

I went with rollup as my bundler of choice but you can go with any bundler of your preference. I am linking some articles that made up my mind about choosing rollup for creating component libraries:

I have also made a separate repository containing configuration files and example libraries created using both rollup and webpack. You can check it out too if you want to go with webpack.

Now, let's install rollup and all the plugin dependencies

npm i —save-dev rollup rollup-plugin-postcss @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-peer-deps-external

After installation, lets create a rollup.config.js file which will contain our configuration for desired output files. I went with both cjs and esm modules.

// rollup.config.js
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import babel from "@rollup/plugin-babel";
import postcss from "rollup-plugin-postcss";
import external from "rollup-plugin-peer-deps-external";

const packageJson = require("./package.json");

export default [
  {
    input: "src/index.js",
    output: [
      { file: packageJson.main, format: "cjs", sourcemap: true },
      { file: packageJson.module, format: "esm", sourcemap: true },
    ],
    plugins: [
      resolve(),
      commonjs({ include: ['node_modules/**'] }),
      babel({
        exclude: "node_modules/**",
        presets: ["@babel/env", "@babel/preset-react"],
        babelHelpers: 'bundled'
      }),
      postcss(),
      external(),
    ],
  },
];

As you can see we are using packageJson.main and packageJson.module so let's add them,

// package.json
{
...
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
...
}

Install babel and all the required dependencies to work with React.

npm i --save-dev @babel/core @babel/preset-env @babel/preset-react babel-jest

Create a babel.config.js file and add these,

// babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        modules: false,
        bugfixes: true,
        targets: { browsers: "> 0.25%, ie 11, not op_mini all, not dead" },
      },
    ],
    "@babel/preset-react",
  ],
};

For testing, I am going with jest and react-testing-library and these can be installed by,

npm i --save-dev jest @testing-library/react react-scripts identity-obj-proxy

Add the jest configuration file, create jest.config.js and add,

// jest.config.js
module.exports = {
  testEnvironment: "jsdom",
  moduleNameMapper: {
    ".(css|less|scss)$": "identity-obj-proxy",
  },
};

We need react-scripts to run tests and to use it inside the playground for running all the scripts (start, build, test and eject) this will ensure we get no conflicts. identity-obj-proxy is needed because when we will be running tests, jest cannot determine what we are importing from module CSS, so it will proxy it to an empty object of sorts.

We will be needing some more dependencies to run our project and use them in our scripts, lets's install them too,

npm i --save-dev npm-run-all concurrently cross-env rimraf

Let’s add some scripts to run our project now,

// package.json
{
"scripts": {
    "prebuild": "rimraf dist",
    "build": "rollup -c",
    "watch": "rollup -c --watch",
    "dev": "concurrently \" npm run watch \" \" npm run start --prefix playground \"",
    "test": "run-s test:unit test:build",
    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
    "test:watch": "react-scripts test --env=jsdom --coverage --collectCoverageFrom=src/components/**/*.js",
    "test:build": "run-s build",
    "prepublish": "npm run build"
  },
}

Lets create the component now,

Create src directory and inside this create index.js, index.test.js, and index.module.css

// index.js
import React, { useState } from "react";
import styles from "./index.module.css";

export const SimpleCounterComponent = () => {
  const [counter, setCounter] = useState(0);
  return (
    <div>
      <h1 className={styles.red}>Counter Component</h1>
      <div>{counter}</div>
      <button onClick={() => setCounter((prev) => prev + 1)}>increment</button>
    </div>
  );
};

// index.test.js
import React from "react";
import { render } from "@testing-library/react";

import { SimpleCounterComponent } from "./index";

describe("SimpleCounterComponent Component", () => {
  test("renders the SimpleCounterComponent component", () => {
    render(<SimpleCounterComponent />);
  });
});

// index.module.css
.red {
  color: red;
}

Now, when you run npm run build it will create a dist directory with our bundled output files (in both cjs and esm formats) but you definitely need to test your component before you ship, right?

Create a playground app by running npx create-react-app playground. Remember we downloaded react-scripts, change package.json of the playground app as follows,

// playground/package.json
{
    "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "file:../node_modules/react",
    "react-dom": "file:../node_modules/react-dom",
    "react-scripts": "file:../node_modules/react-scripts",
    "simple-counter-component": "file:../",
    "web-vitals": "^2.1.4"
  },
    "scripts": {
    "start": "node ../node_modules/react-scripts/bin/react-scripts.js start",
    "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
    "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
    "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject"
  },
}

This will make use of the react-scripts downloaded in the root and also point to use react, react-dom that’s installed in the root. This will save you from 3 days of headache if you are not familiar with how npm link works, and will throw an error that different react versions are used in your project and hooks cannot be used etc.

Now do an npm install in the playground, and you are ready to go.

Use your component inside the playground,

// playground/src/App.js
import { SimpleCounterComponent } from "simple-counter-component";
import "./App.css";

function App() {
  return (
    <div className="App">
      <SimpleCounterComponent />
    </div>
  );
}

export default App;

Go back to the root directory and run npm run dev it will open up the playground application and you can do your changes in the component while watching the changes reflect real-time in the playground environment.

Now for publishing your component, make sure you use a name that has not been taken yet. After you come up with a name, you can use it in package.json's name attribute.

You can just do npm publish to publish your package, but it can show you an error if this is your first time. You need to create an account in https://www.npmjs.com/ and after that login using npm login in your terminal. After you’ve successfully logged in yourself, npm publish!

You can further improve your project by adding ESlint, prettier, terser-plugin (to minify) etc. which I am not including in this blog.

Last important thing, make sure you are shipping only the required module and not everything. This will heavily determine the size of your package. So if you want to just ship the dist directory, add this in your package.json.

// package.json
 "files": [
    "dist"
  ],

Checkout the repository here.

Hooray! Our package has been published. You can do npm i simple-counter-component to check it out. To manage semantic versioning, you can use a great library called np.

Please let me know the things that can be improved in the comment section below. Thank you.

If you want to connect:
Email : sidmohanty11@gmail.com
GitHub: https://github.com/sidmohanty11
LinkedIn: https://www.linkedin.com/in/sidmohanty11
Twitter: https://twitter.com/sidmohanty11