Unlock Effortless Edge Deployment with Azion Bundler and Node.js Polyfills

As developers, we’re all familiar with the accelerated, ever-changing world of web frameworks. Sometimes, it can be overwhelming since excelling at using a specific framework requires a deeper understanding that goes beyond just knowing the programming language. One of the significant obstacles faced is configuring the project to run smoothly in different environments.

What if you could deploy your project on the edge of the network, leveraging low latency, security, and availability without worrying about the specific environment? This blog post explores the concept of adapting projects to run at the edge and introduces a solution that simplifies the process.

Adapting Projects to Run at the Edge

To ensure a seamless deployment, a project must be structured in a way that avoids friction with the host platform. It isn’t uncommon to encounter situations where the settings required to run an application on one platform bear little resemblance to those needed for a different platform. This can lead to vendor lock-in, where switching hosts becomes costly in terms of time and money, forcing customers to stick with the current service provider.

At Azion, we value the power of open-source software and aim to empower modern web development. Our platform enables the initialization and deployment of projects in various web frameworks, including:

• Next.js
• React
• Vue
• Astro
• Angular
• Hexo
• Vite
• JavaScript itself

Azion provides its own Edge Runtime designed to deliver an optimal experience for running applications at the edge. This runtime powers Azion Edge Functions and opens up a world of possibilities for both developers and companies. Additionally, we’ve developed Azion Bundler to bridge the gaps and enable web frameworks to run natively at the edge. Azion Bundler is invoked by Azion CLI and simplifies the integration of polyfills for edge computing, revolutionizing the process of creating workers, especially for Azion’s platform.

Polyfills are code snippets used in JavaScript to provide modern functionality to environments that don’t natively support it. Polyfills fill in the gaps, ensuring consistent behavior across different browsers. For example, let’s consider a runtime that lacks support for a specific Node.js API, which a project depends on. During the build process, Azion Bundler recognizes the signature of this API and replaces it with a relative API, eliminating the need for manual project adaptation.

Azion Bundler excels in setting up an intuitive and streamlined protocol for the creation of presets. It’s an open-source tool under the MIT License and encourages contributions from the community. This feature enhances customization and allows developers to adapt their applications to unique project requirements, providing the flexibility needed to optimize them effectively.

Configuring a Project

The Azion CLI is a tool that enhances the developer experience. With the CLI installed in your environment, initializing a project is as simple as running the following command:

azion init

This command initiates an interactive journey where you can choose the desired template.

Once you’ve selected a template, each framework will present a specific set of steps. Choose to run the project locally and install the required dependencies.

Leveraging Polyfills

Azion Bundler makes it possible to leverage polyfills. Let’s take a closer look at how to configure a project to utilize this feature.

Example: suppose you want to initialize a JavaScript project that utilizes the Node.js Buffer API. To achieve this, you need to inform Azion Bundler that the project implements polyfills.

Azion Bundler reads a configuration file called bundler.config.js. Create this file and include the following properties:

module.exports = {
   entry: 'main.js',
   builder: 'webpack',
   useNodePolyfills: true,
};

- entry: represents the primary entry point for your application where the build process begins. Not applicable to Jamstack solutions.

- builder: defines the build tool to use, either esbuild or webpack.

- useNodePolyfills: specifies whether Node.js polyfills should be applied.

After applying these settings, you can import the necessary APIs into your project. For example, let’s consider importing the Node.js Buffer:

Inside 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 Buffer.compare method
  // This method returns a number indicating whether 'buf1' is equal to 'buf2'
  var a = Buffer.compare(buf1, buf2);

  // In this case, it'll return 0, because they're 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 it returns 1
  console.log(a);

  // The function returns a new Response object with the string "Testing buffer polyfills"
  return new Response("Testing polyfills");
}

To run the project locally, use the following command:

azion dev

Now, you can access the project locally.

Note: make sure you’re in the root directory of your project for the commands to execute correctly.

The azion dev command initiates the build process, which is seamlessly handled by Azion Bundler and returns the port to access the project.

The sample project used in this example can be found in the Azion Samples repository on GitHub.

Edge Runtime, Azion Bundler, and Azion CLI

Process explained

1. The user initiates the process by running azion init via Azion CLI and selects the desired template.
2. Azion CLI then invokes Azion Bundler, which takes charge of initializing the project.
3. Once initialized, Azion Bundler hands the project back to the user, who then decides whether to deploy the project or run it locally.
4. If the user opts to run the project locally, Azion Bundler triggers the build process and generates the worker.
5. If the user decides to deploy the project, they run the azion deploy command. This initiates the build process again, after which Azion CLI creates an edge application and deploys it onto Azion’s distributed edge network.
6. Upon successful deployment, Azion CLI provides the domain of the application. After a brief waiting period, the application becomes accessible.

Responsibilities

Azion CLI: the command-line interface that serves as the primary point of interaction between the user and the system. It manages the entire application deployment process, ensuring a smooth and efficient workflow.

Azion Bundler: the engine that drives project initialization, building, and adaptation. It intelligently tailors the project based on the selected template, ensuring that the application is optimally configured for its intended use.

Azion Edge Runtime: the runtime environment that hosts the application and manages its execution. The application is distributed through Azion’s global network of Edge Nodes, ensuring that it’s always close to users, thereby maximizing speed and efficiency.

By utilizing Azion’s platform, developers can now enjoy a better deploying experience for web frameworks at the edge. Adapt your projects to run seamlessly while focusing on the core functionality rather than worrying about the specific environment. With Azion’s Edge Runtime and Azion Bundler tool, developers gain the power to optimize their applications effectively, leveraging low latency, security, and availability at the edge of the network.