Forem: Mohit Yadav

PeopleNotes - Release notes for People!

Mohit Yadav — Mon, 05 Jan 2026 07:48:41 +0000

This is a submission for the DEV's Worldwide Show and Tell Challenge Presented by Mux

https://player.mux.com/cHBVSO9xA01kbcgdGOz5iV2T53DJijMHdhgNJFgb3Qys?metadata-video-title=PeopleNotes&video-title=PeopleNotes

What I Built

My Pitch Video

Demo

The Story Behind It

Technical Highlights

Use of Mux (Additional Prize Category Participants Only)

Introducing ✨ Relano - Create beautiful "What's new" videos and automate your project's social media!

Mohit Yadav — Tue, 23 May 2023 23:55:57 +0000

✨ What is Relano?

Relano is a GitHub action you could add to your repository to automatically create 'what's new' videos as soon as you publish a release!

Just add the GitHub action to your workflow, pass in the openai-api-key and the release-notes variable, and publish a release. Relano uses OpenAI to come up with a summary of all the changes in the published release, and passes it to our renderer for creating a beautiful video!

📸 Example Output

An example from the remotion-dev/remotion release version 3.3.93.

(Video not loading? Click here: youtu.be/mkGqYsmVpHc)

This video was created automatically without any other inputs.

🛠️ How it works

A very simple explanation of how to use the Relano and how it works:

(Video not loading? Click here: youtu.be/mkGqYsmVpHc)

🤩 Use this action in your GitHub Projects

💫 Background, and why I created it

I saw a lot of open source maintainers struggline with community management. For example, popular open source projects like plaiceholder are run by people who have a day-job, and don't necessarily have the time to keep their community informed about what's new!

🧓🏼 How it all started

When I was talking with Jonny Burger (the creator of Remotion) about the challenges small open source projects face and how it becomes harder for individual maintainers who work because of their goodwill to carry their project forward, I did not realize the conversation would give birth to the idea of Relano.

It all started on a discord chat, when I was casually talking with Jonny. We somehow got to the topic of what it is like being an open source maintainer. Though I knew Jonny had a team behind Remotion to help manage the day-to-day operations of open source, I soon realized it would have been hard for individual contributors to do open-source part-time, just as well as Jonny and his team did, without the resources they had.

🥷🏼 The Hidden Challenges

Maintainers pour countless hours into coding, debugging, and ensuring their project's stability. However, there's always this one aspect that eludes their attention – community management. In the midst of programming, fixing issues, and creating roadmaps, finding the time to engage with the community, communicate updates effectively, and provide the necessary documentation became a big problem.

🥲 Struggles of a Solo Maintainer

Solo maintainers or small teams have to cope up with so much for open source projects, and it becomes clear that keeping the community informed about latest releases often falls through the cracks.

🤩 Relano bridges the gap

I'm pretty well versed with react and Remotion, and there's a new opportunity to tackle, I thought to myself. That's when the idea for Relano materialized – a tool that would empower maintainers to effortlessly create captivating "What's New" videos for their projects' latest releases.

🧑🏼‍🔧 How it works under the hood

Converting an idea to reality was one of the most interesting parts of the process! No matter the outcome, the learning experience has to be worth it! Let me take you through the journey of how I created Relano, and how it works!

🤌🏼 Publishing a release triggers the action

The action listens for the release event, and gets triggered when a new release is published, or an existing release is edited.

This starts the video-creator job, using the suitable environment which has the secrets:

Out of the few steps required to run Relano, one of the steps is the Relano action. It takes 4 inputs relating to the current repository, and uses them to create a video.

🤖 OpenAI for summarization

The release notes are passed down to OpenAI to extract the most useful information, which is finally used to create the video.

For this, we use the chat mode, since it has a better interface for defining instructions and content. The OpenAI prompt reads something like:

This creates yaml with the following format:

This yaml is then converted to json using an open source library–yaml.

🤯 Rendering the video

After the OpenAI command completes, we get to the actual video creation step. Here's where GitHub actions really shines!

The input from OpenAI as JSON is passed onto the Remotion Composition as input props! These parameters are what constitute the information for the final video!

You could even copy the parameters over, clone the Relano repository, and paste them as props to the composition, and you'd be able to preview the video in the Remotion UI:

Remotion converts the videos to chunks, then renders them multithreaded on GitHub Actions runners!

To learn more about how remotion renders videos on the server, checkout the docs: remotion.dev/docs/ssr

The video is finally available, uploaded as an artifact after the workflow run!

✨ Posting to social media!

Keeping users informed about the latest changes is one of the best things a maintainer could do to keep the community thriving and exited! After downloading the video, upload it to your project's social media!

💁🏼‍♂️ Additional Resources/Info

I took inspiration from the following sections to create the video:

Reanimated update video on remotion showcase page - design inspiration
William Candillon's Song of bloom for audio inspiration

📂 Category Submission:

The project fits into the following categories.

Wacky Wildcards - Pretty wild what Relano is using GitHub actions for!
Maintainer Must-Haves: This makes the life of maintainers easier and lets them focusing on the thing they do best–creating awesome open-source tools! Relano assists in the community management part!

🔗 Links

The source code lives here: https://github.com/Just-Moh-it/Relano
Checkout the GitHub Action on the marketplace: https://github.com/marketplace/actions/relano-automated-what-s-new-videos
See this GitHub action being battle-tested over on Remotion's Discord server: https://discord.com/channels/...

💼 Permissive License

The workflow is licensed under the MIT license. Use however you want! 🔥 Remotion's license applies to mid-to-large-size commercial organizations using the action.

How to serve any website from your own domain (for free!)

Mohit Yadav — Sat, 13 Aug 2022 23:10:00 +0000

Have you ever wanted to white-label a website, like display it on your own domain? Or have you wanted to remove a watermark from a website that asks for premium (for edu. purposes ofc.)?

Well, this guide contains everything you need to know to proxy a website/webpage on your custom domain/subdomain! Let's just get into it! 😃

🔥 The Backstory (reading optional)

A few months ago, I got my own domain from Google, and have been putting up things on it for a long time. Though, when it comes to social media, I wanted to show a links-in-bio page, not my personal portfolio page.

I looked into some solutions. Found a few websites like short.io that allow you to shorten links and make them visible on your domain base, but they're paid and provide little room for customization. And the ones that did provide awesome features were mostly paid.

So I was left with no choice but to go with the standard-solution: mainstream websites like bio.link or Linktree[https://linktr.ee]. I got my links up on it, customized it to just how I wanted, and it looked really cool.

But since I consider myself somewhat of a perfectionist (an understatement, sometimes), and like to bring something unique to the table, I thought about a way to serve the bio-link page on my own domain.

⚖️ But why? A few pros and cons

There are a few 👍 pros to hosting a domain! Just to name a few, for me, it was to ability to:

Makes your link-in-bio page look unique: Unlike pages that are bio.link/username, the custom-domain page looks very professional, just like how your portfolio on youdomain.dev looks better as compared to 3p-domain.vercel.app
Have total control over anything served over the domain: Remove watermarks or modify existing content pretty easily!

Cloudflare Workers' specific pros:

Analytics - Cloudflare tracks every request through its proxy, so you could have a direct idea about where your domain visits are coming from, and how they're reaching your website.
Caching (Faster loads) - Cloudflare also caches every request that goes through its DNS proxy, so a slow SPA could easily benefit on subsequent requests from the same user, right out of the box (though it's disabled by default)
Increased Uptime, even when the source is down: In case the source website goes down for a short time, the content served over the domain would still work flawlessly, given that it was recently cached.
Load Balancing - You could randomly fetch from 2-3 different sources and get a very basic version of load balancing.
Bypass account's free limits - For example, if you have 2-3 accounts on Vercel hosting the same exact website, you could easily modify the worker's code to randomly fetch from any one of them. This way, you could evenly distribute the data usage between the accounts and not hit the free-account limit on the source website (though this might be against the fair use policy).

👎 Cons

It's important to note the downsides of this as well

Might not work on every website - Well-engineered web-apps like Google's auth platform could easily detect if the receiver (in this case, Cloudflare's servers), are the end users of the request. This way, they could prevent kind-of man-in-the-middle attacks. But 99% of the websites won't have problems like these.
Adds an extra layer - Though this is pretty unnoticeable, since the responses are un-cached, but basically, since all the data goes through a third-party (Cloudflare), the resource per request usage also increases.
Could get pretty expensive (sometimes): If your usage stats are out of the roof, and you get more than 100k request per day, subsequent users could face errors if you're on the free plan, till the quota gets reset.

But hey, for light usage and very typical use-cases, chances are that these cons won't matter. In fact, with features like caching and simple analytics, the pros would certainly outweigh the cons.

🙋‍♂️ But what is 'Cloudflare Workers'?

Glad you asked! According to Workers' docs

'Cloudflare Workers' provides a serverless execution environment that allows you to create entirely new applications or augment existing ones without configuring or maintaining infrastructure.

It's basically a way to run serverless functions, just like AWS Lambda or Google Cloud Run, but with a few small differences.

Cost: At the time of writing this article, it has around 100k free requests per day (more than enough, even for very famous webpages).

🚶‍♀️ A Step-by-Step Guide

This guide assumes you have no/little prior knowledge about Cloudflare and Cloudflare Workers. Though if you're pretty experienced, this guide doesn't compromise on quality over simplicity. 🙃

Create your Cloudflare account and add a domain (optional)

Follow the usual instructions on configuring the domain's nameservers, as illustrated in their 'adding a site' docs!

If you aren't managing your DNS through Cloudflare, point the domain to Cloudflare's servers. Read their docs for more info.

Add your Cloudflare worker Route

Add the catch-all domain/sub-domain

Click "Manage Workers", and create a new worker Service.

Select the second option (HTTP Router) when creating the worker, since we don't just want to send a simple response

Open the web code-editor to quickly edit the Cloudflare Worker logic

Edit/Paste the code, and preview

Edit the default code snippet that's already in the editor, or add the following:

addEventListener("fetch", (event) => {
  event.respondWith(
    handleRequest(event.request).catch(
      (err) => new Response(err.stack, { status: 500 })
    )
  );
}); 

/**
* Many more examples available at:
* https://developers.cloudflare.com/workers/examples
* @param {Request} request
* @returns {Promise<Response>}
*/

async  function handleRequest(request)  {
  return fetch("https://justmohit.bio.link");
}

Assign the custom domain to your worker

And that's it!

🎉 Reap the Benefits: Analytics, Caching & Custom Domains

We can now access the contents of justmohit.bio.link at links.mohitya.dev. Heck, we even get simple analytics, without the option being enabled by the bio.link team!

Also, get instant feedback on anything the server sends, including status codes, requests, etc. and the data is persisted for weeks at end in the free tier!

😱 Taking it to the next level: Edit response HTML

We could change the Cloudflare Workers code in order to change the response that is displayed to the end user!

For example, we could use it to our advantage (for educational purposes only, of course) by removing a watermark on a website that requires a premium subscription to remove it.

You could find more info on how to modify response content using Cloudflare Workers on their HTML Rewriter docs

🙈 A few Alternatives

Though I'm not fond of paying for a webpage with such a low view count, I'd still like to highlight some alternatives:

Paid: Ably.host - Host any website on your subdomain within a few minutes (no-code alternative)

Free: Self-hosted Nginx - (If you want to manage everything)

Nginx could be easily used as a reverse proxy, for routing both internal, and external traffic! Learn more

👋 That's it!

Thanks for reading along! Let me know how/what you're using this for, if you've tried to follow along! Till then, see you later...

Accidental post

Mohit Yadav — Thu, 12 May 2022 16:30:56 +0000

Ah, I was just trying posting stuff from different mediums, so here's this article and turns out, there isn't a delete button in here 😆 #ForeverSufferings.

Btw, if you're here, thanks for checking out my profile since I'm sure you didn't get this in your recommendations and I don't know how to get rid of this post lol bye buddy

Introducing 🕷 Spitey-Sense: Simulate conversations with Spider-Man using 🪄 GPT-3 and Deepgram ☘️

Mohit Yadav — Mon, 11 Apr 2022 23:49:29 +0000

🚀 Introduction

Hey there! 👋 Have you ever wanted to talk with your favorite superheroes, but either they're they're unreachable, or they're too busy shooting for their next blockbuster?

Well, with 🕷 Spitey-Sense, you could interact with a simulated version of Peter-Parker! The idea is simple; OpenAI's GPT-3 was trained (or fine-tuned) using scripts from various Spider-Man movies, and the AI was able to learn from Peter Parker's personality. At the end, it was able to predict exactly what Peter Parker would have said if he was asked something.

For example, GPT-3 classifies Peter's personality to be having a sense of soft humor, and a feeling of responsibility. Therefore, the AI would generate responses to your conversations exactly/mostly like how Peter Parker would have.

The goal of this project was to create an interface to seamlessly communicate with the AI engine and show responses to statements in real time, using web-sockets, along with training the model to act in the required way.

🪄 Demo

As soon as the user opens up the website, they're greeted with this landing page, from where they could open up the menu, or dive right into the fun part (talking)

Upon navigating the /chat route, users are asked to give microphone permission to the app so that they could interact with the AI. A web-socket connection is created with the backend, and the audio is constantly monitored.

If the user doesn't speak for a few moments, the conversation till now is sent to the OpenAI model, and the AI replies exactly how Peter Parker/Spider-Man would have.

🏋️‍♀️ Training/Fine-Tuning the AI Model

As for the model, I used the Text-DaVinci-001 model, since it is the most powerful General Purpose Artificial Intelligence model out there, and has the highest number of parameters. Also, it's pretty expensive, but is worth it.

For the data, I scoured the internet for scripts, tried fruitlessly to extract information from the PDF script files I got from movie databases, however, it was a nightmare to classify and sort the data according to the requirements. The number of space, tabs, etc. had to be considered, and they often overlapped. Therefore, I continued my search for a better solution.

💿 Getting access to a dataset

After visiting many movie-db sites, I saw an article where someone created a character-simulation using a dataset from Kaggle. I just found what I needed... I quickly downloaded the dataset, and it contained script data for around hundreds of titles. Once I found a super-hero movie, it was time to extract the data from .csv data format.

For this purpose, I used 🐼 pandas, and loaded the data from the multiple files, which were partitioned like a relational-database, with unique and foreign keys for each movie, character, etc. I sourced the conversations file, then extracted the plain text lines along with the people speaking those, and finally, fed them into the model. At the end, I was able to finally get around 80-90 lines which had either Peter Parker, or Spider-Man as an active speaker.

I fed them into the model, and though the waiting time was around a few hours, I was finally able to get the custom-model up and running.

🏆 Deepgram's Role

Deepgram plays an essential role in the whole lifecycle of the app. From providing the first medium of contact with the app, Deepgram seamlessly transcribes audio in real time with almost unnoticeable latency, along with quotations, punctuations, etc. so that the AI model could analyze the tone of the sentence.

Therefore, Deepgram is an integral and irreplaceable part of the app due to its various awesome features.

☘️ Submission Category

Analytics Ambassador: Because the app uses Deepgram to analyse expressions in users' voices (inhances inputs with puntuations) and also makes it accessible for people with low-vision/motor disabilites to interact with the AI without typing a word. The recording is sent in real time and the backend analyses it to convert it to a textual transcript.

🥳 Useful Links

Here are some useful links you may want to access:

🏖 Main Links

Project Demo Link: Web Demo
NextJS Web Interface + API Source Code: On GitHub

🦾 AI Links

Source Code for training data: On GitHub
Fine-Tuning GPT-3 Instructions for DIY: OpenAI Guides

🏡 Miscellaneous Links:

Source Dataset: From Cornell University
Design Inspiration: From Dribbble

Top 7 VS Code extensions 🤓 almost nobody knows about

Mohit Yadav — Mon, 07 Mar 2022 18:14:32 +0000

As a developer, you're most probably using Visual Studio Code on a daily basis. But did you know that there are tons of extensions out there that can make your life a lot easier and take your productivity to another level?

I have a lot of VS Code extensions. Some are indispensable, some are good to have, and some become irrelevant because I'm no longer learning the language I downloaded it for.

Today, I'm going to list my top 7 extensions that I think are underrated and unknown to most developers.😍

Top Unknown VS Code extensions

Bonus: At the end, there is a bonus extension, so be sure to check it out.

Now, starting off with the 7th one,

7: P42 JavaScript Assistant

As the website says:

The P42 JavaScript Assistant adds 68 automated refactorings and quick fixes for JavaScript, TypeScript, and React to Visual Studio Code.

Here's another demo:

There's also a sidebar, so you could see the refactors your poor code needs, all in one place!

6: Office Viewer

"Show me the demo first!" Here you go:

A really helpful but annoying extension that allows you to view major office format like:

Excel: .xls, .xlsx, .csv
Svg: .svg
Pdf: .pdf
Font: .ttf, .otf, .woff
Markdown: .md
HttpRequest: .http
PlantUml: .puml, .plantuml
Windows Reg: .reg

Now that's crazy. But you may want to disable this for certain file types (like .md), read the extension description to know more.

5: Indent line (5k downloads)

This extension fixes all indentation issues with a single shortcut. What is better than seeing it for yourself? Here's a demo

But why need it when you have prettier? There's a reason. As far as I know, prettier does not format python code, but this extension supports many languages that prettier does not.

4: Polacode

Ever wanted to present your code to someone or some platform, but it looks ugly? A great alternative to Carbon, it automatically detects the language, highlighting, etc. and presents a picture-perfect version of your code.

Don't use it to share your company's code though :)

3: Toggle Quote

Ever typed a string with " and wanted to convert it to a template literal with ` or to '? Why move your cursor back and forth? Just press a simple keyboard shortcut to toggle through these quotes.

I hope you get the idea. This is pretty useful for me personally, since I mistakenly write the " and then remember to use `

2: Bracket Padder

A simple package that provides smart whitespace padding and closing of bracket pairs: () [] {}. Even though prettier does it automatically, it also supports languages like python, go, etc. which prettier does not support.

A must-have to increase readability.

1: Toggle Case

This is one of the most useful extensions on the list. The thing it does might sound very basic, but combined with VS Code's awesome features, it could save a lot of time.

It becomes awesome when dealing with multi-cursor text, where it could convert case for multiple instances to ones, saving a lot of time. It also converts text like foo bar to paths like foo/bar. A must-have for every programmer.

Bonus! Hot dog stand

Get the joke?.

OK, let's start the pitching.

Have you ever wanted to burn your eyeballs within seconds!? Well now, you can! With ho... Oh, wait. No one in their healthy minds would want that!

Wrapping it up

Thanks for reading! If you are looking to take your VS Code experience to the next level, be sure to check out some of these extensions. Also, I'm going to post about a really cool project soon, so stay tuned.

You know the drill. If you found this post helpful, please share it with your friends and followers. And if you have any questions or comments, please feel free to leave them below.

Until then, happy coding!

^{(This post was cross posted from my trending Hashnode Blog, so sorry if you've already read this, and I took up some part of your feed real-estate 😅)}

Introducing Pckd - The most powerful 💪 URL shortener

Mohit Yadav — Thu, 03 Mar 2022 12:01:45 +0000

Overview of My Submission

This month, I saw the Azure + Dev.to Hackathon 🤩 and immediately knew I found the excuse to spend my time bringing my prolonged idea to life.

What exactly is 🔗 Pckd?

Have you ever wanted to share a long link with a friend, but it seems way too long to send through a message (maybe it's a base-64 image URI), so you might turn towards URL shorteners, nothing special?

But try to imagine, along with the shortening functionality, what if you could have a lot more. I mean, track all the clicks (or hits) on the URL that you shortened and get very-deep insights about the person who clicked it, like:

Their 💻 device information, including model, operating system, etc.
Their 👩‍💻 browser name and version
Their 🌎 IP location, along with their ISP name, their city, rough coordinates, etc.

And much more! 🤯

And to add the cherry on the top, you could host it yourself on your custom domain! In fact, it was created to be self-hosted, for people on the self-hosted community

Doesn't that sound like the time to switch from Bitly and stop paying the premium, or being limited by 100 links/month?

Submission Category

Computing Captains: Since this app is hosted on an azure virtual machine.

Creation process 👩‍🎨

The creation process was undoubtedly the most fun part of the project. I solved many new challenges, learnt a lot, and finally came up with an application I was proud of! Here is how I pulled it off...

Designing 🎨

Usually when I create a pet project, I just use the designing from the previous projects I was working on, since they won't get noticed anyway. But with this one, I wanted it to reach to the top of the list of open source URL shorteners. I had self-doubts about whether I would be able to reach the goal with my experience, but you are free to judge.

Inspiration ✨

So, I started by looking for inspiration. The best place for this was Dribbble. I went to the inspiration tab. Many people would create the best design they could without any inspiration, but as Pablo Picasso (may have) said:

Good artists create, great artists steal

That's one way to put it, but the point is: with the amount of design experience and the height of the goals I had, I just wasn't going to be able to create a good-enough design overnight if I started from scratch. Hence, the searching.

After endless scrolling, similar-sounding keywords and hard-to-make choices, I decided to go with this design, because it just looked great for the purpose I was looking for. There were many fancy ones too, but they just weren't practical, or too flashy for the typical programmer that was going to host it (if Pckd was even going to be successful).

Customizing 🍕

The original design from Dribbble was good, but it wanted something more, like the colour customization, planning out exactly where everything would go, and creating an exact mock-up of how the app would look and much more. Therefore, everything was already planned out before I touched any code.

I find this approach very useful, because you don't have to scratch your head over minor details that would otherwise go unnoticed while planning, and you have to go to the sketch board all over again if you've started coding.

Dashboard 💾

I again went on to Dribbble to find some dashboard designs. I got some that caught my attention. After that, I went to Figma and started laying out the design

After endless scratching of heads, I got this:

(One of my proudest creations 😎)

Other pages 🗞

As for the other pages, I created the homepage out of just my imagination. Here's how it looked:

And the signup pages:

The designs looked good in my opinion, and I was dead-set to implement the most design-accurate version of this with react and try to not mess up the margins or paddings somewhere. This marked the end of the designing and planning part of the app.
Not bad, right?

Setting up the backend 🧩

For the backend, I started out by forking a backend template repo (made by me ;), because it contains a file-based structure, just like NextJS, but for the backend. It also has authentication baked in, so one doesn't have to go through the hassle of setting everything up.

The database schema 💾

OK, I want to have a hits table, a user table, and..., and that's it. Oh! Forgot the pckd table, the main one! After all these thoughts back and forth in my mind, I was ready with the following database schema

I created the database through the Prisma schema, and it ended up working great.

The file structure 📁

This is how the finished file structure looked like:

Adding a new route was just as easy as creating a new file in the directory, like for the user type, api/User/index.graphql file needed to be created. This is how it looked like:



type User {
  id: ID!
  pckds: [pckd!]
  name: String!
  email: String!
  createdAt: String!
  updatedAt: String!
}

And For the resolving the users' pckd logic, in the api/User/index.js file:



module.exports = {
  User: {
    pckds: async (parent, args, { prisma }) => {
      const pckds = await prisma.pckd.findMany({
        where: {
          userId: parent.id,
        },
      });
      return pckds;
    },
  },
};

As simple as creating an export file. You should definitely try this method of creating backends out. Little boilerplate, powerful APIs. 😃💪

Achieving this functionality ⛽

For combining the files and graphql schemas, and create a single instance of typeDef and resolvers, I used the following code



const path = require("path");
const { loadFilesSync } = require("@graphql-tools/load-files");
const { mergeTypeDefs, mergeResolvers } = require("@graphql-tools/merge");
const { makeExecutableSchema } = require("@graphql-tools/schema");

const typeDefs = loadFilesSync(path.join(__dirname, "/api/**/*.graphql"));
const resolvers = loadFilesSync(path.join(__dirname, "/api/**/*.js"));

const schemaWithResolvers = makeExecutableSchema({
  typeDefs: mergeTypeDefs(typeDefs),
  resolvers: mergeResolvers(resolvers),
});

module.exports = schemaWithResolvers;

This would combine all the files ending with the .js and .graphql extension from the api and it's sub-folder into a single typedef and resolvers variable, and export them as schema.

Querying the backend 💬

For those who are new to GraphQL or haven't used apollo GraphQL before, Apollo provides a great interface for testing and creating queries, just like postman, but for Graphs, and much more powerful.

And creating APIs with GraphQL never gets easier

Setting up the frontend ⚛

For the frontend, I used React with the Create-react-app template, because it was easiest to work with, and I didn't use NextJS because the app didn't have much about SEO.

Along with react, I used Redux, and Apollo-graphql-client to query the backend, because the global state was shared across multiple components. Also, I wanted to learn Redux, and what other way to learn than to implement it yourself. (But it turned out to be an overkill 😅).

The typical React development pattern continues... At the end, I had a polished URL-shortener application that was fully customizable (upto the name) and ready to be deployed. Let's go!

Hosting it

For hosting the web app, I used azure VMs, as per the instructions. I created a B2s virtual machine, installed nginx, MySQL, NodeJS, NPM and cert bot, then ran the NodeJS server.

The React frontend was built to a static file, which the backend served itself. I only had to set up a nginx proxy pass to redirect internet traffic from external port 80/443 (the web traffic port) to internal port 4000 (NodeJS server port).

Here is how my default configuration file looked like:



server {
        listen 80 default_server;
        listen [::]:80 default_server;

        server_name _;

        location / {
                proxy_pass http://127.0.0.1:4000/;
                proxy_http_version 1.1;
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
                proxy_pass_header  Set-Cookie;

                proxy_set_header   Host               $host;
                proxy_set_header   X-Real-IP          $remote_addr;
                proxy_set_header   X-Forwarded-Proto  $scheme;
                proxy_set_header   X-Forwarded-For    $proxy_add_x_forwarded_for;
        }
}

(The SSL part is not included). Then I exposed the ports 80 and 443 from the azure portal, and the app was open for the world to access.

Try it yourself

Here are some useful links you would need:

🚀 Project Demo - https://pckd.mohityadav.codes/devto-demo
🐱 GitHub Repo - https://github.com/Just-Moh-it/pckd

I hope you liked the blog. If you did, please leave your thoughts in the comments. It would make my day.

Till then, happy 💻 coding! 🍿