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 Vulcan, 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 Vulcan.

Requirements

Before getting started, you must have:

Initializing a JavaScript project on the edge

  1. On the terminal, initialize the project:
Terminal window
  azion init
  1. Enter the name polyfills-guide:
Terminal window
Your application s name:  (glorious-curiosity) polyfills-guide
  1. Choose the JavaScript template:
Terminal window
Getting templates available? Choose a template for your project: (Use arrow keys)
 >Javascript
  Angular
  Astro
  Hexo
  Next
  React
  Vue
  Vite

  1. Enter y to start a local development server.

  2. Enter y to install project dependencies.

  3. Choose a package manager.

  4. Access the port that was returned in the terminal. Example:

Terminal window
[Vulcan] [Server] › ✔  success   Function running on port 0.0.0.0:3000, url: http://localhost:3000

  1. Go back to the terminal and terminate the process.

  2. Access your project:

Terminal window
cd polyfills-guide
  1. Create the vulcan.config.js file and paste the following properties:
polyfills-guide/vulcan.config.js
module.exports = {
  entry: 'main.js',
  builder: 'webpack',
  useNodePolyfills: true,
};
  1. After applying these settings, you can import the necessary APIs into your project. This example uses the Node.js Buffer API:

Inside main.js:

polyfills-guide/main.js
// Import the Buffer class from the 'buffer' module in Node.js
import { Buffer } from 'node:buffer';


// Define a function named 'myWorker' that takes an event as an argument
export default function myWorker(event) {
  // Create a new Buffer instance 'buf1' from the string "x"
  var buf1 = Buffer.from("x");
  // Create a new Buffer instance 'buf2' from the string "x"
  var buf2 = Buffer.from("x");
  // Compare 'buf1' and 'buf2' using the Buffer.compare method,
  // which returns a number indicating the equality of the buffers
  var a = Buffer.compare(buf1, buf2);


  // The result will be 0 since both buffers are equal
  console.log(a);


  // Now, let's swap the values of 'buf1' and 'buf2'
  buf1 = Buffer.from("y");
  buf2 = Buffer.from("x");
  // Compare 'buf1' and 'buf2' again
  a = Buffer.compare(buf1, buf2);


  // Here, the result will be 1
  console.log(a);


  // The function returns a new Response object with the string "Testing buffer polyfills"
  return new Response("Testing polyfills");
}
  1. Run the project locally by running:
Terminal window
azion dev

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

Contributors