Azion Preview Deployment

Azion Preview Deployment makes it possible for you to preview the behavior of your edge functions before they go to production. New possibilities are unlocked when using the Preview, such as:

• Test different flows based on the http method provided.
• See the outcome of an HTML page.
• Return data in JSON.

How does Azion Preview Deployment work?

Azion Preview Deployment depends on an auxiliary function inside your source code. This function is called PreviewProvider, and it’s responsible for debugging and simulating a request, returning the outcome to be rendered. The PreviewProvider function is represented as:

    function PreviewProvider<PreviewProvider>(args) {
        var request = new Request("https://azion.com/example", {
            method: "GET",
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer my-token"
            },
            redirect: "follow",
        });
        return handleRequest(request);
    }

Note: without the PreviewProvider function, it isn’t possible to visualize the preview.

Now, with your simulated request running, you’re able to set different behaviors to your function, based on all properties available inside the request variable, such as:

    async function handleRequest(request){
        switch (request.Method){
            case 'GET':
             return new Response(html,{
                headers:{
                    "content-type":"text/html:charset=UTF-8",
                }
             })
        }
    }

In this code snippet, it’s defined that if a GET request is called, it returns the HTML var, containing the html to be output, and set its content type as required to perform this action.

API Builder

It’s also possible to build APIs and have the outcome based on the request method. For example:

• You can have an object in JSON as the response, if the request is a POST, by altering the content-type header and returning the object using the JSON.stringify() function.

• In case the request is a GET, and you wish to return an HTML page, the content-type should be set as text/html:charset=UTF-8. The response is going to be presented already rendered on the preview.

Example:

    async function handleRequest(request){
        switch (request.Method){
            case 'POST':
             return new Response(objectList,{
                headers:{
                    "content-type":"application/json",
                }
             })
            case 'GET':
             return new Response(html,{
                headers:{
                    "content-type":"text/html:charset=UTF-8",
                }
            })
        }
    }

The output is shown right next to the code editor. It’s possible to open it on a different tab as well, clicking on the open button.

Preview Provider and ChatGPT

The ChatGPT integration helps you to boost your productivity and, alongside the Preview Deployment, enables more analytical implementations, making it possible to test and see new ideas on the fly. Take a look at Edge Functions Chat GPT integration.

Implementation

Here’s a real-life implementation of the Edge Functions ChatGPT integration: