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 template:
Getting templates available? Choose a template for your project: (Use arrow keys) >Javascript Angular Astro Hexo Next React Vue Vite
-
Enter
y
to start a local development server. -
Enter
y
to install project dependencies. -
Choose a package manager.
-
Access the port that was returned in the terminal. Example:
[Azion Bundler] [Server] › ✔ success Function running on port 0.0.0.0:3000, url: http://localhost:3000
-
Go back to the terminal and terminate the process.
-
Access your project:
cd polyfills-guide
- Create the
bundler.config.js
file and paste the following properties:
module.exports = { entry: 'main.js', builder: 'webpack', useNodePolyfills: true,};
- 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.jsimport { Buffer } from 'node:buffer';
// Define a function named 'myWorker' that takes an event as an argumentexport 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");}
- 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.