Azion Bundler is a powerful tool designed to build and adapt projects for edge computing. It handles module resolution and applies necessary polyfills through unjs/unenv while providing an abstraction layer over popular bundlers like esbuild and webpack. The tool includes a local development environment for testing and debugging, and processes Infrastructure as Code (IaC) through its manifest system.
For those who just want to use Azion Bundler in their project without contributing to the development, you can install it directly from npm.
npm install edge-functionsor if you prefer yarn:
yarn add edge-functionsFollow these steps to start using Azion Bundler:
-
Clone the repository: Clone the Azion Bundler repository from GitHub to your local machine.
git clone https://github.com/aziontech/bundler.git
-
Installation: Navigate to the cloned Azion Bundler directory and install the required dependencies.
cd bundler npm yarn install -
Install the Azion Bundler CLI globally, which allows you to use it as a command-line tool from anywhere in your system.
npm install -g
This command sets up the necessary project structure and configuration files for Azion Bundler.
-
Start developing: Once the project is set up, you can start developing your JavaScript applications or frameworks using the power of Bundler.
See some examples below:
-
Build a JavaScript/Node project (back-end)
ef build
-
Build a TypeScript/Node (back-end)
ef build --preset typescript
-
Build a Next.js project
ef build --preset next
-
Build Astro.js project
ef build --preset astro
-
Test your project locally (after build)
ef dev
The Azion Bundler CLI provides several commands to help you manage your edge applications:
⚠️ *Deprecation Notice: Support for the webpack bundler will be discontinued in future releases. While it is still available for now, new features, fixes, and improvements will be focused exclusively on esbuild. We recommend migrating to esbuild as soon as possible to ensure compatibility and better performance in upcoming versions.
Builds your project for edge deployment.
ef build [options]
Options:
-e, --entry <string> Code entrypoint (default: ./handler.js or ./handler.ts)
-p, --preset <type> Preset of build target (e.g., vue, next, javascript)
--polyfills Use node polyfills in build (default: true)
-w, --worker Enable worker mode with addEventListener signature (default: false)
-d, --dev Build in development mode (default: false)
-x, --experimental Enable experimental features (default: false)Starts a local development environment.
ef dev [entry] [options]
Arguments:
entry Specify the entry file (default: .edge/worker.dev.js)
Options:
-p, --port <port> Specify the port (default: "3333")
-x, --experimental Enable experimental features (default: false)Manages Azion configuration settings with CRUD operations.
ef config <command> [options]
Commands:
create Create a new configuration property
read Read configuration properties
update Update existing configuration properties
delete Delete configuration properties
Options:
-k, --key <key> Property key (e.g., build.preset or edgeApplications[0].name)
-v, --value <value> Value to be set (for create/update commands)
-a, --all Read or delete entire configuration (for read/delete commands)
Examples:
$ ef config create -k "build.preset" -v "typescript"
$ ef config read -k "edgeApplications[0].name"
$ ef config update -k "build.bundler" -v "esbuild"
$ ef config delete -k "build.polyfills"
$ ef config read --allManages presets for Azion projects.
ef presets <command> [preset]
Commands:
ls List all available presets
config Get Azion configuration file for a specific preset
Arguments:
preset Preset name (required for config command)
Examples:
$ ef presets ls
$ ef presets config react
$ ef presets config nextManages store configuration.
ef store <command> [options]
Commands:
init Initialize store configuration
destroy Remove store configuration
Options:
-c, --config <json> Configuration in JSON format
-s, --scope <scope> Scope of the store (default: global)Manages manifest files for Azion.
ef manifest [action] [options]
Arguments:
action Action to perform: "transform" (JSON to JS) or "generate" (config to manifest)
(default: "generate")
Options:
-e, --entry <path> Path to the input file or configuration file
-o, --output <path> Output file/directory path
Examples:
$ ef manifest transform -e manifest.json -o azion.config.js
$ ef manifest generate -e azion.config.js -o .edge
$ ef manifest -e azion.config.js -o .edgeThe configuration file (azion.config.js or azion.config.ts) offers a robust configuration system for Bundler. With Azion Bundler, you can extend configurations and leverage pre-configured framework presets for immediate use. The tool empowers users to create their own automations and extensions, making it highly customizable for specific project needs.
As the JavaScript engine powering the Azion CLI, it seamlessly integrates with Azion Libraries to read presets and pre-configured bundler settings from azion/bundler and framework presets from azion/presets. The bundler follows a modular architecture with specialized modules like @build, @prebuild, and @postbuild through the build command.
The configuration is divided into two main areas:
- The
buildproperty manages all bundler-related settings, including entry points, presets, and build configurations - Other properties (like domain, origin, cache, rules) are related to Azion CDN and Edge Computing platform settings
While these hooks are pre-configured in framework presets, you can customize them in your azion.config.ts to fit your specific needs. You can either create your own configuration from scratch or extend existing presets. Here's an example of extending the Next.js preset:
import { defineConfig } from 'azion';
import type { AzionPrebuildResult, AzionConfig } from 'azion/config';
import { emscripten } from 'azion/presets';
export default defineConfig({
build: {
extend: (config) => {
config.define = {
...config.define,
'global.customFeature': 'JSON.stringify(true)',
'process.env.CUSTOM_VAR': 'JSON.stringify("value")'
}
return config
},
preset: {
...emscripten,
prebuild: async (config: AzionConfig, ctx: BuildContext): Promise<AzionPrebuildResult> => {
// Your custom prebuild logic here
const result = await doSomething();
return {
...result,
}
}
}
}
});-
Config Validation
- Validates user configuration using
validateConfig - Ensures configuration schema compliance
- Early error detection and user feedback
- Validates user configuration using
-
Dependencies Check
- Verifies required dependencies are installed
- Validates build environment requirements
-
Preset Resolution (
@modules/preset)- Resolves preset from string name or custom module
- Loads built-in presets from azion/presets
- Validates preset interface and metadata
-
Build Config Setup (
@modules/config)- Resolves configuration priorities in the following order:
- CLI arguments (highest priority)
- User config file (
azion.config.js) - Preset defaults (lowest priority)
- Sets up bundler configuration
- Configures build options and extensions
- Resolves configuration priorities in the following order:
-
Prebuild Phase (
@modules/prebuild)- Executes preset's prebuild hooks
- Prepares build environment and dependencies
- Framework-specific build preparations
-
Handler Resolution (
@modules/handler)- Resolves entry point/handler from CLI args, preset, or user config
- Validates file existence and accessibility
- Supports multiple entry points
-
Worker Setup (
@modules/worker)- Processes handler files and converts to worker-compatible format
- Detects handler patterns (ES Modules, Service Worker, Legacy)
- Generates appropriate wrappers for development/production
- Creates temporary worker files for bundling
-
Core Build (
@modules/core)- Processes bundler configuration (esbuild/webpack)
- Handles file imports and dependencies
- Applies polyfills and transformations
- Generates optimized output
-
Cleanup
- Removes temporary files created during build
- Cleans up intermediate build artifacts
-
Postbuild Phase (
@modules/postbuild)- Executes preset's postbuild hooks
- Post-processing optimizations
- Asset finalization
-
Bindings Setup (
@modules/bindings) [Future]- Configures Azion platform bindings
- Sets up edge functions connections
- Currently in development
-
Storage Setup (
@modules/storage) [Future]- Configures edge storage connections
- Sets up data persistence layers
- Currently in development
-
Environment Setup (
@modules/environment)- Creates initial
azion.config.jsfrom preset if none exists - Merges configurations (user config takes precedence over preset defaults)
- Stores build settings locally for development and subsequent builds
- Creates initial
-
Environment Variables
- Copies and processes environment variables
- Sets up runtime environment context
- Handler Patterns
- Node.js APIs
- Nextjs
- Rust/Wasm example
- Emscripten/Wasm example
- Env vars example
- Storage example
- Firewall example
E2E tests run daily in the Bundler Examples to ensure that the presets and frameworks continue to work correctly.
Table:
| Test | Status |
|---|---|
| Next 14 2 15 Middleware | ✅ |
| Next 13 5 6 I18n | ✅ |
| Next 12 3 4 I18n | ✅ |
| Hexo Static | ✅ |
| Next 13 5 6 Middleware | ✅ |
| Next 12 3 4 Middleware | ✅ |
| Next Node Pages 12 3 1 | ✅ |
| Next 13 5 6 Config | ✅ |
| Next 12 3 4 Config | ✅ |
| Next Static | ✅ |
| Gatsby Static | ✅ |
| Next Node Pages 12 3 1 Fs | ✅ |
| Vue Vite Static | ✅ |
| Next 12 Static | ✅ |
| Astro Static | ✅ |
| Qwik Static | ✅ |
| Simple Js Env Vars | ✅ |
| Eleventy Static | ✅ |
| Simple Js Network List | ✅ |
| Angular Static | ✅ |
| React Static | ✅ |
| Svelte Static | ✅ |
| Stencil Static | ✅ |
| Vitepress Static | ✅ |
| Preact Static | ✅ |
| Vuepress Static | ✅ |
| Nuxt Static | ✅ |
| Docusaurus Static | ✅ |
| Simple Js Firewall Event | ✅ |
| Simple Js Network List With Firewall | ✅ |
| Jekyll Static | ✅ |
| Simple Js Esm Worker | ✅ |
| Simple Js Esm Node | ✅ |
| Simple Ts Esm | ✅ |
| Simple Js Esm | ✅ |
Last test run date: 06/30/25 04:01:14 AM
Check the Contributing doc.