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.jsimport { 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:
Contributors