DEV Community: Neeraj Mukta

Copilot Taught Me NextJS 15

Neeraj Mukta — Thu, 07 Aug 2025 06:24:26 +0000

How GitHub Copilot Taught Me Next.js 15: From Confusion to Production-Ready Code
When I returned to Next.js after a long break, I was overwhelmed by the new App Router, async APIs, and React 19 features. Copilot (and Claude Sonnet 4.1) became my guide. By providing clear context and expectations, I received code that not only worked but followed modern, production-grade patterns. I learned more from Copilot's suggestions than from hours of reading documentation.

How Copilot Helps You Learn Modern Patterns
Design Patterns & Strategies: Copilot is trained on a vast corpus of public code, including open-source projects that use industry-standard design patterns and idioms. When you prompt Copilot, it often suggests code that reflects best practices and modern approaches.
Learning by Example: Copilot helps you learn by example, showing you how to structure components, use hooks, and implement features the way experienced developers do.
Copilot and Production-Grade Code
Code Quality: Copilot generates code that is syntactically correct and often idiomatic. It follows the conventions of the frameworks and languages you use. For Next.js 15, it understands the new async APIs, caching changes, and React 19 compatibility, as described in the Next.js 15 release notes.
Modern Patterns: For example, Copilot can suggest the new async usage for cookies, headers, and other APIs, and help you migrate to the latest best practices (like using the codemod CLI for upgrades).
Caveat: While Copilot is powerful, it is not infallible. Always review, test, and refactor its suggestions, especially for security, performance, and edge cases.
Copilot for Next.js 15 and New Syntax
Up-to-date Knowledge: Copilot is regularly updated with new code patterns. For Next.js 15, it can help you adopt breaking changes (like async request APIs, new caching defaults, and React 19 features) much faster than reading docs alone.
Migration Help: Copilot can assist with code migrations, such as updating route handlers, using the new

component, and configuring next.config.ts with type safety.
Why Copilot Writes Production-Grade Code
Trained on Real-World Projects: Copilot's training data includes production repositories, so its suggestions often reflect real-world, scalable solutions.
Context Awareness: In VS Code, Copilot uses the surrounding code and your comments to tailor its output, making it more likely to fit your project's architecture and style.
Prompt Engineering: The more context you provide (file structure, comments, function names), the better the output. This is why Copilot can generate code that feels like it was written by a senior engineer.
Action Steps: How to Get the Best Output from Copilot in VS Code
Write Clear Comments: Describe what you want before you start coding. Copilot uses your comments as context.
Provide Examples: If you want a specific style or pattern, show a small example in your code or comments.
Use Copilot Chat: Ask Copilot to explain code, refactor, or generate tests. Use it as a pair programmer, not just an autocomplete tool.
Review and Refactor: Always review Copilot's suggestions. Refactor for readability, performance, and security.
Stay Updated: Keep your Copilot extension and VS Code up to date to benefit from the latest improvements.
Leverage Docs: Use Copilot in conjunction with official documentation (like Next.js docs) for the best results.
Iterate: If the first suggestion isn't perfect, ask Copilot for alternatives or tweak your prompt.
Proofreading & Feedback (Engineering Manager Perspective)
Strengths:

The article is honest about the learning curve and the value Copilot brings.
It provides actionable steps for readers to get the most out of Copilot.
It references official documentation and release notes, making the claims credible.
Areas for Improvement:

The introduction could be clearer and more engaging.
Some sentences are run-on or have minor typos (e.g., "I actua;;y learnt").
The article could use more structure (headings, bullet points) for readability.
Add a summary or conclusion to reinforce the main message.
Final Thoughts
GitHub Copilot is more than an autocomplete tool—it's a learning partner and productivity booster. For anyone navigating major framework changes (like Next.js 15), Copilot can accelerate your learning and help you deliver production-ready code faster. Just remember: the best results come from collaboration, not blind trust.

Bharat general elections 2024 and the paradox of success

Neeraj Mukta — Sun, 05 May 2024 13:00:04 +0000

I will be 28 years old by the end of this year i.e. 2024. And by no measure, do I consider myself a successful person. Success as we all know is a relative metric. For a poor beggar it is to beg a day enough to survive the day, for a rickshaw driver success is to make enough money to provide for the family, for an aspiring youth it is to get a job, for a corporate employee it is to become the boss, for the boss success is well to become a super boss and so on.

Do you see a pattern? Success gets redefined every time we achieve it and it’s like a never-ending path that we embark on from the moment we are born.

But, what is common between Bharat elections this year and the paradox of success?

Before, getting to the elections I would like to talk about the “Paradox of success”. Most of us believe that becoming successful will make us happy, and feel respected and loved by the people around us. To be honest it often does but success also entails ‘ENVY’. The very feeling that makes childhood friends writing an exam bitter when results are declared, despises the person doing well or working hard in life. Sometimes, you don’t even have to be successful to feel the bitterness and jealousy from such people around you just a little spark, a small step towards that path is enough. I know it exists because I’ve felt it throughout my school days, college days, and corporate journey and you must have too!

Too much or even too little success can break life-long friendships, and families, jeopardize your career, and make you a lonely person wondering what went wrong.

Trust me if you value or crave certain people in life, it’s better to avoid success or to hide it from them.

As we all hear that Bharat is a developing country, she is working hard to match global standards of living, healthcare, infrastructure, military & defense, manufacturing & services, etc.

Bharat is a nation aspiring to share the table with developed nations. A patriot (or a naive) person like me would think that nations sitting at the top will lend a hand and help us reach there. But is that the case? Who will benefit from having another developed nation on the earth? What does Bharat has to offer to the world? These are questions raised when someone talks about a developed and prosperous Bharat. Now, who might ask such questions? You can take a guess, someone who is envious and afraid of our progress. These people are present both inside and outside the Bharat.

It saddens me and at the same time makes me chuckle when I see rising hate for my nation. A nation that just wants to elevate its citizens. This hate only gets worse with time. When a 3rd world country filled with poor and snake charmers suddenly comes out and helps other nations during a pandemic. When it decides to take a stand for itself and push back the terrorism.

The propaganda and false narratives are at their peak against my nation. The attempts to tarnish Bharat’s achievement in the last 10 years are rampant. These attacks against our sovereignty are launched by both internal and external actors. What does it signify? Why a democratic country is constantly targeted by a dictator-run country or a deep state-run country?

I think the answer is simple, “Paradox of success” i.e. envy. Envy that Bharat might become better than them. Everyone loved Bharat when we were weak and poor. The moment we started walking the path of progress, that love started to fade, we were still too far so the hatred was hidden but it always existed. As we are getting closer and closer to our goals the fear and the jealousy among the peer nations are also peaking. Ladies and gentlemen, Bharat General Election 2024 is that crucial step that will catapult us to a new trajectory, and of course, some developed nations will not like it.

I don’t know the answer to this paradox or rather human nature of enviousness but my guess is it is all because of evolution and conditioning that life is a zero-sum game. I’m most certainly sure that it is not.

The lesson is simple:

"Every time someone sneers at you, tries to belittle you, just smile and tell yourself, “I’m most certainly on the right path to success & start running on that path.”

[React Native Guide 2024] Part 1: Builds and flavors.

Neeraj Mukta — Tue, 23 Apr 2024 04:10:06 +0000

“Before building an actual rocket, one should build a prototype. Before experimenting on the actual rocket, one should experiment on the prototype.” - not elon musk.

Update: react-native-config breaks with latesst react-native 0.74

Source code for the impatients.

Almost all of the web apps I have ever worked on had some sort of dev/prod parity setup. The larger teams and codebases even had more build types like local, QA, preprod etc. And it does make sense to separate out your main build from the one being actively developed. It is also in conjecture with 12 factor app philosophy.

In the mobile apps world, we follow something similar called build variants. If you’re not aware of it please read this blog first. It explains buildtypes and productflavors in detail. To put it in simple words. We have something called Build types, Product flavors cross product of the two gives us Build variants.

💡 BuildTypes * ProductFlavors = BuildVariants

The way it works in react native is also similar, we define buildTypes and productFlavor in app/build.gradle file. BuildTypes usually represent debug and release mode bundle whereas ProductFlavor is further divided into two more axis.
One axis is our environments like local, dev, qa, test, prod, etc. and the other one flavorDimensions, which is optional but useful in apps that have for ex. free and pro versions with almost similar code, or uber like separate apps for the riders and the drivers. You can enable flavors and write conditional code which gets built and compiled based on productflavors and flavorDimensions.

Now that we’re clear about build types and product flavors let’s set it up in a new RN project.

Step 1: Create a new RN project using React-native cli.

 npx react-native@0.73.6 init MyApp --version 0.73.6

Step 2: Install react-native-config package

cd MyApp **&&**  npm i react-native-config

Step 3: Define config for the build types, product Flavors in app/build.gradle.

Add the following lines in the same file in the defaultConfig block. This will be applied to all the

buildVarirants and we can also override these values.


 defaultConfig {
        resValue "string", "build_config_package", "com.myapp"
        resValue "string", "build_config_package", "com.myapp"
        applicationId "com.mmadmin"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode project.env.get("VERSION_CODE").toInteger()
        versionName project.env.get("VERSION_NAME")
 }

b. You’ll notice buildTypes already exists. You can add/edit the configuration related to the specific bundle for ex. enableHermes option or enable source map. We’ll leave it as it is for now.

buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

c. Let’s now define flavorDimensions and productFlavors. Since, we need only one app we will use default as flavorDismension. But we need 4 productFlavors local, dev, qa, and prod hence we add four blocks with some values. We’re overriding app_name and adding applicationIdSuffix and versionNameSuffix for each flavor. This will help us differentiate between apps and generate different buildVariants. Helps with testing on the same device or simulator.

flavorDimensions "default"
    productFlavors {
        local {
            resValue "string", "app_name", "MyApp Debug"
            applicationIdSuffix '.debug'
            versionNameSuffix "-DEBUG"
            minSdkVersion rootProject.ext.minSdkVersion
            targetSdkVersion rootProject.ext.targetSdkVersion

        }
        dev {
            resValue "string", "app_name", "MyApp Dev"
            applicationIdSuffix '.dev'
            versionNameSuffix "-DEV"+versionBuild
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.reactnativeproject.stage"
            targetSdkVersion rootProject.ext.targetSdkVersion

        }
        qa {
            resValue "string", "app_name", "MyApp Qa"
            applicationIdSuffix '.qa'
            versionNameSuffix "-QA"+versionBuild
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.reactnativeproject.stage"
            targetSdkVersion rootProject.ext.targetSdkVersion

        }
        prod {
           resValue "string", "app_name", "MyApp"
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId "com.reactnativeproject.prod"
            targetSdkVersion rootProject.ext.targetSdkVersion

        }
    }

Step 4: Setup environments

Create your environment files like .env.local, .env.dev, .env.prod files and add the keys.
Update app/build.gradle file with the following code at the beginning of the file.


project.ext.envConfigFiles = [
        localdebug:".env.local",
        localrelease :".env.local",
        devdebug: ".env.dev",
        devrelease: ".env.dev",
        qadebug:'.env.qa',
        qarelease:'.env.qa',
        proddebug:'.env.prod',
        prodrelease:'.env.prod',
]

apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
def versionBuild = project.hasProperty('BUILD_NUMBER') ? "+" + project.findProperty('BUILD_NUMBER').toString() : "";

Notice how we have different combinations for buildTypes and productFlavors like productFlavorbuildTypes. So, every productFlavor has two buildTypes debug and release.

Important, thing here is to match the buildVaraint name with the correct .env file.

Now, we can access our variables inside the react components

import Config from 'react-native-config';

function HomeScreen({navigation}) {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home screen</Text>
      <Text>
        _**ENVIROMENT:{Config.ENVIROMENT} ::: APP_ID:{Config.APP_ID}**_
      </Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Stack_Details')}
      />
    </View>
  );

We can also access them inside the build.gradle file ex.

versionCode project.env.get("VERSION_CODE").toInteger()

To access env variables inside android .java/.kt files

 URL url = new URL(BuildConfig.API_URL);

and inside iOS files

 //import header
#import "ReactNativeConfig.h"
// then read individual key like:
NSString *apiUrl = [ReactNativeConfig envFor:@"API_URL"];

Final Step: Update Package.json with build commands.

Now, we just need to update scripts to build and run different build variants of our app.

"scripts": {
    "android:local": "react-native run-android  --mode=localDebug",
    "android:dev":"react-native run-android  --mode=devDebug",
    "release": "cd android && .\\gradlew assembleProdRelease",
    "release-aab": "cd android && .\\gradlew bundleProdRelease",
    "release-dev": "cd android && .\\gradlew assembleDevRelease",
    "release-qa": "cd android && .\\gradlew assembleQaRelease",
    "cleanDeps": "rm -rf node_modules && npm i",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },

scripts are modified to run on windows terminal.*

We can run the app locally with npm run android:local, we can generate .apk for prod, dev, qa with npm run release, npm run release-dev , npm run release-qa respectively.

And, we can generate .aab file for playstore submission with npm run release-aab.

Hey, I’m Neeraj Mukta I expertise in crafting resilient apps tailored for startups. I’ve been crafting web and mobile apps for 8+ years now. If you would like to chat or need assistance with technical problems, feel free to reach out on X, Linkedin.

Serving React app from S3 bucket using Cloudflare CDN

Neeraj Mukta — Wed, 20 Sep 2023 15:00:17 +0000

The most common way to deploy any static website today is, through AWS. Specifically, S3 bucket in combination with Certificate Manager and Cloudfront services. The combination of these AWS services works well and it's straightforward to set up. However, this may not be the best and easiest solution to host and serve a static website built with frameworks like React, Svelte, or Angular. The major issues in using this combination are:

Setup is not easy, configuring the bucket, then the certificate for SSL, and then creating Cloudfront distribution.
It becomes expensive as you have to pay for a bucket and CDN service and if you activate WAF that costs you extra. If you have a high-traffic website the costs can rise exponentially.
There are at least 3 network hops before it reaches the user. It may not add a significant delay but it's absolutely unnecessary.
There’s no DDoS mitigation system available by default unless we set it up by using another AWS service like AWS Shield or WAF.

In this article, we will look into an alternate way to serve your website securely with an inbuilt DDoS protection and Bot mitigation system. We will use S3 bucket as our primary storage for static files. We will then leverage Cloudflare infrastructure to proxy all the requests to the S3 bucket. By using Cloudflare we get the following advantages:

Easy to set up HTTPS with automatic SSL certificate generation and renewal for our website.
Low latency CDN network with caching enabled across the globe
Cost-effective when compared to the AWS system.

Implementation

The implementation process can be broken down into three steps.

Step 1: Deploy the static files to a S3 bucket

Assuming you already have a bucket endpoint ready, I will not explain this step in much detail. If you don’t have a bucket ready, follow this article to deploy your app to the bucket and enable static hosting.

Once, you have static hosting enabled in the bucket you’ll get an HTTP endpoint which you use to access your web app. Something like this [http://app.nrj.agency.s3-website.ap-south-1.amazonaws.com](http://app.nrj.agency.s3-website.ap-south-1.amazonaws.com/admin/default).

Step 2: Use CloudFlare name servers

Now, we need to delegate the authority to manage DNS records to Cloudflare. This step is fairly simple. You just need to replace the name server in your registrar dashboard with Cloudflare’s provided nameservers.

Create a CloudFlare account.
Click on Add site.
Copy name servers and paste them into your GoDaddy or whichever DNS provider you use.

Now, you can see all your DNS records in the CloudFlare dashboard. If any of the records are missing please, add them manually.

Step 3: Enable the proxy mode

If you already have a record pointing to your web app, you’ll notice it is also present in the DNS record list. I’m assuming the CNAME record value points to the CloudFront URL. You need to replace this with your bucket's endpoint from step 1. There’s a toggle to switch between a normal DNS record and a proxy. Turn it on, the cloud should become orange. This indicates that all the traffic to this subdomain is routed through the CloudFlare network. Remember to remove the HTTP prefix from the static site URL.

Note: You have to manage all your records through cloudflare now. Not all records need to be proxied through CloudFlare. You can add normal records just like you would in any other DNS provider.

Try visiting app.yourdomin.com, (app.nrj.agency in my case) you should see your React app deployed. Check the URL bar it should have an HTTPS protocol now. This is possible because Cloudflare encrypts the request between the browser and Cloudflare with its own SSL certificate.

Demo:

Conclusion

We were able to set up CDN for our S3 bucket in minimum steps. This method of serving content saves time, effort, and money. It also adds an extra layer of safety against common web attacks with zero configuration.

This method can be used with any similar hosted website be it on Azure or Google Cloud.

If you found this article helpful. Drop a like and stay tuned for more neat articles.

This article was published on Medium, Hashnode, Devto using Buzpen.

Deploy React App to AWS S3 bucket in under 5 mins

Neeraj Mukta — Tue, 19 Sep 2023 15:50:19 +0000

AWS is the leading Cloud service provider in the world. They offer a variety of services for deploying web applications at scale. These services offload a lot of work that was once required to take any application to production. Traditionally, companies used to have their own servers in their premises to serve their applications to their users. However, with the introduction of cloud-based services, this model has rapidly changed, and more and more companies have moved their infrastructure to the cloud.

Today, we will look into one such service from AWS called S3 buckets. S3 is shorthand for Simple storage service. It is a service that lets you store files and objects on the cloud.

From AWS website,

Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance. Customers of all sizes and industries can use Amazon S3 to store and protect any amount of data for a range of use cases, such as data lakes, websites, mobile applications, backup and restore, archive, enterprise applications, IoT devices, and big data analytics. Amazon S3 provides management features so that you can optimize, organize, and configure access to your data to meet your specific business, organizational, and compliance requirements.

Why should we use S3 bucket for static site hosting?

S3 is quite a popular service which is widely used all over the world. It is cheap, reliable, and straightforward to set up. It also has the option to enable static hosting on the bucket items.

Hence, S3 is quite popular when it comes to deploying SPAs.

Prerequisites

Before diving into the actual process let’s make sure we have the following things ready:

An AWS accoun
Static files or the build version or your app. (In most of the react apps it is the build directory)

Steps to deploy your app

Step 1: Search for the S3 bucket in the AWS console. Click on the Create Bucket button.

Step 2: Configure your bucket. Give a name to your bucket.

💡 It is important to note that the bucket name should match the sub domain/ domain name on which you would like this app to be served on. In my case, I’ve got a domain nrj.agency but I want to serve it on the app subdomain. So, I have named my bucket app.nrj.agency .

We have to make our bucket public so that users across the globe can access the files inside it. Acknowledge the warning. Now, the rest of the settings can be left to default.

Save the changes.

Now, you should be able to see the newly created bucket in the Buckets list.

Step 3: Upload Files. We can upload files manually by drag and drop or we can use AWS CLI to sync files to our bucket. We will manually put our build folder or the static files in the bucket.

Step 4: Set up a bucket policy. This step is crucial and required because it tells AWS that this service will be used only to read the objects from it.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::app.nrj.agency/*"
        }
    ]
}

Step 5: Enable static site hosting. In the permissions tab scroll to the bottom of the page. Click on the edit button to enable the static site hosting. Put index.html in both boxes as our SPA or react app will handle the errors.

That’s it you can see a URL generated by the AWS which you can use to access your app.

Demo:

💡 Notice it has HTTP, not HTTPS protocol. This is because S3 doesn’t support it. We need to set up other services to get an SSL certificate and serve it through CDN via HTTPS protocol.

Check out my other blog which tells you how to do this with CloudFlare CDN.

Conclusion

In this blog, we learned how to host static files using an S3 bucket in under 5 mins. All the steps described here can be followed easily.

If you found this article, give it a thumbs up and share with your friends.

This article was published on Medium, Devto, and Hashnode using Buzpen.

Setting up a reverse proxy with CloudFlare workers

Neeraj Mukta — Fri, 08 Sep 2023 23:21:09 +0000

What is a reverse proxy in the first place?

In layman's terms, it is a middleman sitting between two parties to make transactions between them smoother, faster, and more secure. Think of a waiter in a busy restaurant. The job of a waiter is to take orders from you and pass them to the kitchen staff and when your order is ready, serve the food from the kitchen to your table. As you can tell, you really don’t have to do much at a restaurant. All the hard work of communication and serving the food is handled by the waiter, here the waiter is acting as a middleman or reverse proxy between you and the chef.

If we apply this analogy to the digital world, a reverse proxy is a server between your clients (browser, mobile app etc.) and web servers. It can intercept the requests from the client before it reaches the server. This in turn opens a lot of opportunities for improving web server’s characteristics. Just as the waiter in a restaurant takes orders and serves food. It also takes care of billing and payments, managing multiple customers at the same time, managing crow during rush hours etc. A reverse proxy server can also do similar tasks in the internet world like balancing traffic between multiple servers, mitigating risky behaviors, and caching the responses for the same queries.

But, our goal for using a reverse proxy is different. We want to perform redirects between our websites. In this case, I’ve three websites

a. Main landing page which I want to point to kanvasai.com

b. Medium integration page which I want to point to kanvasai.com/medium followed by my app’s query parameters like _?utm_source=&page=_

C. Dev. to integration page again kanvasai.com/devtofollowed by my app’s query parameters like _?utm_source=&page=`_

For the sake of brevity all there websites are hosted on webflow.io and these are records on my GoDaddy DNS.

Notice, that I created three records (main, medium, devto) with CNAME pointing to a non-ssl server of webflow (Usually, we use `proxy-ssl.webflow.com). I'll explain later why.

This gives me three websites with three different subdomains under one domain.

💡 However, an interesting thing to note here is all the web crawlers and robots treat all these three websites as a different entity hence, this hurts the SEO significantly and results in a ranking drop.

So, how do we fix it such that when any crawler/user tries to access the

main.kanvasai.com gets redirected to kanvasai.com/
medium.kanvasai.com gets redirected to kanvasai.com/medium, and
devto.kanvasai.com gets redirected to kanvasai.com/devto

Let’s find out how CloudFlare workers can help

Workers are just javascript code running in Chrome browser environment. The good thing is that it runs closer to your user's browsers. The bad thing is that you cannot use node packages like in Serverless functions but all modern browsers APIs are supported. Read more about them here.

Disclaimer : This article assumes you know little bit about cloudflare workers and have tried building with it. So, basic stuff will be excluded and maybe hyperlinked to other blogs.

Note : If you’re going to apply this technique on production apps, please note that every CNAME record will be intercepted by worker, hence needs to be handled with correct worker logic for every route.

Prerequisite :

working CloudFlare account (free tier also works for this tutorial),
access to your domain registrar (in this case I’m using Godaddy but the process is the same for every other DNS providers),
Any code editor that supports JS/TS language features(I will use VS code),

Step 1 : Create a worker project with Cloudflare cli

Create a new worker project by running the following command in the terminal. website-stitcher is the project name

npm create cloudflare@2 -- website-stitcher

After running this command, CLI will create a directory named web-stitcher and you’ll be prompted through a series of questions,

choose hello world worker

b. Always say yes to typescript

c. git version control (you can do this later also)

d. Yes, deploy our sample worker.

After selecting ‘yes’, Cloudflare cli will try to log in to your Cloudflare account via browser. Authorize the authentication of cli with the account.

and Voila! we have our Cloudflare worker ready and deployed. (A browser window should open up automatically with the message ‘hello world’)

Now, we have a Cloudflare worker boilerplate code ready. Open it in your editor of choice. We don’t need to worry about all the files now. We’ll write all our logic in src/worker.ts file

Step 2: Write the logic to handle incoming requests and redirect its response

The fetch function has access to the request object which we will use to identify domains, subdomains, pathname, search params, etc. using the below snippet.

Let’s define our constants ROOT_DOMAIN, SUBDOMAINS, MAIN_SUBDOMAIN and main WEBSITE_URL.

Now, we need to write js/ts code to check the incoming hostname for subdomains and redirect it to sub- route. Something like this,

By looking at the test cases we can break down the logic into three main blocks

if the hostname is not the same as the ROOT_DOMAIN
- here, we need to check SUBDOMAINS if they match the hostname’s subdomain. If it matches one of the SUBDOMAINS we need to redirect the user to the right url.
- we should also check if it matches our MAIN_SUBDOMAIN and redirect the user to the main website
- If does not meet the above two conditions then just return data from the original request URL.

if the pathname matches one of the SUBDOMAINS and the hostname is the same as ROOT_DOMAIN
- here, we just need to fetch the data from the matching subdomain and redirect the user to the correct URL.

- or if there’s no subdomain or subroute, fetch data from **MAIN_DOMAIN** and return a response or redirect the user.

If the pathname has a trailing slash (important case)
- SEO crawlers treat kanvasai.com/medium and [kanvasi.com/medium/](http://kanvasi.com/medium/) as separate routes. Hence, we need to take care of thetrailing slash`. It’s easy with a bunch of js string methods.

It took some time and hit and trail to come up with logic and could be a little overwhelming to understand at once. Hence, I’m attaching a flow diagram to visualize the conditions.

If you prefer you can just copy and paste the same code change values of constants ROOT_DOMAIN, SUBDOMAINS, MAIN_SUBDOMAIN, and main MAIN_URL to your records.

The complete code looks like this

embed

Run the following command to deploy the code/worker

bash npx wrangler deploy

Head over to the Cloudflare dashboard > workers & pages. You should see list of all the workers here. I have multiple workers but if it’s a new account you should see just one worker.

Navigate inside your worker by clicking on it. You can see all relevant information related to your worker. There are tabs like triggers, logs, deployments, etc.

Next, we need to define the trigger for this worker. Right now, it is deployed to some random URL by Cloudflare.

Step 3: Register your site with Cloudflare zone

Before adding a trigger for our worker we need to delegate our DNS nameserver to the Cloudflare. (If your DNS registrar is Cloudflare you don’t need to do this step).

On the main dashboard, click Add Site button on the top right corner, and enter your domain name ex. kanvasai.com.

Now, follow the steps shown by Cloudflare for moving nameservers. This will allow Cloudflare to fetch all the existing DNS records. But, please make sure you have all the records present.

Adding albert.ns.clouflare.com and annabel.ns.cloudflare.com to my goDaddy domain DNS setting page.

Finish the site setup by clicking continue and check the DNS nameserver status. This may take some time to verify new nameservers. Important, thing to note here is now you have to manage all your DNS records from your Cloudflare account. Your DNS registrar will not have control over your records.’

Note : Make sure you have all the records available in the cloudflare DNS records too. In my case, my two records were not transferred so I had to add them again manually. This can cause downtime to your app so be careful while doing this transfer.

Step 4: Add your root domain as the worker’s trigger

Now, we are ready to add triggers to our workers. Navigate to your worker by clicking workers & pages on the left panel and then clicking on your worker from the list.

On this page, click on the Triggers tab next to Metrics. Here, click on the Add Custom Domain button and add your domain.

Note: you might see this error if you did not follow the last step correctly. In order to add your custom domain as a trigger for workers, your custom domain must be delegated to Cloudflare nameservers.(Don’t worry, your registrar will stay the same, GoDaddy in this case).

Cloudflare adds a new DNS record to type worker, you can check this to verify if your custom domain is set up correctly.

Step 5: Attach a wildcard route to your worker

Now, for our worker logic to run correctly we need to forward all the requests from all the sub domains to our worker. So, we’ll add a route for this we are going to use a wildcard () to define a pattern of URLs that are allowed or that trigger our worker. So, just below the custom domain, there is a section for routes (also called worker routes). I’ll add *.kanvasai.com/* as the route and choose kanvasi.com as the zone. This represents all the subdomains and subroutes that have kanvasi.com as the root domain.

we should see this message once the route is properly configured.

Now, we can already see the worker in action. Try visiting your root domain and subdomains.

If it's not working for you wait for some time to let DNS propagate changes. Try on a different device because Chrome caches the websites on disk.

Step 6: Handling www CNAME record :

There are a couple of ways to handle this,

We can add another CNAME record pointing to the same Cloudflare worker,
handle it in the worker code with JS or,
iii. Define a page rule such that anyone accessing www.kanvasai.com/* gets automatically redirected to https://kanvasai.com/*

Step 7: Handling relative URL (hrefs) in your applications

If your app uses an anchor tag and has subroutes, you should probably prefix those with subdomain names (/medium/about or /devto/about). You’ll understand why after trying it.

Step 8: SSL/TLS certificates between Cloudflare and your application server

For Vercel and similar applications, SSL is generated by the platform itself. Hence, we need full security

For Webflow, we keep it flexible and let Cloudflare manage SSL certificates.

Cons of this approach

Now, we’ll have to manage all our DNS records through Cloudflare.
Adding a new record becomes a little tricky.

In the follow-up article, we’ll see how to do this with SPAs. Please comment if you want a tutorial on that topic.

If you are trying to setup this reverse proxy and facing any issues, feel free to reach out or book a free consultation here. I’ll be more than happy to help.

This article was published using Buzpen. If you want to publish the same article to three major platforms at once, then do try out Buzpen.

Building an Android and iOS app in 2023

Neeraj Mukta — Wed, 06 Sep 2023 15:10:05 +0000

“Ideas are cheap, execution is expensive!”

I’m sure you must have heard this quote in some or the other form. A billion dollar ideas requires millions in investments before it turns profitable. The road to profitability is a tough one as we have seen in the recent few years with companies adapting all the means to save every buck.

So, the question is should you also spend millions and then start saving thousands to become profitable? I leave this question to be answered by you.

In the past few months I have met at least 10 founders (or wanna be founders) who have this startup or business idea that they think is amazing, has potential to disrupt the market and in turn make them rich. Of course, this was all in their heads and they were trying hard to pitch the idea and find a co founder who can help them build the product or service. And one common question they had was how expensive is it to build a product or service? Mind you all these people didn’t have a technical background and the only thing according to them that was stopping them was tech. The wild wild world of app development.

My goal through this article is to help you make right technological decisions to test your ideas. That’s right! Testing an idea is the first stage of any billion dollar company in making. You need to bet enough resources and time to validate your product idea, find early adopters and then do some serious analytics. Most of the founders make a mistake here, they go all in on the product development and marketing without even proper development and business plan. There are many steps involved before committing to full on development. (Maybe I’ll cover those in some other blog.)

💡 TIP 1: Save money by building something trivial but functional first that can help you validate the idea. It does not have to be an app or a website. It could be a simple spreadsheet also.

Most of the time they end up losing money and sometimes reputation too. You certainly don’t have to sell your house to validate your product idea.

Returning to the original question how much does it cost to build an MVP (minimal viable product)?

Well, the answer varies on the requirements of your MVP. Let’s assume you need an android or iOS app or both for your MVP or initial version. The effort in building any native mobile app from scratch is significantly high when compared to web apps. It takes around 100 hrs just to write basic building blocks of an native app and time increases based on complexity of business rules.

You can easily save time and effort by choosing a cross-platform technology like React Native. This helps you in jumpstarting the native app development with little knowledge on native languages like Java/Kotlin (used to build native android apps), Objective C/Swift (used to build native iOS apps).

💡 TIP 2: If you need an app for your idea, choose a cross platform technology to build it. This will help you build it faster, iterate over features quickly and roll out to users in shortest amount of time without burning a hole in your pocket.

Honestly, React native has become pretty good in 2023 and expo team has made it even easier for any javascript developer to build cross platform mobile apps. No matter what stage you are at as a company you should almost always bet on react native because it’s very stable and rapid to develop. If you’re just starting out or you are already at startup level you should save costs on technology by leveraging expo and react native ecosystem. If you google how to build a mobile app for android and iOS you will find tons of frameworks and technology to do it. But, broadly speaking there are two type of app development native and cross-platform, cross-platform being the quickest of the two.

💡 TIP 3: In 2023, you can use React native/Expo to build prototype apps as well as high traffic professional quality apps.

Let’s discuss a development plan where you want an app (android/ios) that users can use to find their morning ride to office. A social carpooling app. Now, before making this into a flow blown app something like the Uber and then launching it to your customers, what you should do first is to figure out if the users actually want to carpool with strangers in their area? Just ask around, interview people. Once, you are sure then you should test it by giving them an app.

For, this you can start with simple website that lists all the available cars from region A to region B in that city. Mobile devices are more common for such services so let’s focus on building the iOS and android app. Breaking down the requirements looks something like :

people signup into your app,
they share some identity like driver’s license and other relevant information,
they can view available car pools for today,
they can send a request to join a certain car pool,
and they have the an option to host a car themselves and approve new requests.

What I just did is to write down a high level overview of what app should do and this should be enough to validate our idea. As you can already see we need at least 5 screens already for our app. Imagine building these same screens separately on iOS and android & this will also need a backend. 😱 Thus, by using a cross platform framework like React Native or flutter we can save time and cost on app and maybe spend that time on building a robust server. Because at the end data is what matters in this century. So I’m picking expo for few simple reasons,

it’s open source & it’s based on Typescript and React,
it complies down to actual native code for both android and iOS unlike flutter,
it has relatively less steep learning curve, it’s easy to find devs or train React devs,
it has good support/libraries for camera, location, bluetooth etc, all the common native functionalities,
it is extensible meaning you can write custom native plugins if existing components or libraries are not suitable enough.

💡 Also, why not Flutter? will be answered in an separate post.

My next post will be on setting up a React Native app with expo. Stay tuned and follow me on whichever platform you are reading this.

PS: I provide free consultation on MVP Planning. I do a 1 on 1 session where we figure out the viability of your idea and how to bring it to life in most appropriate and quickest manner possible. If you are struggling with making right technological choice for your Product feel free to reach out. You can book free consultation here.

This article was publish on medium, devto and hasnode using buzpen.

Add a Likes counter to your website with Cloudflare workers

Neeraj Mukta — Fri, 01 Sep 2023 09:00:40 +0000

So you have spent time and money to build a beautiful-looking website for your product or maybe a fancy portfolio website to impress your potential clients cool! You also added Google Analytics to track traffic but you can’t tell how many people liked it based on analytics data. 😟

Well, what if I show you a simple way to track it? And the answer is simple: just add a like button ♥️. We see those everywhere on every platform today since Facebook introduced it to the world.

But why serverless solution or Cloudflare worker to be specific? Good question. Yes, we can do it the regular way with an API from a dedicated Nodejs or python web server with MongoDB approach but it will be an overkill to develop & deploy a server with a database just to keep track of like counts. (at least in my case)

Our goal here is to:

to store the Likes count at some global storage so that we can read the updated value anytime,
increase the Likes count when a user clicks our like button and decrease the Likes count when they click it again,
Learn how to develop and deploy an API in minutes (with Wrangler-cli)

Assumptions / Prerequisite :

An active Cloudflare account
any code editor
Node version > 16 installed
Some knowledge about React and Rest APIs
Basic javascript/Typescript skills

Before, jumping into the coding part first let’s try to break down the process and define some steps to implement the feature. Let’s start with the API part we need three endpoints for our use case

/getTotalLikes: to get a current count of likes
/incrementLikes: to increase Likes count by 1 when the user clicks the Like button
/decrementLikes: to decrease Likes count by 1 when the user clicks the Like button again (unlike)

Once we have these three endpoints, we can hook them up to the react button component and also display the latest Likes count around it.

We have a small plan now.

Let’s begin building:

Step 1: Create a hello word Cloudflare worker project using the below command

npm create cloudflare@latest

It will walk you through boilerplate setup. Feel free to pick any configuration you like.

My project config :

Typescript: Always, Yes.

Deploy: Yes. It will open a live URL in the browser. (easy to deploy)

Whoami: login to Cloudflare account via browser.

Step 2: Creating a KV Namespace

KV stands for key-value storage it works like a browser local storage but it’s not stored on the client’s browser but rather close to the browser in the cdns. Read more about it here.

Run the following command :

npx wrangler kv:namespace create LIKES

Next, copy over values from the terminal to the wrangler.toml file of your project

kv_namespaces = [
    { binding = "<YOUR_BINDING>", id = "<YOUR_ID>" }
]

Think of namespaces as different collections of a redis-cache, it can store. up to 10,000 documents with a max size of 25MB for each value. Read, more about the limits of KV Namespaces here.

Now, we are ready to use KV namespace inside our worker. The KV Namespace provides two methods, to put and to get the data.

1.put(key:string, value:string|ReadableStream|ArrayBuffer):Promise<void>

This method returns a Promise that you should await on in order to verify a successful update.

get(key:string):Promise<string|ReadableStream|ArrayBuffer|null>

The method returns a promise you can await on to get the value. If the key is not found, the promise will resolve with the literal value null.

```bash
export default {
  async fetch(request, env, ctx) {
        await env.NAMESPACE.put("first-key", "1")
    const value = await env.NAMESPACE.get("first-key");

    if (value === null) {
      return new Response("Value not found", { status: 404 });
    }
    return new Response(value);
  },
};
```

or we can use cli command to set the initial key-value pair

```bash
npx wrangler kv:key put --binding=LIKES "likes_count" "0"
```

**In the src/worker.ts file**

1. uncomment line 13 and rename `MY_NAMESPACE` with `LIKES`
2. Inside the fetch function on line 30 add the above code to get value from the store.

As you can see we can leverage typescript to be confident about KV Namespace during runtime 


![worker.ts: accessing ‘LIKE’ KVNamespace inside the worker](https://s3.us-west-2.amazonaws.com/secure.notion-static.com/7974c0a4-ba94-4286-afad-79aa2cd583b5/Untitled.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230901%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20230901T090007Z&X-Amz-Expires=3600&X-Amz-Signature=728b173f5719def159624798310b7201a940124eff1662bd8a9747d60617b55f&X-Amz-SignedHeaders=host&x-id=GetObject)


Let’s deploy this worker by running the following command:

```bash
npx wrangler deploy
```

Open the URL in your browser

I think you must have understood what’s happening here and how we can interact with KV storage.

Step 3: Handle API endpoints

Let’s circle back to our requirements we need an endpoint /getLikesCount which will return updated likes_count from the KV store.

We can leverage new URL () standard URL object to get pathname

Quickly copy and paste this code into the worker.ts file

const requestUrl = new URL(request.url);
const { hostname, pathname, search, hash } = requestUrl;

You can try console logging hostname, pathname, search, hash to understand URL object

But, we are interested in the pathname we can check if it matches substring /getLikes

likes count,

if (pathname.includes('getLikes')) {
            return new Response('pathname includes substring `getLikes`');
    }

Let’s deploy and test our worker now by visiting /getLikes path

Great! It’s working we can now respond to different paths with different responses.

Let’s build on this and add two more paths /incrementLikes and /decrementLikes.

Also, let’s use another key likes_count to track count.

Run this command to create a new key-value pair and initialize with 0.

npx wrangler kv:key put --binding=LIKES "likes_count" "0"

Add the following code to handle the other pathnames

if (pathname.includes('incrementLikes')) {
            return new Response('pathname includes substring `incrementLikes`');
        }
        if (pathname.includes('decrementLikes')) {
            return new Response('pathname includes substring `incrementLikes`');
        }

Now, we can do simple addition and subtraction to the likes_count key and return the appropriate value.

Also, since we want to consume it as API let’s send it as JSON response. I’m leaving the implementation up to you. Notice, that I’ve also added an Access-Control-Allow-Origin header in the response so that we can call this API from any domain in the browser. (to prevent CROS errors)

const likesCount = await env.LIKES.get('likes_count');
        const requestUrl = new URL(request.url);
        const { hostname, pathname, search, hash } = requestUrl;

        //handle `/getLikes` request and responded with likesCount
        if (pathname.includes('getLikes')) {
            const json = JSON.stringify({ status: 200, message: `count at ${new Date().getTime()}`, likesCount }, null, 2);
            return new Response(json, {
                headers: {
                    'content-type': 'application/json;charset=UTF-8',
                    'Access-Control-Allow-Origin': '*',
                },
            });
        }

        //handle `/incrementLikes` request and responded with updated likesCount
        if (pathname.includes('incrementLikes')) {
            let updatedCount = parseInt(likesCount || '7') + 1;
            let status = 200;
            let message = `count updated at ${new Date().getTime()}`;
            try {
                await env.LIKES.put('likes_count', updatedCount.toFixed(0));
            } catch (error) {
                console.error('Error in incrementing likes', error);
                if (likesCount) {
                    updatedCount = parseInt(likesCount);
                }
                status = 500;
                message = `failed to update count error: ${JSON.stringify(error)}`;
            }
            const json = JSON.stringify({ status, message, likesCount: updatedCount }, null, 2);
            return new Response(json, {
                headers: {
                    'content-type': 'application/json;charset=UTF-8',
                    'Access-Control-Allow-Origin': '*',
                },
            });
        }

        //handle `/decrementLikes` request and responded with updated likesCount
        if (pathname.includes('decrementLikes')) {
            let updatedCount = parseInt(likesCount || '7') - 1;
            let status = 200;
            let message = `count updated at ${new Date().getTime()}`;

            try {
                await env.LIKES.put('likes_count', updatedCount.toFixed(0));
            } catch (error) {
                console.error('Error in decrementing likes', error);
                if (likesCount) {
                    updatedCount = parseInt(likesCount);
                }
                status = 500;
                message = `failed to update count error: ${JSON.stringify(error)}`;
            }
            const json = JSON.stringify({ status, message, likesCount: updatedCount }, null, 2);
            return new Response(json, {
                headers: {
                    'content-type': 'application/json;charset=UTF-8',
                    'Access-Control-Allow-Origin': '*',
                },
            });
        }

        //handle '*' requests
        const json = JSON.stringify({ status: 404, message: `unknown/missing path` }, null, 2);
        return new Response(json, {
            headers: {
                'content-type': 'application/json;charset=UTF-8',
                'Access-Control-Allow-Origin': '*',
            },
        });

Step 4: Test the API endpoint

Let’s quickly deploy and test our worker endpoints

You can reload the page multiple times to increment the likes’ counter

Similarly, we should also check the current likes count again by calling /getLikes endpoint

Let’s test the decrement counter also,

Let’s verify by visiting /getLikes endpoint

Congratulations 🎉, your API endpoints are ready! (Look how easy it was, right?) 😄

Now, all you gotta do is integrate them into your client app. I’m using a React app for my portfolio website so I’ll be showing you the implementation for the same.

Step 5: Integrating API into our React app

This part is quite straightforward, we need a Like button component which on clicking will call our CF worker /API endpoint and update the likes count on UI.

Here’s a simple component with Heart Icon and Count Label. Here’s the link to the GitHub page.

import EmptyHeart from "./Icons/EmptyHeart";
import FilledHeart from "./Icons/FilledHeart";

const LikeButton: React.FC<{
  liked: boolean;
  likesCount: number;
  onLike: (e: any) => void;
}> = ({ liked, likesCount, onLike }) => {
  return (
    <div className="flex gap-2 items-center justify-center p-1">
      {!liked ? (
        <span
          className="animate-pulse cursor-pointer select-none"
          onClick={onLike}
        >
          <EmptyHeart />
        </span>
      ) : (
        <span
          className="cursor-pointer select-none animate-bounce"
          onClick={onLike}
        >
          <FilledHeart />
        </span>
      )}
      <h6
        className={`italic text-white font-medium ${
          liked ? "animate-[pulse_2s_ease-in_forwards]" : ""
        }`}
      >
        {likesCount}
      </h6>
    </div>
  );
};

I created a custom hook useLikeButton to abstract the API logic on how I call the API and update the state, you can see the source code here.

const useLikeButton = () => {
  const [isLiked, setIsLiked] = useState(false);
  const [likesCount, setLikesCount] = useState(0);

  useEffect(() => {
    (async () => {
      const data = await getLikesCount();
      if (data && data.status === 200) setLikesCount(parseInt(data.likesCount));
    })();
  }, [isLiked]);

  const handleLikeButtonClick = async () => {
    setIsLiked(!isLiked);
    try {
      if (isLiked) {
        const data = await decrementLike();
        if (data && data.status === 200) {
          console.log("decrement success");
          setLikesCount(parseInt(data.likesCount));
        }
      } else {
        const data = await incrementLike();
        if (data && data.status === 200) {
          console.log("increment success");
          setLikesCount(parseInt(data.likesCount));
        }
      }
    } catch (err) {
      //roll back
      if (isLiked) setLikesCount((prev) => prev + 1);
      else setLikesCount((prev) => prev - 1);
    }
  };

  return {
    isLiked,
    likesCount,
    handleLikeButtonClick,
  };
};

incrementLike and decrementLike functions look like this again check the source code for more details.

We only need a GET request here because we are not sending any payload to the worker but you can create POST request too with CloudFlare workers.

import { ADD_LIKE, ADD_UNLIKE, GET_LIKES_COUNT } from "../constants";

export const GET = async (url: string) => {
  try {
    const response = await (await fetch(url)).json();
    return response;
  } catch (err) {
    console.error("Oops! Failed to get likes", err);
  }
};

export const getLikesCount = () => GET(GET_LIKES_COUNT);
export const incrementLike = () => GET(ADD_LIKE);
export const decrementLike = () => GET(ADD_UNLIKE);

Finally, I added the LikeButton component to the page and passed the necessary props to it from our custom hook.

const { isLiked, likesCount, handleLikeButtonClick } = useLikeButton();

return(
...
//above code hidden for brevity

<LikeButton
          liked={isLiked}
          likesCount={likesCount}
          onLike={handleLikeButtonClick}
        />

)

That is it! We should now be able to see it in action.

There’s one problem though, since we don’t have user identity attached to our likes count data we cannot tell if the user has already liked our page. This could result in the same user liking it multiple times because the button resets every time the page is refreshed or revisted.

As you can tell, this happens because our state gets reset inside React app.

Step 6: Persistence problem on the client side

One simple way to fix this issue is to use the browser’s local storage.

We will set a flag (’has-like’) in local storage and based on that update the button state.

So, whenever a user visits our page we first check if that particular key is present or not

If the flag is present we keep the button state as liked and when the user clicks the button we decrement it and change the state to unlike.
if it's not, we keep the button state as unlike, and when the user clicks the button we increment it and change the state to like.

Step 7: Adding Local storage to persist state locally

I’ll use this simple custom hook useLocalStorage to set/get local storage data, the signature will be very similar to React’s useState hook and it will be interchangeable.

type SetValue<T> = Dispatch<SetStateAction<T>>;
export function useLocalStorage<T>(
  key: string,
  initialValue: T
): [T, SetValue<T>] {
  const readValue = useCallback((): T => {
    if (typeof window === "undefined") {
      return initialValue;
    }

    try {
      const item = window.localStorage.getItem(key);
      return item ? (parseJSON(item) as T) : initialValue;
    } catch (error) {
      console.warn(`Error reading localStorage key “${key}”:`, error);
      return initialValue;
    }
  }, [initialValue, key]);

  // State to store our value
  // Pass initial state function to useState so logic is only executed once
  const [storedValue, setStoredValue] = useState<T>(readValue);

  const setValue: SetValue<T> = (value) => {
    // Prevent build error "window is undefined" but keeps working
    if (typeof window === "undefined") {
      console.warn(
        `Tried setting localStorage key “${key}” even though environment is not a client`
      );
    }
    try {
      // Allow value to be a function so we have the same API as useState
      const newValue = value instanceof Function ? value(storedValue) : value;
      window.localStorage.setItem(key, JSON.stringify(newValue));
      setStoredValue(newValue);
    } catch (error) {
      console.warn(`Error setting localStorage key “${key}”:`, error);
    }
  };

  useEffect(() => {
    setStoredValue(readValue());
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return [storedValue, setValue];
}

// A wrapper for "JSON.parse()"" to support "undefined" value
function parseJSON<T>(value: string | null): T | undefined {
  try {
    return value === "undefined" ? undefined : JSON.parse(value ?? "");
  } catch {
    console.log("parsing error on", { value });
    return undefined;
  }
}

One last step, We just need to replace useState inside our custom hook with this local storage hook

Before

After

Time to test. Let’s refresh the page and click the like button then refresh the page again.

Voila, the button is still in a like state.

Phew! That seemed like a lot of work but trust me we saved tons of time in API development for simple use cases like this.

Another thing to note here is that Vercel also provides similar KV storage so we can implement the same APIs using Vercel Edge Functions also.

Let me know in the comments if you would like me to write a blog on that as well or just comment on how you liked this one.

Our Learnings from this blog post:

How to create an API endpoint using CloudFlare worker, ✅
How to use key-value storage for data persistence in our APIs ✅
how to save cost by not booting up an EC2 instance for simple APIs. ✅ 🤑

Please do visit my website and drop a like. This post was published using a cross-platform publishing tool Buzpen.

Serverless Functions vs Edge Functions vs Cloudflare workers

Neeraj Mukta — Wed, 23 Aug 2023 05:43:47 +0000

Let’s quickly understand the differences between these 3 server-less technologies. If you are like me and have been too busy to get a glimpse of the whole server-less hype, stay tuned.

What are Serverless Functions?
As the name suggests they are functions that can run without requiring a dedicated server. Think of these serverless functions as a small unit of code that runs in response to specific events, usually triggered by HTTP requests. The logic behind the creation of this technology is to save long-running server costs for trivial and independent tasks. They are hosted on cloud platforms like AWS Lambda, Google Cloud Functions, or Azure Functions. These serverless functions are highly scalable, cost-effective, and easy to deploy. These functions are ideal for creating backend services and APIs, and they excel at handling specific tasks triggered by events.

What are the usecases for serverless functions?

REST APIs for your frontend/client apps
event driven tasks or cron jobs, etc.

Examples :

Uber uses serverless functions to handle various backend tasks, such as processing ride requests, calculating fares, and sending notifications to drivers and passengers.
Airbnb leverages serverless functions for managing user authentication, handling reservations, and sending booking confirmation emails.
we can build an image thumbnail generator that processes uploaded images and generates thumbnails on-the-fly when requested via API endpoints.

What are Edge Functions?
Edge Functions are very similar to serverless functions but they run in a browser environment (chrome V8 engine) meaning they support only browser APIs and you cannot use native Node APIs/packages inside it. Edge functions run on content delivery networks (CDNs) at the network edge, close to the user's location. They are designed to manipulate and optimize content delivery. Edge functions enhance performance by reducing latency and can be used for tasks such as caching, content transformation, and security enhancements.

Where should I use them?

to Implement real-time image optimization that resizes images based on the user's device and network conditions before delivering them, ensuring fast loading times.
to redirect users to a different website, etc.
rate limiting,
geolocation based redirects/responses

Examples :

Netflix uses edge functions to optimize content delivery by dynamically selecting the appropriate bitrate based on the viewer's device and network conditions, ensuring smooth streaming experiences.
Pinterest utilizes edge functions to resize and optimize images on-the-fly, delivering them in the optimal format and size for the user's device.

What are Cloudflare Workers?
Cloudflare Workers are a specific implementation of edge functions offered by Cloudflare. They allow you to write JavaScript code that runs at Cloudflare's edge servers. Cloudflare Workers are known for their flexibility, low-latency execution, and can be used for tasks such as request handling, routing, and filtering.

Where should I use them?

Create a custom bot detection and mitigation system that analyzes incoming traffic at the edge, blocking or challenging requests that exhibit suspicious behavior.
reverse proxy the traffic
A/B testing, etc

Examples :

Discord employs Cloudflare Workers to enhance the security of their platform by implementing rate limiting, DDoS protection, and IP filtering at the edge, minimizing the impact of malicious traffic.
Coinbase uses Cloudflare Workers to manage traffic and routing, ensuring that users are directed to the appropriate server instances for trading, account management, and data retrieval.

Thank you for reading! Hope you learned something. You can check out my work and connect with me here.
This blog was published to medium, devto, hashnode using buzpen.

References :

https://www.splunk.com/en_us/blog/learn/serverless-functions.html

https://www.netlify.com/blog/edge-functions-explained/

https://blog.cloudflare.com/introducing-cloudflare-workers/

Learn to render Maps by building a wildfire tracker app - Part 2

Neeraj Mukta — Sun, 03 Jan 2021 19:28:41 +0000

This is part two of Learn to render Maps by building a wildfire tracker app series. If you missed the part one, you can read it here

Also, the complete source code is here

In the first part we rendered a simple map using leaflet now we'll plot some data (wildfire data) on this map. We're going to use this NASA API.
This is an opensource API which requires no key. You can checkout NASA website from information about their cool Apis.

Now, let's fetch data from the api there are many ways/packages to make http requests but I'm going to use fetch as it is directly available in the modern browsers.
We'll use two common React hooks useState and useEffect to make an API request and set the response data.

Add the following code in the app.js file inside src directory.

   const [eventData, setEventData] = useState([])
   const [loading, setLoading] = useState(false)
   useEffect(()=>{
      const fetchEvents = async () =>{
         setLoading(true)
         const {events} = await (await 
  fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events')).json()
         setEventData(events)
         setLoading(false)
       }
       fetchEvents()
    }, [])

This is simple react stuff making api call, setting state and if you find it difficult to understand this I recommend reading the react docs and comeback here again!

Now, we'll modify the Map component from previous post to take eventData as a prop and also, we'll display a loader until the api returns the response and state has been set.

This how our app.js will look like now.

   import Map from "./components/Map";
   import "./App.css";
   import { useState, useEffect } from "react";
   import Header from './components/Header';
   import Loader from './components/Loader';

  function App() {
    const [eventData, setEventData] = useState([])
    const [loading, setLoading] = useState(false)
    useEffect(()=>{
    const fetchEvents = async () =>{
       setLoading(true)
       const {events} = await (await 
  fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events')).json()
       setEventData(events)
       setLoading(false)
       }
      fetchEvents()
    }, [])

   return (
     <div>
       <Header />
       { !loading ? <Map eventData={eventData} /> : <Loader /> }
     </div>
   );
 }

 export default App;

Tip : const {events} = await (await fetch('https://eonet.sci.gsfc.nasa.gov/api/v2.1/events')).json()
This is called object destructing, more details.

And this our simple Loader component. You can get that gif file from source code

  import fireLoader from './fireLoader.gif'

   const Loader = () => {
      return (
          <div className="loader">
             <img src={fireLoader} alt='fireLoader'/>
              <h2>Loading ...</h2>
          </div>
      )
   }

   export default Loader;

Great, Now let's look at the response and we can see that it has an events array which includes information about different natural events like Storms, wildfire, cyclones etc.
But, we only need wildfire co-ordinates from the events array which has id as 8 inside the categories object.
So, we need to filter out all the objects whose id is 8 inside the categories object

Let's now update our Map component a bit to use eventData prop, add the following code to the Map component.

   // define constants
   const NATURAL_EVENT_WILDFIRE = 8;

     const Map = ({ center, zoom, eventData }) => {
     const markers = eventData.map((event, key) => {
        if (event.categories[0].id === NATURAL_EVENT_WILDFIRE) {
          const [lng, lat] = event.geometries[0].coordinates;
       return (
         <LocationMarker key={key} lng={lng} lat={lat} info= 
          {event.title} />
         );
        }
     });

As you can notice we're looping through the eventData array and looking for objects with id equals to 8 and get the longitute and latitude array as well as event title to display the info about the wildfire when we click on any of the markers.
That's it now we just render the markers array which is an array of all the Location Markers. So, now the complete code for our Map component.

   import React from "react";
   import { MapContainer, TileLayer } from "react-leaflet";
   import LocationMarker from "./LocationMarker";

   // define constants
   const NATURAL_EVENT_WILDFIRE = 8;

   const Map = ({ center, zoom, eventData }) => {
      const markers = eventData.map((event, key) => {
       if (event.categories[0].id === NATURAL_EVENT_WILDFIRE) {
          const [lng, lat] = event.geometries[0].coordinates;
        return (
         <LocationMarker key={key} lng={lng} lat={lat} info= 
          {event.title} />
        );
      }
    });

    return (
       <MapContainer style={{ height: "100vh" }} center={center} 
           zoom={zoom}>
          <TileLayer
            attribution='&copy; <a 
             href="http://osm.org/copyright">OpenStreetMap</a> 
             contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
        {markers}
      </MapContainer>
    );
   };

   Map.defaultProps = {
      center: [42.3265, -122.8756],
      zoom: 6,
   };

   export default Map;

This is it our app is ready. Start the app using
yarn start

There is so much you could do with leaflet, you can change tiles, provide navigation and much more and the best part is it's open source. Possibilities are limitless.

I hope you liked this series and if you did please share and follow me devnrj07

Have a Happy and Covid-free New Year!

Learn to render Maps by building a wildfire tracker app - Part 1

Neeraj Mukta — Fri, 01 Jan 2021 07:07:59 +0000

Recently, I was working on a project where I needed to use Maps to display and pinpoint information about goods. So, I started out to look for MAP libraries my first choice was obviously Google Maps API which is very simple, has a good documentation and a very nice react-wrapper. But, the downside is, it’s quite tricky to set it up, you need to setup billing account and some other prerequisites until you see a map.

This is going to be a two part series :

This screen annoyed the heck out of me!

So, after some more research I landed on this open source library which also has react-wrapper and it's called leaflet
It's very useful easy to setup library but it still has some caveats to it. So, I'm writing this blog to help beginners move in the right direction with this library.
I'm going to show how to make it work with react project for which I will use the following libraries :

Let's quickly generate react project using create-react-app. Open a terminal and run the following command :

npx create-react-app map-demo-app
This will generate a basic react app with all the necessary files.
Let's also add leaflet libraries to out project. Type the following command in your terminal

cd map-demo-app && yarn add leaflet react-leaflet

Now, we're all set to render our map. For this let's make a Map component.
To render the map we need to follow three simple steps :

i. import leaflet css in your index.js file

import 'leaflet/dist/leaflet.css';

ii. create a file call Map.js inside src and add this
piece of code. Note the change in react-leaflet api (its
MapContainer instead of Map)

   import { MapContainer, TileLayer } from "react-leaflet";
   const Map = ({ center, zoom }) => {
   return (
     <MapContainer style={{ height: "100vh" }} center={center} 
        zoom={zoom}>
      <TileLayer
          attribution='&copy; <a 
          href="http://osm.org/copyright">OpenStreetMap</a> 
          contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
   </MapContainer>
   );
  };
  Map.defaultProps = {
   center: [42.3265, -122.8756],
   zoom: 6,
  };
  export default Map;

iii. call this component inside your app.js file

import Map from "./components/Map";
function App() {
 return (
     <div>
      <Map/>
    </div>
   );
 }
export default App;

Great! Now you should be able to see a map like this after starting the project
yarn start

Next, Let's add some markers to our map. For this we need to use Marker component from react-leaflet.
Add the following code to a new component and name it something like LocationMarker.js

  import {Marker} from  'react-leaflet';
  const LocationMarker = ({ lat, lng}) => {
     return (
        <Marker position={[lat, lng]}>
        </Marker>
     );
   };
   LocationMarker.defaultProps = {
     lat: 42.3265,
     lng: -122.8756,
   };
export default LocationMarker;

Notice, how I pass latitude and longitude as an array to the position prop of Marker component.

Wait but we're not done yet, there's still an issue which I faced after this. The default icon wasn't getting displayed on the map, it was just an empty image placeholder.

The workaround for this is however very simple, all we need to do is provide a defaultIcon ourselves.
Quickly add these lines of code to our LocationMarker component

  import L from "leaflet";
  import Icon from "leaflet/dist/images/marker-icon.png";
  import iconShadow from "leaflet/dist/images/marker-shadow.png";

  let DefaultIcon = L.icon({
     iconUrl: Icon,
     shadowUrl: iconShadow,
     iconSize: [32, 32],
     shadowSize: [28, 28],
});

**L.Marker.prototype.options.icon = DefaultIcon**;

This should solve the problem of missing icon image on the map. And now, you should be able to see the default icon on the map at co-ordinates = [42.3265,-122.8756].

We can also add a popup on the marker to display some information about that position on the map.
Quickly, update the LocationMarker component with these lines of code.


  import {Marker, Popup} from 'react-leaflet';
  const LocationMarker = ({ lat, lng, info}) => {
     return (
        <Marker position={[lat, lng]}>
         <Popup> {info} </Popup>
        </Marker>
     );
  };
  LocationMarker.defaultProps = {
   lat: 42.3265,
   lng: -122.8756,
   info : 'I love leaflet <3'
 };
export default LocationMarker;

If you face any problem related to this post than comment below.
And Stay tuned for next part of this blog series.
Thank you.