DEV Community: Hrishikesh Pathak

How to host Nodejs API on Netlify for free

Hrishikesh Pathak — Thu, 04 Jan 2024 00:00:00 +0000

Hosting a Nodejs API is not very critical these days. In this era of cloud computing and serverless environment, you don't have to create your server and configure everything from scratch.

These days, most hosting providers give a free tier to new users. If you are a hobbyist and only want to host some small projects, then these free resources are enough. Render, and Railway are such types of solutions you can check out.

If you don't want a stateful server to manage steady connection eg, WebSockets with the client, then you can also opt for serverless offerings. All major cloud providers have their serverless offerings.

The main benefit of serverless computing is its cost-effectiveness. If you are building a startup and don't want to manage servers of your own, then you can opt for serverless. this saves you a lot of time and also money.

What is Netlify functions

Netlify function is a serverless offering from Netlify. Netlify function is a wrapper on AWS lambda functions and comes with a very generous free tier.

Netlify function is built as an extension to their JAMstack offering. Using Netlify functions, now a static JAMStack website can run server code and give a personalized response to a user.

The most important part is, you can include the server code in the same project. During the build, Netlify can extract the code and process it accordingly and provide an API endpoint for the developer.

You can use Javascript, Typescript, and Golang to code your Netlify functions.

Setting up a Netlify functions project

To set up your Netlify functions project create netlify/functions/ directory in your project root.

mkdir -p netlify/functions

If you don't have any front-end and only want to host a Nodejs API, then initiate a Nodejs project first using npm init and then create netlify/functions directory in your project root.

npm init -y
mkdir -p netlify/functions

Define API routes in Netlify functions

The base URL of an API hosted on the Netlify function is https://yourdomain.com/.netlify/functions/. Yes, I know it is very long and there is a way to change this using proxies. I am discussing this in the later part of this blog.

Netlify function uses file-based routing. You can use 3 different ways to define an API route in Netlify functions. For example, you want to host your API in https://yourdomain.com/.netlify/functions/hello endpoint. For this, your directory structure should be one of these 3 ways.

netlify/functions/hello.js
netlify/functions/hello/index.js
netlify/functions/hello/hello.js

Basic Nodejs API for Netlify functions

Continuing from the previous example, we want to host an API in https://yourdomain.com/.netlify/functions/hello endpoint and therefore created a hello.js file inside the netlify/functions directory.

Inside the hello.js file, we will write a simple function that returns a JSON hello world response when invoked.

exports.handler = async function (event, context) {
    return {
        statusCode: 200,
        headers: { "content-type": "application/json" },
        body: JSON.stringify({ msg: "Hello world" }),
    }
};

In the above code example, I have exported an async function which returns an object with a JSON body. In addition to this, I have sent the appropriate header and a 200 status code.

The event argument in the exported function can provide you with some basic yet useful set of information.

{
  "path": "Path parameter (original URL encoding)",
  "httpMethod": "Incoming request’s method name",
  "headers": {Incoming request headers},
  "queryStringParameters": {Query string parameters},
  "body": "A JSON string of the request payload",
  "isBase64Encoded": "A boolean flag to indicate if the applicable request payload is Base64-encoded"
}

Local Netlify functions development

After you finish developing your Netlify function, install netlify-cli npm package in your project.

npm i -D netlify-cli

Then add an npm script in the package.json file to run the local development server.

{
    "name": "netlify-function-hello",
    "version": "1.0.0",
    "description": "",
    "scripts": {
        "serve": "netlify functions:serve"
    },
    "devDependencies": {
        "netlify-cli": "^13.2.2"
    }
}

Now execute npm run serve to run your local dev server. Visit http://localhost:9999/.netlify/functions/hello to invoke your first Netlify function.

Change the function directory and port

You can customize the Netlify function directory and port using a netlify.toml file in your project root.

If you want to change your functions directory from netlify/ to netlify-functions/ and change the port from 9999 to 5000, then the netlify.toml file should look like this.

[dev]
functions = "netlify-functions"
functionsPort = 5000

Deploying Netlify functions from Github

To deploy your Netlify function, first, initiate a git repository and commit all the changes. Don't forget to create a .gitignore file and ignore the node-modules directory.

git init
touch .gitignore
git add .
git commit -m"first commit"

The content inside .gitignore file should look like this.

node_modules
.netlify
.gitignore

Now create a new GitHub repository and push all the changes to that repository.

git branch -M main
git remote add origin "github repository link"
git push -u origin main

Now import this repository in a new Netlify project and the rest will be done by Netlify automatically for you.

Once you finish deploying your function, Netlify gives you an URL with which you can access your Nodejs API by visiting https://<baseurl.com>/.netlify/functions/hello endpoint.

Proxy URL in Netlify functions

The deployed endpoint is too long and boring. But the good news is you can change it using a proxy. Let's see how to do that.

Inside your netlify.toml file, add a redirect block. There you can define redirect from and redirect to parameters for incoming requests.

[[redirects]]
from = "/api/*"
to = "/.netlify/functions/:splat"
status = 200

Now, every request comes to the /api/ endpoint, and Netlify redirects it to /.netlify/functions/ endpoint. It means, now you can access your deployed API in https://<baseurl.com>/api/hello endpoint.

Conclusion

Netlify function is a great way to deploy a Nodejs API in a serverless environment. Unlike AWS lambda functions, Netlify function is very developer friendly and easy to use. In addition to this, a free uses quota also attracts developers to host their hobby Nodejs APIs in the Netlify functions.

In this blog, we have discussed an end-to-end strategy to code and deploy a Nodejs API in the Netlify function. We have also seen how to test the function locally. In the end, You have learned how to use a proxy to redirect incoming requests in Netlify functions.

If you want to explore the serverless computing options, you much look into Cloudflare Worker and Deno deploy. These two are not based on Nodejs but you can run javascript and typescript functions in them. They provide minimum latency and maximum performance.

If you have any questions, drop a mail to my inbox and consider to subscribe my newsletter for new updates.

Use TailwindCSS with Eleventy Static Site Generator

Hrishikesh Pathak — Tue, 11 Jul 2023 00:00:00 +0000

If you are building a blog with Eleventy and want to add TailwindCSS for styling, then this is the guide for you. Please read till the end don't skip any steps.

TailwindCSS is a CSS library that uses utility classes to style HTML markup. Therefore, now you don't have to go back and forth from your HTML to CSS files to apply any style. Just declare the utility classes and TailwindCSS will handle the rest.

Eleventy is a very simple static site builder. Eleventy converts markdown and template languages such as Nunjucks and Liquid to plain HTML. Eleventy is a non-opinionated library and gives you complete freedom as a developer.

Prerequisite to follow this guide

I hope you have experience with javascript and CSS. If you have previously used TailwindCSS then it helps but is not necessary. You can pick TailwindCSS along the way. Eleventy is simple, no prior experience is required.

If you don't have an Eleventy project ready, please create one by following this official documentation.

Installation

First, install tailwindcss package as a developer dependency in your project.

npm install -D tailwindcss

Now initialize tailwindcss by the following command.

npx tailwindcss init

This command creates a tailwind.config.js file in your project root. Inside this file, add the path to your HTML and template files.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,njk}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

As my HTML and template files are present inside the src directory and I use Nunjucks as my templating language, I have added "./src/**/*.{html,njk}" in the content key.

Now, create a style.css file and add these 3 lines.

@tailwind base;
@tailwind components;
@tailwind utilities;

Lastly, the package.json file and add a script dev:tailwind.

{
    "dev:tailwind": "tailwindcss -i ./src/style/base.css -o ./_site/output.css --watch",
}

When you run npm run dev:tailwind, this script generates an output.css file in the _site directory.

_site is the default out directory of eleventy. If you have configured a different out directory in your eleventy.js file, then change the script accordingly.

Link TailwindCSS from HTML and template files

Open your HTML or any template file and link the output.css using the HTML <link> tag.

<link rel="stylesheet" href="/output.css"/>

Now the setup is complete. Start Eleventy server is one terminal using eleventy --serve and run npm run dev:tailwind in another terminal.

When you add any TailwindCSS class in your template, TailwindCSS generates the related CSS on the fly and you can see the style reflected in the browser window instantly.

Add DaisyUI with TailwindCSS

If you don't want to write long Tailwind classes and want a pre-made UI component, then DaisyUI may be the perfect companion for you. DaisyUI is a Tailwind extension and doesn't require any serious setup.

First, install the DaisyUI library.

npm install -D daisyui

Now edit your tailwind.config.js file to add DaisyUI.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,njk}", "./.eleventy.js"],
  theme: {
  },
  daisyui: {
    themes: ["light", "dark"],
  },
  plugins: [require("daisyui")],
};

That's it. Daisy UI gives you light and dark themes out of the box. You can also customize those themes to your liking.

Go through the DaisyUI documentation to see what components are available to you for use in your project.

Production build of Eleventy and TailwindCSS

After you finish developing your Eleventy project with TailwindCSS, it is important to make an optimized build. Add the following script to your package.json file.

{
    "build": "eleventy && tailwindcss -i ./src/style/base.css -o ./_site/output.css --minify",
}

When you run the npm run build command, eleventy export your content into static HTML, and Tailwind creates a minified CSS file for optimized performance.

Conclusion

In this guide, you have learned how to add TailwindCSS to your Eleventy project. In addition to these, you have learned about daisyUI to make beautiful components using TailwindCSS.

If you learned something new, please share it with your followers and connections. In the meantime, you can read the following articles.

Convert SVG into PNG in the browser using Resvg

Hrishikesh Pathak — Thu, 29 Jun 2023 14:05:09 +0000

To convert SVG into PNG in the browser, you can use the Resvg-js wasm module.

Setting up the project

Create an index.html file and fetch resvg-wasm module.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img id="output">
    <script src="https://unpkg.com/@resvg/resvg-wasm"></script>
</body>
</html>

Create an index.js file and link it to the index.html file.

<script type="module" src="./index.js"></script>

Working with Resvg-wasm

Inside the index.js file, I am using an IFEE function expression. You can also add some event handlers to invoke javascript functions. But for simplicity, the code inside index.js will run immediately when the page loads.

First, initialize the resvg-wasm module using the initWasm method.

await resvg.initWasm(
    fetch("https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm")
  );

Now defining some options. You can check out for more options in the documentation.

const opts = {
    fitTo: {
      mode: "width", // If you need to change the size
      value: 800,
    },
  };

This is the final part. Convert an SVG image into a PNG image using resvg-wasm

const svg ='<svg>...</svg>'; // Input SVG, String or Uint8Array
  const resvgJS = new resvg.Resvg(svg, opts);
  const pngData = resvgJS.render(svg, opts); // Output PNG data, Uint8Array
  const pngBuffer = pngData.asPng();
  const pngURL = URL.createObjectURL(
    new Blob([pngBuffer], { type: "image/png" })
  );
  document.getElementById("output").src = pngURL;

Wrap the code inside an IFEE to invoke immediately on page load.

(async function () {
    await resvg.initWasm(
    fetch("https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm")
  );

    const opts = {
    fitTo: {
      mode: "width", // If you need to change the size
      value: 800,
    },
  };

    const svg ='<svg>...</svg>'; // Input SVG, String or Uint8Array
  const resvgJS = new resvg.Resvg(svg, opts);
  const pngData = resvgJS.render(svg, opts); // Output PNG data, Uint8Array
  const pngBuffer = pngData.asPng();
  const pngURL = URL.createObjectURL(
    new Blob([pngBuffer], { type: "image/png" })
  );
  document.getElementById("output").src = pngURL;
})();

Further read:

Schedule Cloudflare Worker using Cron Triggers

Hrishikesh Pathak — Sun, 23 Apr 2023 15:33:00 +0000

Cloudflare Workers are an excellent way to run serverless functions at the edge of the network. They run on a custom V8 engine, which gives them exceptional cold start times. (For more information, see "Eliminating Cold Starts with Cloudflare Workers"). In addition to being responsive to standard HTTP requests, Cloudflare Workers can be scheduled using cron triggers.

Define Cron Triggers in Cloudflare worker

Open your wrangler.toml file in your Cloudflare Worker project. If you are new to Cloudflare Worker development, you can read this blog on how to set up a Cloudflare project using Miniflare.

Cloudflare cron trigger expressions contain 5 fields. This is the pattern you should follow to define a cron trigger.

*     *     *     *     *
-     -     -     -     -
|     |     |     |     |
|     |     |     |     +----- day of the week (1 - 7) (“MON”, “fri”)
|     |     |     +------- Months 1-12, or (“JAN”, “aug”)
|     |     +--------- day of the month (1 - 31)
|     +----------- hour (0 - 23)
+------------- min (0 - 59)

For example, if you want your function to run every day at 2:30 AM, you would use the following cron expression:

30 2 * * *

For more examples like this, visit the Cloudflare Worker documentation page.

Once you have decided on your cron trigger expression, add these expressions as an array in the wrangler.toml file.

[triggers]
crons = ["0 3 * * *","0 14 * * *"]

After deploying this worker, it will execute at 3 and 14 hours GMT.

Scheduled Cloudflare Worker

The syntax of a scheduled Cloudflare Worker is different. The Worker script listens for the scheduled event and then handles the event accordingly.

addEventListener("scheduled", (event) => {
  event.waitUntil(handleCron(event));
});

async function handleCron(event){
    console.log("Scheduled worker executed")
}

You can now perform any background tasks, such as updating your database or fetching from an API, within the handleCron function.

Testing Cron Triggers Locally using Wrangler

First, install the Wrangler package from NPM in your Cloudflare project.

npm i wrangler

Now run the npx wrangler dev -test-scheduled command to run your scheduled worker. This command creates a /__scheduled route, which can be used to test the worker using an HTTP request.

Viewing Logs and Upcoming Jobs

Once you have scheduled your Cloudflare Worker using a cron trigger, you can view the logs in the Workers log tab. This will allow you to see any errors or other information related to the execution of your function. You can find the upcoming job inside the triggers tab.

Important: Scheduled Workers are triggered in GMT time. Please adjust the time according to your timezone.

A better way to set up a Cloudflare worker project locally with Miniflare

Hrishikesh Pathak — Sun, 29 Jan 2023 15:37:00 +0000

Cloudflare worker is a serverless computing platform offered by Cloudflare. Unlike other serverless platforms like AWS Lambda or google cloud function, Cloudflare worker has a 0ms cold start. Which makes your code runs almost instantly when a request comes.

Cloudflare worker leverages the global Cloudflare infrastructure and deploy your script in every region of the world. Once you publish your worker script Cloudflare ensures you have the same superfast speed irrespective of your user location and traffic.

In addition to all these features, Cloudflare worker is also paired with serverless edge storage called workers KV which is equally responsive to Cloudflare worker. If you have a read-heavy application and don't want to waste time on maintaining servers, then Cloudflare worker may be the perfect choice for you.

Install Miniflare to start developing worker scripts locally

As far as we have discussed many positive features of Cloudflare workers that it seems almost irresistible to try out this service. But the primary roadblock for Cloudflare workers is its developer experience.

Cloudflare provides you with a very nice CLI tool called wrangler to develop your worker script and publish it on the Cloudflare platform. But wrangler should constantly be connected with Cloudflare servers and requires a steady internet connection to work.

It is a major setback for developers who want a nice and responsive developer experience to build new things with workers. The responsiveness of the wrangler project is compromised due to network latency. Now the obvious question should be, "is there any solution to this problem? Can I improve my Cloudflare worker development experience?"

Recently Cloudflare introduces Miniflare. As its name suggests, Miniflare is a feature-rich but miniature version of Cloudflare worker. Miniflare is a simulator that provides an environment for developing and testing Cloudflare worker scripts locally. Miniflare is written in typescript and supports most of the Cloudflare worker features like the KV database, durable objects, WebSockets, etc.

In addition to all these features, miniflare is fully local and works without an internet connection. It can instantly reload the server on code changes and provide an all-rounded developer experience.

To install miniflare in your project, first scaffold a Nodejs project inside a directory by running:

npm init -y

Now install the miniflare package by simply installing the miniflare package from npm as a development dependency.

npm i -D miniflare

Open your package.json file and add "main":"./src/index.js" field. This helps miniflare to decide which JavaScript file to run when you start your miniflare server.

{
  "name": "miniflare project",
  "version": "1.0.0",
  "main": "./src/index.js"
}

Let's add a script to our package.json file to run the miniflare server in watching mode. This script restarts our server when some code changes and make our development faster.

{
  ...
  "scripts": {
    "dev": "miniflare -w",
  },
  ...
}

After all the initial setup is complete, let's write your first hello world worker and run using miniflare.

Write your first hello world Cloudflare Worker script

First, create a src directory in your project root and then create a index.js file. Cloudflare Worker supports javascript by default. They choose javascript because javascript runs on a secure sandboxing environment by default.

But if you are not very familiar with javascript, you can also write worker scripts using C, C++, and Rust programming language and compile them into a web assembly binary. Cloudflare workers can run web assembly code, but this method posed a toll on the performance. Please keep that in mind.

Inside our index.js file, we create a fetch event listener. When a user requests the server, the fetch event is triggered and the callback function within it is executed. It is very similar to the front-end javascript code.

Inside the callback function, we create a Response object and send it back to the user using the event.respondWith method.

addEventListener("fetch", (event) => {
  event.respondWith(new Response("Hello world"));
});

To run this code, in your terminal run the npm run dev command. It calls the miniflare server to start and watch for any file change. Miniflare server starts in port 8787 and you can access it from your browser by visiting the http://localhost:8787 address.

Congratulations🎉! You have made your first Cloudflare worker script.

Return JSON response from Cloudflare Worker

If you are making a REST API server using Cloudflare worker, then it is more sensible to send a JSON response to the client rather than some plain text.

In Cloudflare worker, to send JSON response, you have to set the content-type header to application/json;charset=UTF-8. Thus the client understands that a JSON response is coming from the server.

In addition to setting the header, you should also send a valid JSON object as a response so that the client can parse and extract the data easily. In JavaScript, we can use the JSON.stringify method to convert an object into a valid JSON string.

addEventListener("fetch", (event) => {
  event.respondWith(
    new Response(JSON.stringify({ msg: "Hello world" }), {
      headers: {
        "content-type": "application/json;charset=UTF-8",
      },
      status: 200,
    })
  );
});

In the above example, I respond to the incoming request with a JSON object. The first parameter in the Response object is always the body and after that, you can define your headers.

In addition to the headers, I have also sent a status code. This is completely optional and you can omit this entirely.

How to make network requests using Cloudflare worker

If you intend to communicate other services from Cloudflare worker, you can easily achieve this functionality using the fetch API. You can use the fetch API to make an HTTP request from Cloudflare Worker.

For demonstration, I am sending a GET request to a placeholder REST API endpoint. But you can make any type of request using the fetch API. If you are not very familiar with fetch, then this is a very intuitive guide from MDN that covers how to use fetch to make an HTTP request from your browser.

We all know that network requests are async in nature. We have to wait a bit before expecting a response from the remote server. But the callback function inside the fetch event listener don't support the async and await keyword.

Therefore, we need to make a separate async function that returns a Promise<Response>. Then we call the function from the event.respondWith() method.

Before making any external HTTP request, let's break down our previous code into 2 separate functions. We also use the async keyword in the new function and call from the event.respondWith() method.

addEventListener("fetch", (event) => {
  const request = event.request;
  event.respondWith(handleRequest(request));
});
async function handleRequest(request) {
  return new Response(JSON.stringify({ msg: "Hello world" }), {
    headers: {
      "content-type": "application/json;charset=UTF-8",
    },
    status: 200,
  });
}

Here handleRequest function is asynchronous. It takes a request argument and returns a Response with a proper header and status code. Inside the callback function, I call this handleRequest function and pass the request from the event.request method.

I think the concept of using asynchronous JavaScript in Cloudflare Worker is now clear to you. Let's make another function called sendHttpRequest which handles all the fetch API logic and return a formatted JSON response.

const sendHttpRequest = async () => {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/users");
    const jsonResponse = await response.json();
    return jsonResponse[0];
  } catch (error) {
    console.error(error);
  }
};

The demo URL https://jsonplaceholder.typicode.com/users returns a list of dummy users. In this code, I only return the first user by using jsonResponse[0]. If you want, you can dump the entire incoming response or do some modifications from your side.

Inside the handleRequest function, create a new Response with proper headers and status code. Then encode the object returned from sendHttpRequest function and send it back to the user.

async function handleRequest(request) {
  return new Response(JSON.stringify(await sendHttpRequest()), {
    headers: {
      "content-type": "application/json;charset=UTF-8",
    },
    status: 200,
  });
}

Now run the miniflare server using the npm run dev command and visit http://localhost:8787 from your browser. You can see dummy user details in your browser screen.

Add CORS headers in Cloudflare Worker response

CORS or Cross Origin Resource Sharing is not allowed in your browser. Browsers put this restriction for a very good reason. It enhances your online security and only allows connections from the same origin. Simply, if you are visiting foo.com, your front-end website can't connect to any random servers, which URL is different from the foo.com/* scheme.

But assume you have a hosted API with a different domain name and you want to connect with it from your front-end application. In this scenario, you can explicitly allow the front-end website to access your server by configuring your CORS headers.

To set CORS headers on your Cloudflare Worker response, you have to modify Access-Control headers and customize them as per your own needs. If you want to allow some specific domains, you can define them in the Access-Control-Allow-Origin header. If you want to make your API public and want to let any website connect to your server, just set * in the Access-Control-Allow-Origin header. Let's see how to use this concept in code.

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "*",
  "Access-Control-Max-Age": "86400",
};
async function handleRequest(request) {
  return new Response(JSON.stringify(await sendHttpRequest()), {
    headers: {
      ...corsHeaders,
      "Access-Control-Allow-Headers": request.headers.get(
        "Access-Control-Request-Headers"
      ),
      "content-type": "application/json;charset=UTF-8",
    },
    status: 200,
  });
}

Here you can see, I have set wildcard * to Access-Control-Allow-Origin and Access-Control-Allow-Methods headers. This implies that any domain and any type of HTTP request can connect to my server.

Build your Cloudflare Worker project using esbuild

When your worker script becomes very long and complex, developers like you and me find it very hard to manage the code itself. Using esbuild with Cloudflare Worker, you can separate your code into different files.

Esbuild enables you to use standard Javascript import and export syntax to pass utility functions across the files. At the build time, esbuild takes all those files and creates a single minimal file optimized to run on Cloudflare Worker.

To install esbuild in your Worker project, run the following command.

npm i -D esbuild

Open your package.json file and modify the main and scripts fields to add esbuild in your build process.

{
  "name": "miniflare project",
  "version": "1.0.0",
  "main": "./dist/index.js",
  "scripts": {
    "dev": "miniflare -w",
    "build": "esbuild --bundle --sourcemap --outdir=dist ./src/index.js"
  }
}

From now on, when you run the npm run build command, esbuild will take all the files inside the src directory and export the build into the dist directory.

Deploy Cloudflare Worker using wrangler CLI

After you finish building your Cloudflare Worker script, now it is high time to deploy the worker script. Cloudflare provides a nice tool for this task called wrangler. Using wrangler, you can easily configure your deployment from your terminal.

First, install the wrangler package using npm as a dev-dependency.

npm i -D wrangler

To create a new wrangler project, use the wrangler init command. If you want to generate a default wrangler project, use this command with a --yes flag.

npx wrangler init --yes

The above command creates a new Worker typescript project with testing files using Vitest. If you want to keep your project simple and don't want to add any typescript and testing, just avoid the --yes flag.

Now open your wrangler.toml file and customize the name and main field as per your need. Here I change the main field to dist/index.js, as esbuild saves the build output in the dist directory.

name = "first-script"
main = "dist/index.js"
compatibility_date = "2023-01-21"

Now add a build command inside the wrangler.toml file. The build command will run when we run the wrangler publish command from our terminal.

name = "first-script"
main = "dist/index.js"
compatibility_date = "2023-01-21"
[build]
command = "npm run build"
[build.upload]
format = "service-worker"

At last, add the wrangler publish command as a script in your package.json file.

"scripts": {
  "dev": "miniflare -w",
  "build": "esbuild --bundle --sourcemap --outdir=dist ./src/index.js",
  "deploy": "wrangler publish"
},

Now when you run the npm run deploy command, wrangler will run esbuild to build your local miniflare project and saves it into the dist directory. Then wrangler will authenticate your local project and publish the build to their servers.

Conclusion

In this blog, we have discussed the use of miniflare, esbuild, and wrangler to streamline our Cloudflare Worker development workflow. By following this tutorial, you can develop and deploy your worker within minutes.

From now on, you are not dependent on a stable internet connection to develop and test your worker script. It increases your productivity as a developer and gives you a very nice development experience.

If you want to know how to deploy a static site using Cloudflare pages, then please read How to deploy Next.js app on Cloudflare pages. You can follow me on Twitter for the latest blog updates or subscribe to my newsletter for more.

Detect and blur faces in flutter using pixlab API

Hrishikesh Pathak — Fri, 06 May 2022 19:25:46 +0000

We all have seen tagging facilities in Facebook or Instagram where app can recognize faces and suggest us to tag them in our photos. The process works so smoothly that it give a nice user experience to the user.

Sometimes those apps blur some faces. This can be done because of some privacy reasons or sometime user upload some explicit content which is not accurate for mass users.

If we analyze these two workflows, at first we need to detect the faces in an image. After detection, we can apply other types of photo manipulation techniques, for example blurring or applying some filters or suggest tagging someone.

If you want to implement this face detection in your flutter app, and you are not an AI/ML expert, then surely it will be very hard for you. You have to learn OpenCV or other tonnes of bits and pieces to give a feature, which is pleasant to have to the user.

In programming paradigm, it is said “never reinvent the wheel”. As time is valuable and as a programmer, you have to move fast, you can use some services that can do all the heavy lifting for you. You can detect faces, blur faces, extract data from images or from an ID card etc. The newest and most popular service for the aforementioned feature is PixLab.

What is Pixlab

Now let us take a look at what is Pixlab. Pixlab is a Software as a service (SaaS) platform known for providing machine vision and media processing API. It has 130 API endpoints and numbers of endpoints growing forever.

You can use their API for your business without a doubt as they come with 99.9% uptime guarantee and 24/7 support.

They have 4 tiers of pricing, and you can find more about them here

What are we building

Here in this article, we are building an image detector app with flutter. The app will detect human faces from an image. After that, detected faces will automatically blur and displayed inside the app.

The final version of the app will look like this.

Supported Devices

As we are using flutter, and not using any platform specific dependency, you can run this app in all the platforms that flutter supports. I have personally tested this app on android, windows and Linux and this is running smoothly.

If you get any error during this tutorial, please let me know in the comments.

App structure

At first, create a new flutter project. Install flutter you don't have flutter installed already in your system. Then navigate to your folder of choice and run

flutter create pixlab_demo

A new project of flutter will be created inside the pixlab_demo folder. Open this folder inside a text editor. I am using Visual Studio Code for this purpose.

Then inside the lib/main.dart file, delete all the demo code and write

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: FaceBlurPage(),
    ),
  );
}

Now create a stateful widget named FaceBlurPage().

class FaceBlurPage extends StatefulWidget {
  const FaceBlurPage({super.key});

  @override
  State<FaceBlurPage> createState() => _FaceBlurPageState();
}

class _FaceBlurPageState extends State<FaceBlurPage> {
  @override
  Widget build(BuildContext context) {

  }
}

Install dependencies

In this app, we are going to make HTTP request to Pixlab API endpoints. So we need a HTTP client. In flutter, dio is a very powerful and easy to use HTTP client. To install dio inside your project, run.

flutter pub add dio

After dio has successfully installed in your project, you need to have an API key to interact with the Pixlab endpoints. For that, signup for a pixlab plan and acquire an API key.

Your API key may look like this 74fg2erg46a1fe159er8rd8a4545a4.

HTTP requests in flutter

Making and HTTP request in flutter is not very hard. As we have installed dio package, this make our life very easy.

If you are a beginner and don't know much about HTTP requests, this is a very helpful guide to make your basics clear.

To make a GET request in flutter, at first create an instance of dio and write

import 'package:dio/dio.dart'

// Instentiating Dio
var dio = Dio();

// Making a get request in dio
dio.get("https://yourdomain.com")

For making a POST request, similarly, we have to create an instance of dio and provide a body in addition.

import 'package:dio/dio.dart'

// Instentiating dio
var dio = Dio()

// Making a post request
dio.post("https://yourdomain.com",data:{})

Inside the data parameter, you can put your body of the request.

In this article, we will use only these 2 type of HTTP request, so this quick introduction may help you to dive deep in this article.

Detect faces from an image in flutter

At first, create a variable named imagelink inside the stateful widget. There, you provide your image URL. I am using this image for this tutorial. You can use any images as per your want.

String imagelink = "https://pixlab.io/images/m3.jpg";

Now create a function named detectFaces(). This will be an async function and will return a Future of Response. Inside this function, we make a GET request to pixlab facedetect API endpoint.

In the request, we have to provide 2 query parameters. First one is the image URL, and then the API key. For image URL, we will use imagelink variable we defined earlier.

The complete function will look like this.

import 'package:dio/dio.dart';

var dio = Dio();

// Detect faces using pixlab API
  Future<Response> detectFaces(String image) async {
    return dio.get(
      "https://api.pixlab.io/facedetect",
      queryParameters: {
        "img": image,
        "key": pixlabkey,
      },
    );
  }

This function returns a JSON response, which we can access by response.data method.

The response will look something like this.

{
    "faces": [
        {
            "face_id": 1,
            "bottom": 118,
            "right": 386,
            "top": 74,
            "left": 343,
            "width": 44,
            "height": 45
        },
        {
            "face_id": 2,
            "bottom": 159,
            "right": 210,
            "top": 107,
            "left": 158,
            "width": 53,
            "height": 53
        },
        {
            "face_id": 3,
            "bottom": 127,
            "right": 516,
            "top": 84,
            "left": 472,
            "width": 45,
            "height": 44
        },
        {
            "face_id": 4,
            "bottom": 156,
            "right": 135,
            "top": 94,
            "left": 73,
            "width": 63,
            "height": 63
        },
        {
            "face_id": 5,
            "bottom": 211,
            "right": 504,
            "top": 159,
            "left": 452,
            "width": 53,
            "height": 53
        },
        {
            "face_id": 6,
            "bottom": 163,
            "right": 301,
            "top": 101,
            "left": 239,
            "width": 63,
            "height": 63
        },
        {
            "face_id": 7,
            "bottom": 136,
            "right": 631,
            "top": 84,
            "left": 579,
            "width": 53,
            "height": 53
        }
    ],
    "status": 200
}

This facedetect endpoints give us the coordinate of all the faces present in the image. By using these coordinates, you can draw a rectangle or blur the faces. Use your creativity and tell what can you do will all these data in the comments.

Blur detected faces in flutter

As the objective of our article is to detect and blur face data, we are finally reached at this stage to blur the faces. Are you excited ? Let's make it happen together.

Make a function named blurface(). This is an async function and make a POST request to the Pixlab mogrify API endpoint. The function returns a Future of Response. Inside the body of the POST request, we have provided a JSON object. It consists of our image, API key and the face coordinates we get from the above face detection function.

The function will look like this

import 'package:dio/dio.dart';

var dio = Dio();

// Blurring faces using facial coordinates
  Future<Response> blurface(String image, List coordinates) async {
    return await dio.post(
      "https://api.pixlab.io/mogrify",
      data: {
        "img": image,
        "key": pixlabkey,
        "cord": coordinates,
      },
      options: Options(contentType: "application/json"),
    );
  }

This endpoint responds with a JSON object which contain blurred image link, that we can download or directly display inside our flutter app with Image.network() widget.

Building the UI

After making all the utility functions, detectFaces() and blurface(), Now this is the time to build our user interface.

We keep the interface very minimal. We define a column inside the body of the scaffold. Then the first element of the column will be the preview of our image. We will use network image for this purpose.

Then beside the preview image, we define a placeholder text for our final processed blurred image from pixlab.

Then inside the floating action button, we make an icon button, when we click this button, our previously defined function detectFaces() and blurface() function will run.

Working of the app

e a GET request to pixlab API endpoint will our preview image to detect all the faces inside the image.

This API endpoint response with a JSON object with all the face coordinates present inside the app.

Then we take those coordinates and put them inside blurface() function. Then make a POST request with all the face coordinates inside the body of the request.

Now pixlab API's do their magic and response with a blurred face image url, which we will use to disply inside our app as a final output.

Final result and code

The final result of the app is looked like this.

I am using setstate() to update the blurImageLink variable, so that final image can be displayed inside the app.

The complete code of the app looks like this.

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

void main() {
  runApp(
    const MaterialApp(
      home: FaceBlurPage(),
    ),
  );
}

class FaceBlurPage extends StatefulWidget {
  const FaceBlurPage({super.key});

  @override
  State<FaceBlurPage> createState() => _FaceBlurPageState();
}

class _FaceBlurPageState extends State<FaceBlurPage> {
  String pixlabkey = "74389de25cb37a10adf615e8a79c8da4";
  String imagelink = "https://pixlab.io/images/m3.jpg";
  String? blurImagelink;

  // Instentiating Dio
  var dio = Dio();

  // Detect faces using pixlab API
  Future<Response> detectFaces(String image) async {
    return dio.get(
      "https://api.pixlab.io/facedetect",
      queryParameters: {
        "img": image,
        "key": pixlabkey,
      },
    );
  }

  // Blurring faces using facial coordinates
  Future<Response> blurface(String image, List coordinates) async {
    return await dio.post(
      "https://api.pixlab.io/mogrify",
      data: {
        "img": image,
        "key": pixlabkey,
        "cord": coordinates,
      },
      options: Options(contentType: "application/json"),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Face Blur Example"),
      ),
      body: Column(
        children: [
          Image.network(imagelink),
          blurImagelink != null
              ? Image.network(blurImagelink!)
              : const Text("No image provided"),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          Response faces = await detectFaces(imagelink);
          Response blurfaceImageResponse =
              await blurface(imagelink, faces.data["faces"]);
          setState(() {
            blurImagelink = blurfaceImageResponse.data["ssl_link"];
          });
        },
        child: const Icon(Icons.auto_mode_rounded),
      ),
    );
  }
}

Conclusion

It is a very fun project to learn how to use pixlab API to integrate AI/ML detection features in your app. If you stuck at something, please let me know. My twitter ID is @hrishikshpathak.

Bonus tip : If you don't want to make multiple request to access your image and bring down your CDN cost, you can use Cached_Network_Image package. This package will cache your network image and make your app more smoother and use less data in user device.

State Restoration in flutter

Hrishikesh Pathak — Wed, 02 Feb 2022 07:06:29 +0000

State restoration is very crucial for your app. If you are reading this blog post, then I bet that you need this cool tech.

So what is state restoration? Let’s understand it with a little story.

Imagine you are using an app and playing a quiz game. In the middle of the game, someone calls you for something urgent. But you are on the final round of your quiz game you don’t want to lose your progress.

Now in this condition, if your app doesn’t support state restoration, once you close your app, your app goes to background. After some time of inactivity, the operating system kills your app.

Imagine you have to lose your progress in the app only because the developer hasn’t implemented state restoration in the app. This is a poor UX in my opinion. Now the question is how to fix it.

What is flutter state restoration?

Let me introduce you to the flutter state restoration techniques. A combination of widgets, mixins and functions, that let us developers seamlessly integrate state restoration across android and ios apps.

App state restoration is very critical from the perspective of user experience. If you properly implement state restoration techniques in your app and follow all the best practices, then surely you can deliver a great user experience.

In this blog post, we will discuss 2 use cases and examples of state restoration. These are,

State restoration of flutter counter app.
State restoration of a text field.

This will be a very long article. Bring some tea or coffee and enjoy the article.

Some basics and terminology

Before getting started, let us understand some basic terminology used in flutter state restoration.

RestorationScopeId: restorationScopeId is a property of MaterialApp and you have to set a unique string for your app as restorationScopeId.
RestorationMixin: RestorationMixin is used to restore the state of a stateful widget. Remember, state restoration is only applicable for the stateful widgets. This restoration mixin does all the heavy lifting for us.
Restorable property: We use RestorableProperty instead of a normal variable inside a stateful widget. The state is stored inside a RestorableProperty during runtime and it knows how to restore its value during startup. For example in the flutter counter app, we use RestorableInt instead of a normal integer as a type of the counter value. By using RestorableInt, now RestorationMixin can safely store and retrieved the counter value.
Restoration ID: RestorationMixin saves the state of the stateful widget inside a RestorationBucket. So RestorationMixin needs a unique namespace inside the RestorationBucket to save all the registered properties. For that purpose, we have to declare a restorationId.
registerForRestoration: registerForRestoration is a function that is used to register a restorable property for state restoration. It requires a unique restorationId so that RestorationMixin can find its location in the RestorationBucket.
RestorationBucket: RestorationBucket is the storage where all the restoration data is saved by the RestorationMixin. During app initialization, RestorationMixin read the values stored inside RestorationMixin and restore the state.

We can visualize the hierarchy with the help of this diagram.

State restoration of flutter counter app

We all know the flutter counter app. This is the default app flutter gives us when we create a new flutter project.

To demonstrate the working process and implementation of flutter state restoration, I think the counter app is the best example anyone can give you.

This is the code you get under your main.dart file while you create your flutter app. I have removed all the comments to reduce the clutter.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

First, add a unique restorationScopeId inside your material app. It requires a string. Be creative and come up with a unique name.

MaterialApp(
++      restorationScopeId: 'app',
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );

Now we have to add the RestorationMixin. It enables us to store the state of the stateful widget in the restoration bucket.

Here we add the RestorationMixin with _MyHomePageState class. Be cautious, we have to add the mixin with _MyHomePageState not with MyHomePage.

-- class _MyHomePageState extends State<MyHomePage>{
++ class _MyHomePageState extends State<MyHomePage> with RestorationMixin{

}

Now we have to add a RestorationProperty to store state. For that, we replace the type of _counter variable from an int into RestorableInt.

class _MyHomePageState extends State<MyHomePage> with RestorationMixin{
--  int _counter = 0;
++  RestorableInt _counter = RestorableInt(0);
}

As _counter is now a RestorableInt, we can get the integer value of the _counter variable by using _counter.value property.

Let’s change our code to adopt the new behavior of _counter variable.

void _incrementCounter() {
    setState(() {
--    _counter++;
++    _counter.value++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
--            '$_counter'
++            '${_counter.value}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }

Now we have to make 2 overrides inside out stateless widgets. At first, we have to provide a unique restoration Id. This restorationId reserves space inside the restoration bucket for our widget.

@override
  String? get restorationId =>"homepagestate";

Now we override a function named restoreState. We register our restorable property (eg. _counter) for restoration. Without registration, state restoration for restorable properties will not work.

@override
  void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
    registerForRestoration(_counter, "counter");
 }

Till now we have successfully modified our counter app. Now our app supports state restoration. The final code for our app looks like this.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with RestorationMixin{
  RestorableInt _counter = RestorableInt(0);

  void _incrementCounter() {
    setState(() {
      _counter.value++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${_counter.value}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }

  @override
  String? get restorationId =>"homepagestate";

  @override
  void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
    registerForRestoration(_counter, "counter");
  }
}

State restoration of a text field

To restore the value of a text field, we need a text editing controller. To add the state restoration behavior, we use RestorableTextEditingController.

Inside a StatefulWidget we declare our RestorableTextEditingController.

late RestorableTextEditingController _controller;

Now we initialize this controller inside the initState. Also, don’t forget to add the dispose method. Otherwise, our app will have some serious memory leakage issues.

In the text field of RestorableTextEditingController you can specify any default text to start with. For now, I leave it as a string without any value.

@override
  void initState() {
    _controller = RestorableTextEditingController(text: "");
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

Now inside your TextField add the _controller we have defiled above.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: TextField(
++        controller: _controller.value,
      ),
    );
  }

Now your TextField becomes restorable. Test it inside your emulator or a real device.

Issues

This is a built-in state restoration technique flutter gives us out of the box. Surely we can use these restoration techniques in production.

But all these features come up with a drawback. we can’t use it inside a stateless widget. As per the documentation, RestorationMixin only restores the state of the Stateful widgets.

As the large flutter apps use other state management like bloc, getx or riverpods, only stateful widget support is not enough. Hope in the future, we can see a more robust implementation of flutter restoration.

Conclusion

For a production-ready app, the state restoration technique is a must to have. It gives a nice user experience. If your app restores the app state smoothly, the quality and trustworthiness of the app will increase.

To make your more user-friendly, you can use semantics. Semantics helps disabled people to properly use your app. Accessibility is the major reason for adding semantics labels.

Don’t know how to do this? Read my new article on How to use semantics in Flutter.

If you want to get updated with this type of latest tech article, make sure to subscribe to this blog and follow me on Twitter.

Deploy flutter web app to Cloudflare pages

Hrishikesh Pathak — Thu, 06 Jan 2022 05:59:43 +0000

What is flutter web

Flutter web is the web implementation of flutter framework. Now you can compile your dart code to run on the web with the help of flutter web.

When you're finished writing your app in dart, flutter will compile your dart code into JavaScript using dart2js and inject it inside an HTML page.

Flutter uses canvas to display its content in the web. It is suitable for web apps, but if you want to optimize your app for SEO, then flutter is not an ideal option to choose from.

Now you can also watch this video instead of reading this whole article to get a live demonstration of the deployment.

How to build flutter web projects

The building of a flutter web project is fairly simple. Inside your project root folder, type

flutter build web

This command build your flutter project and populate the released version of your app inside the build/web directory inside your project directory.

Peanut installation

To serve the release build of our flutter app, and to make our life easier, we use a package called Peanut.

This package build our web project and push the output in a separate branch. Thus, we can set the release branch as a production branch at the server.

Initially, it is created to work with GitHub pages. But we can use this functionality to host our site to any of the static hosting service provider.

To install peanut package :

flutter pub global activate peanut

Build your project and save the output in production branch :

flutter pub global run peanut -b production

Now, if we check the production branch, then we can see the static sites resulting from the flutter build commands.

You can now push these changes to the remote branch e.g.: GitHub and now we are ready to start our deployment.

Configure Cloudflare pages

Login to Cloudflare Pages and go to the pages section. Click on create a project button.
Select your GitHub or GitLab account and choose your repository of your flutter project.

Then click on Begin Setup button.
In the production branch, change it to production or gh-pages as per your peanut -b command above.

In the build setting, set framework preset to None, build command should be empty as our site is prebuilt with peanut and in the build output directory, leave it empty.

Now click on deploy. Cloudflare is automatically initialized the environment and deploy your project in their global network of CDNs.

Check out this article to know more about configure Cloudflare pages for static sites.

Alternatives

If you want to host your flutter web application, then there are many services you can find. Vercel and Netlify are one of those great option you can go with. But I personally like Cloudflare pages more. I am a long time vercel user for my Next.js projects. But their pricing model is not very good in my opinion, once you have reached on a certain usage limit.

You can also host your app on GitHub pages. This is also a free service. But GitHub pages is geared more towards showcase proof of concept and small project. For a large project, GitHub pages is not sufficient, I think.

If you are enjoying any other hosting provider, let me know, I will be happy to edit this blog and add your favorite one.

Conclusion

Flutter web is in its very early stage. But many production grade app like Rive is created using flutter web. So it gives hope to flutter developer to try out different web projects with flutter.

If you want a multiplatform application, then flutter will be the best choice for you.

Flutter ecosystem is growing daily and community is very bullish about it. I am a believer and want to see this project grow.

Deploy your Next.js app on Cloudflare pages

Hrishikesh Pathak — Sat, 25 Dec 2021 19:46:27 +0000

Cloudflare pages is a new hosting provider for JAMstack apps. It is gaining a lot of traction among developers. There are many reasons behind it. But the real reason is surely because of their pricing model.

They are offering 3 crucial services free for their users. Now you can add unlimited sites, unlimited bandwidths and unlimited request for free. You don't have to pay a dime, even if you are receiving a huge number of page views in your site daily.

The offer is very lucrative. Isn't it ? So to test this out, In this tutorial we are going to deploy a Next.js website in Cloudflare pages.

Now the question is why Next.js not a simple create-react-app website ? This is because, Next.js is the most popular framework among JAMstack developers.

Setting up the project

Before start deploying our site to Cloudflare pages, we have to do some basic drill. Make sure to follow along.

Create a new Next.js app

For this tutorial, we are going to make a new Next.js site. So run these commands to make a new Next.js website.

npx create-next-app <your project name>

Make a GitHub repository

We need a GitHub repository. I assume that you have a GitHub account. Cloudflare pages fetch your source code from this repository to build your website.

After creating your repository, you can see a GitHub address given inside your repository. The address should be like https://github.com/<your username>/<your repository name>.git. Copy this address for future use.

Now come to your Next.js project root and run these commands one by one.

git init

git add .

git commit -m"Initial commit"

git branch -M main

git remote add origin https://github.com/<your username>/<your repository name>.git

git push -u origin main

Now refresh your git repository, and you can see your Next.js source code inside your repository.

Create a Cloudflare account

Signup for Cloudflare pages. Then click on the Create a project button.

Then select your GitHub account and your GitHub repository that we have created earlier. If your repository is not appearing, go to your GitHub account a give proper permission to Cloudflare extension.

Then Cloudflare will guide you with their pretty simple UI.

Build and deploy your Next.js site

Now inside the build command, if you select Next.js static export then the build commands are appearing as

next build && next export

Now Just hit deploy and Cloudflare will build and deploy your site across their global network of CDNs. Congratulation, now you can serve unlimited visitors absolutely for free!!

What is working and what is not

At the time of writing of this article, Cloudflare pages doesn't support any of the Next.js flagship features like getStaticProps,getStaticPaths and getServerSideprops.

Cloudflare pages also don't support API routes. The Image component of Next.js is also not working.

Basically, Cloudflare pages do a static export of your Next.js site and serve only static files.

As the platform is in its early stage, we can expect support of these features in the future. If you are not using getServerSiteProps in your website, then Cloudflare offer build hooks. This build hooks trigger redeployment using webhook from your CMS.

Alternative to Next.js API routes

If you are heavily dependent on Next.js API routes, then you can use Cloudflare workers. This is an amazing platform for build API and, like Next.js API routes, it is also serverless.

Currently, I am using Cloudflare workers in production and found a very good result. It is cheap and very fast.

Some Errors to be noted

If you are using the latest version of Next.js, Sometime it can give you error on building the project. Actually, the version of node.js used in the build process is quite old. So you can set a newer version of NodeJS in your pages environment variable.

NODE_VERSION : 16.13.1

Conclusion

So, You have now learned how to deploy your Next.js site in Cloudflare workers. Look, the thing is that no platform is perfect. If you're a developer like me and want to host your portfolio site with some blog posts here and there, I think Cloudflare pages is a better choice than vercel.

If you are trying to build a site with a lot of moving parts, then I think, vercel is the best option you can get. Decision is yours. No one is perfect. We as a developer have to compromise. Now it is your turn.

Don't forget to show me what you are building. I am on Twitter as @hrishikshpathak.

Flutter counter app, but using isolates

Hrishikesh Pathak — Mon, 02 Aug 2021 17:28:00 +0000

Asynchronous and parallelism are two different things. Let's take an example. Our brain can do only one thing at a time. It can't handle two different things at the same instant. If you want to talk about multitasking here, it is actually asynchronous in nature. In multitasking, if a job is taking more time, then we move to another work and when the first job is done, we come back to process the output from the first job.

It is simple, right. Till now, it looks like asynchronous processing is the bast way to boost our productivity, right ? Yeah, but not 100% right.

Nowadays, multicore CPU are default in our machines, it can do a lot of different things parallelly. So to use this architecture, we have to make our software in a way to use multicore or multiple thread.

But the thing is that flutter use only one thread, and it does all of its work on a single thread. In this thread, it has to pump 60 Frames Per Second to give a fluid experience to the end user. If we do some heavy work or long-running task in this thread, Then flutter thread will be busy in the heavy work and as a result frame rates of our app will drop and the app looks sluggish, or stutters.

So what to do ? How to do heavy lifting work in out flutter app ? There are many ways to this in flutter. Like writing asynchronous code or using compute function.

But the best way I have found that to use an isolated. If you haven't heard this name before, don't worry. I am here to help.

What is an Isolate in flutter

Isolate is a container which is completely separate from flutter thread and don't share any memory with the app. Isolate means a CPU thread which run in its own sandbox. We can create an isolate from a flutter app and communicate with an isolate by passing messages to and fro with the isolate.

So enough of introduction, let's see how to create and use isolates in flutter.

What we are going to make

Here we will use the basic flutter counter app and implement isolate to generate random numbers. Just like the vanilla flutter counter app, but with isolate. Excited ? Let's dive in.

How to create an Isolate in flutter

To create Isolate in flutter, we need to import dart:isolate package. We can start an isolate from our main thread with Isolate.spawn method. This is the entry point to our isolate, and we have to pass a ReceivePort in Isolate.spawn method to receive message from the isolate and listen the messages as a stream in the main thread.

Let us create a stateful widget named MyApp in flutter.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Counter"),
      ),
      body: Center(child: Text("1")),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),
    );
  }
}

Now, I define the Isolate _isolate variable in the top of the stateful widget. As we need to listen, the incoming values from the isolate inside the build function as a stream.

Then in the initState function in our widget, we start our isolate and pass a ReceivePort.

@override
void initState() {
  spawnIsolate();
  super.initState();
}

Future spawnIsolate() async {
  ReceivePort _receivePort = ReceivePort();
  _isolate = await Isolate.spawn(remoteIsolate, _receivePort.sendPort,
      debugName: "remoteIsolate");
}

In the above code, remoteIsolate is the entry point of the isolate.

We have defined a ReceivePort _receivePort and send the _receivePort.sendPort to the created isolate. This sendPort is the address of the main thread of the application. We have given our isolate a name called remoteIsolate. This will be helpful to debug our code later.

This remoteIsolate can use sendPort to send data to the main thread.

Now inside the remoteIsolate function, which is the entry point of our isolate, we define the working or functionality of our isolate.

static void remoteIsolate(SendPort sendPort) {
  sendPort.send("Hi i am from remote Isolate");
}

We can listen to this message in our main thread using the ReceivePort.

_receivePort.listen(
  (message) {
    print(message);
  },
);

Till now, I think you have understood the basic working of an Isolate and how to use ReceivePort and SendPort to communicate between isolate and the main thread.

Bidirectional communication between isolate and the main-thread

Bidirectional communication between isolate and the main thread is very useful if we have to use the same isolate repeatedly.

To send a message from the main-thread to our isolate, we need the sendPort of the isolate. To get that sendPort, we the isolate is initialize for the first time, we create a ReceivePort inside the isolate and send the sendPort to the main thread as a message.

Then we can use this sendPort of the isolate to send a message from our main thread.

Let's modify our remoteIsolate function from above.

static void remoteIsolate(SendPort sendPort) {
  ReceivePort _isolateReceivePort = ReceivePort();
  sendPort.send(_isolateReceivePort.sendPort);
}

Now we have to identify the sendPort from the rest of the message in our main-thread.

_receivePort.listen(
  (message) {
    if (message is SendPort) {
      message.send("SendPort from Isolate received");
    }
  },
);

Now we can use this sendPort to send any message to the isolate. So we can now use bidirectional messaging in flutter isolate and can reuse the isolate over and over again.

Flutter counter app using Isolate

As I have promised before in this article, This is the complete source-code of isolate implementation in the flutter counter app.

import 'dart:isolate';
import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ReceivePort? _receivePort;
  Isolate? _isolate;
  SendPort? _isolateSendPort;

  static void remoteIsolate(SendPort sendPort) {
    ReceivePort _isolateReceivePort = ReceivePort();
    sendPort.send(_isolateReceivePort.sendPort);
    _isolateReceivePort.listen((message) {
      if (message == "+") {
        sendPort.send(Random().nextInt(100));
      }
    });
  }

  Future spawnIsolate() async {
    _receivePort = ReceivePort();
    _isolate = await Isolate.spawn(remoteIsolate, _receivePort!.sendPort,
        debugName: "remoteIsolate");
  }

  @override
  void initState() {
    spawnIsolate();
    super.initState();
  }

  @override
  void dispose() {
    if (_isolate != null) {
      _isolate!.kill();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Counter"),
      ),
      body: Center(
        child: StreamBuilder(
          stream: _receivePort,
          initialData: "NoData",
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.data is SendPort) {
              _isolateSendPort = snapshot.data;
            }
            return Container(
              child: Text(
                snapshot.data.toString(),
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _isolateSendPort!.send("+");
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

If you have like this article, leave a comment. If you want to use a file picker in flutter, you can read this article. Follow me on Twitter to discuss cool new tech.