Home Blogs Edgio’s Edge Functions
Applications

About The Author

Outline

Rev Up Your Performance at the Edge of Greatness

Imagine being able to run JavaScript code right at the edge of the network, close to your users. That’s exactly what Edge Functions allow you to do! These nifty functions are deployed on every Point of Presence (PoP) in the network, which means they are distributed and operate at strategic locations globally. By processing requests and responses locally at these PoPs, Edge Functions significantly reduce latency, boost performance, and enhance the user experience with personalized content and improved security. By handling tasks such as authentication and redirection at the edge, you cut down on the back-and-forth to the original server, speeding up your services significantly.

Now, let’s take it a step further with CDN-as-Code. Think of it as managing your content delivery network (CDN) configurations through code, just like how infrastructure-as-code (IaC) works. With CDN-as-Code, you store CDN settings in version control systems, automate deployments with CI/CD pipelines, and ensure consistent environments across all stages. This approach streamlines CDN management, reduces errors, and allows for dynamic, programmable control over CDN behaviors. The result? Efficient, flexible, and reliable content delivery that scales effortlessly and enhances your overall service.

Edgio offers a powerful CDN-as-Code platform that elevates the concept to next level. Within Edgio platform, you can define CDN behavior using EdgeJS in a file (routes.[js|ts]) that is embedded within your application code. This tight integration leverages the strengths of source control for easy collaboration and aligns your CDN configurations with specific versions of your web app. It ensures that CDN management is as streamlined and efficient as the rest of your development workflow.

For more information on this and to setup your own site on our platform, visit  the CDN-as-Code documentation.

With our JavaScript framework-based website now deployed on Edgio, it’s time to set up Edge Functions. In this article, we’ll explore a couple of use cases where Edge Functions can be effectively leveraged. Edgio allows you to create and manage Edge Functions either through the CLI or directly within the Edgio console. We will explore deploying Edge Functions via CLI first.

If you haven’t done so already, install Edgio CLI. In this example, we have used npm package manager for our project –

npm i -g @edgio/cli@latest

More information can be found here – How to install Edgio CLI

When you initialize a property using our CLI (edgio init), it automatically generates two essential files: routes.js and edgio.config.js. However, if your web application supports TypeScript and utilizes a framework that has a TypeScript implementation available, our CLI will create routes.ts instead of routes.js.

An edge function activates when an incoming request matches a designated route. Each route can have only one edge function. If multiple routes match a request, the edge function assigned to the last matching route is triggered.

Here you see a route added in the route.ts file

edgio-edge-functions-routes

This code snippet defines a rule using the .match() method to determine when an edge function should be executed. Essentially, it checks if an incoming request meets certain criteria, such as having a specific path (‘/’) and not containing a particular header (‘x-ef-request’ set to ‘true’). If these conditions are satisfied, the associated edge function located at ‘./edge-functions/redirectpage.js‘ will be triggered, potentially redirecting the request to another page or performing other specified actions.
There are many ways to do this, but one way to accomplish this is shown below:

edgio-edge-functions-redirects

Above code redirects users to the “/can” page depending on the value of the query parameter “edgredirect“. To further improve this functionality, you can incorporate location-based checks to customize the pages and enhance the user experience. For example, you could enhance the user experience by presenting pages in different languages based on the country of the user.

edgio-edge-functions-lang-redirect

Once you have the code deployed, you can test this change locally by executing – edgio dev in your CLI and confirm if the edge function is executing as expected.

edgio-edge-functions-execute

When ready to deploy it on Edgio Platform, simply run –
edgio deploy –property= <Property Name > –organization=<Org name>

Upon successful deployment, you’ll find that the route logic has been seamlessly integrated into the rules section.

All the respective functions will be stored in Edge Functions section:

Of course, one can create these Edge Functions directly in console as well.

edgio-edge-functions-cache-control

In this example, we create a function to ensure that origin cache-control directives are ignored, and responses are stored in the cache for 10 minutes. Subsequent fetch requests to the same path will be served from the cache for the specified duration.

Once you’ve created the Edge Function, you’ll proceed to set up a rule in the console to trigger this function.

edgio-edge-functions-console

The console also provides a dashboard offering key insights for a specific timeframe, revealing the frequency of function calls, execution duration, memory allocation per function, and the overall time spent handling each request.

edgio-edge-functions-dashboard-stats

These were just a handful of simple examples showcasing the capabilities of Edge Functions. Edgio supports a wide array of diverse use cases, each tailored to provide practical solutions for common challenges. These examples are crafted to effortlessly integrate edge functions into your projects, simplifying the process and enhancing your application’s functionality.

From securely interacting with AWS services to seamlessly integrating content from multiple sources, manipulating HTTP headers, and optimizing JSON responses, Edge Functions empower developers to tackle various challenges efficiently. Whether it is tailoring responses based on experiment configurations with Optimizely or managing traffic during peak times with a waiting room feature, Edge Functions offer a range of practical solutions for enhancing web applications.

To conclude, Edgio’s Edge Functions revolutionize the way you optimize your web applications. By enabling JavaScript code to run at the network’s edge, closer to your users, you unlock a realm of possibilities. Through our intuitive CLI and console, managing and deploying Edge Functions becomes seamless, offering you the flexibility to tailor your CDN behavior precisely.

As you dive deeper into Edge Functions, you’ll discover a wealth of use cases. From enhancing security with AWS request signing to crafting personalized user experiences through content stitching and language-based redirections, the possibilities are endless. And with insights provided by our dashboard, you’ll have a clear view of how each function impacts your application’s performance and user interactions.

We’ve only scratched the surface here. Our documentation offers comprehensive guidance on leveraging Edge Functions to their fullest potential. Explore the diverse range of examples and tutorials, and empower your applications with the agility, efficiency, and reliability of Edgio’s Edge Functions. Let’s shape the future of web development together.

Explore our V7 Platforms documentation.