How to resolve Node.js APIs through polyfills

Through Azion CLI, you can initialize an application based on starter templates or link an existing project. The list of supported web frameworks includes Next.js, React, Vue, Angular, Astro, JavaScript itself, and others. These JavaScript frameworks run at Azion’s edge, on top of Azion Runtime.

The projects built with these frameworks typically use Node.js APIs. Through the Azion build process, carried by Azion Bundler, these APIs are resolved through the use of polyfills.

This guide will show how to use Node.js Buffer API through polyfills in a JavaScript project by using Azion CLI and Azion Bundler.

Requirements

Before getting started, you must have:

An Azion platform account with Edge Functions enabled.
The latest version of Azion CLI installed.
Code editor.
Access to the terminal.
Node.js ≥ 18.

Initializing a JavaScript project on the edge

On the terminal, initialize the project:

  azion init

Enter the name polyfills-guide:

Your application s name:  (glorious-curiosity) polyfills-guide

Choose the JavaScript preset:

? Choose a preset:  [Use arrows to move, type to filter]
  Angular
  Astro
  Docusaurus
  Eleventy
  Emscripten
  Gatsby
  Hexo
  Hono
  Hugo
> Javascript
  Jekyll
  ...

Choose the Hello World template:

? Choose a template:  [Use arrows to move, type to filter]
  Azion Edge SQL
  Drizzle + Neon Sample
  Drizzle + TiDB Sample
  Drizzle + Turso Sample
  Edge Function GitHub AutoDeploy
  Fauna DB Boilerplate
> Hello World
  HTMX Boilerplate
  Simple Javascript Router Node
  ...

Enter y to start a local development server.
Enter y to install project dependencies.
Access the port that was returned in the terminal. Example:

[Azion Bundler] [Server] › ✔  success   Function running on port 0.0.0.0:3333, url: http://localhost:3333

Go back to the terminal and terminate the process.
Access your project:

cd polyfills-guide

Open the azion.config.js file. It’ll look like this:

import { defineConfig } from 'azion';

export default defineConfig({
  build: {
    entry: 'main.js',
    preset: {
      name: 'javascript',
    },
  },
});

This is the file where you can add specific configurations for your project. For example, the polyfills property can be set to true or false to control whether or not to allow the use of polyfills:

import { defineConfig } from 'azion';

export default defineConfig({
  build: {
    entry: 'main.js',
    preset: {
      name: 'javascript',
    },
    polyfills: true, // allows the use of polyfills
  },
});

In our example, you can leave the file as it is. Polyfills are allowed by default.

After applying these settings, you can import the necessary APIs into your project. This example uses the Node.js Buffer API:

Inside main.js:

// Import the Buffer class from the 'buffer' module in Node.js
import { Buffer } from "node:buffer";

const main = async (event) => {
  // Create a buffer from the string "Hello Edge!" with UTF-8 encoding
  const helloBuffer = Buffer.from("Hello Edge!", "utf8");

  // Log the buffer content as a hexadecimal string
  console.log(helloBuffer.toString("hex"));
  // Expected output: 48656c6c6f204564676521

  // Log the buffer content as a base64 string
  console.log(helloBuffer.toString("base64"));
  // Expected output: SGVsbG8gRWRnZSE=

  // Overwrite part of the buffer with the string "World" at the specified offset and length
  helloBuffer.write("World", 6, 5, "utf8");

  // Log the updated buffer content as a string
  console.log(helloBuffer.toString());
  // Expected output: Hello World!

  // Return the buffer content as a response with a 200 status
  return new Response(helloBuffer.toString(), { status: 200 });
};

export default main;

Run the project locally by running:

azion dev

Now you can check the logs in the terminal and see the Buffer API working through polyfills.

Learn how to resolve Node.js APIs through polyfills. Watch the video below: