Learn FASTLY-COMPUTE-EDGE with Real Code Examples

# fastly/demo/main.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    return new Response('Hello, Fastly!', { status: 200 })
}

A simple Fastly Compute@Edge function responding with 'Hello, Fastly!' to HTTP requests.

# fastly/demo/json.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    return new Response(JSON.stringify({ message: 'Hello, JSON!' }), {
        status: 200,
        headers: { 'Content-Type': 'application/json' }
    })
}

Returns a JSON response from a Fastly Edge function.

# fastly/demo/query.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const url = new URL(request.url);
    const name = url.searchParams.get('name') || 'Guest';
    return new Response(`Hello, ${name}!`, { status: 200 })
}

Reads query parameters and returns a personalized message.

# fastly/demo/post.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const data = await request.json().catch(() => ({}));
    return new Response(`Received: ${data.input || ''}`, { status: 200 })
}

Handles POST requests and parses JSON body.

# fastly/demo/headers.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    return new Response('Hello with headers', {
        status: 200,
        headers: { 'X-Custom-Header': 'FastlyEdge' }
    })
}

Returns a response with custom headers.

# fastly/demo/redirect.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    return Response.redirect('https://www.fastly.com', 302)
}

Redirects the request to another URL.

# fastly/demo/error.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    try {
        throw new Error('Something went wrong')
    } catch(err) {
        return new Response(err.message, { status: 500 })
    }
}

Handles errors and returns a 500 response.

# fastly/demo/delay.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    await new Promise(resolve => setTimeout(resolve, 1000))
    return new Response('Delayed Hello!', { status: 200 })
}

Returns a response after a simulated delay.

# fastly/demo/fetch.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const response = await fetch('https://api.github.com')
    const data = await response.json()
    return new Response(JSON.stringify(data), {
        status: 200,
        headers: { 'Content-Type': 'application/json' }
    })
}

Fetches data from an external API and returns it.

# fastly/demo/method.js
addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    if(request.method === 'POST') {
        return new Response('POST received', { status: 200 })
    } else {
        return new Response('GET received', { status: 200 })
    }
}

Responds differently based on request method.