Introducing Fly Edge Apps

We've just released Fly Edge Apps!

tldr; Build edge applications written in JavaScript. Develop locally (npm install -g @fly/fly), write tests (fly test), deploy your code globally (fly deploy). The runtime is Open Source, and we have docs to get you started.

Edge Apps are written in JavaScript and deployed all over the world — since they're JavaScript, you can make them do almost anything. They're especially good at pulling content from different backends and then customizing it on the fly. Rewrite images, render markdown into an HTML layout, or even pre-render React apps.

Optimize images

Your users use a lot of different devices. You can use Edge Apps to optimize images before delivering. And, you can even write in responsive markup. Want to serve smaller images?

const resp = await fetch("/articles/hero.jpg")
const original = new fly.Image(await resp.arrayBuffer())

let image = original.resize(800).withoutEnlargement()

// webp for browsers that support it
if (webpAllowed(req.headers.get("accept"))) {
    image = image.webp()
    resp.headers.set("content-type", "image/webp")
}

image = await image.toImage()
return new Response(image.data, resp)

Remix content

Apps can also manipulate and combine content from all kinds of different sources, and even transform markdown to HTML. Here's how we inject our README into our docs:

const responses = await Promise.all([
    fetch("/docs/apps/"),
    fetch("https://raw.githubusercontent.com/superfly/fly/master/README.md")
])
const bodies = await Promise.all([
    responses[0].text(),
    responses[1].text()
])

const doc = Document.parse(bodies[0])

// render readme
const html = markdown(bodies[1])

const el = doc.querySelector("section.content")
el.children[0].replaceWith(html.body)
    
// send the new html
return new Response(doc.documentElement.outerHTML, responses[0])

Prerender React

The fastest way to serve a React app to a new visitor is to pre-render to HTML, then deliver the JavaScript later. You can do that with an Edge App, just point it at your existing React app and write a few lines of JavaScript:

import React from 'react'
import ReactDOMServer from 'react-dom/server'

fly.http.respondWith(function preRender(resp) {
  const btn = React.createElement(
    "MyButton",
    {color: 'blue', shadowSize: 2},
    'Click Me'
  )
  const html = ReactDOMServer.renderToString(btn)
  return new Response(html)
})

Is it a CDN?

No: it's everything you need to build your own CDN.

CDNs are really just edge applications that run someone else's logic. They typically fetch static files from an origin, cache them all over, and serve them to nearby users.

Fly runs your logic so you can get out of the CDN box. You can do HTTP caching, or use the JavaScript API to cache partials and application data. You can even write an Edge App that knows who's logged in to your service and assemble personalized responses from the cache.

The runtime

When a visitor makes a connection to your Edge Application we handle SSL, then route requests into app-specific v8 isolates with a location agnostic set of core libraries. It takes less than 1 millisecond to get an HTTP request into an application's JavaScript runtime.

"For developers"

There's a lot of fantastic infrastructure people built to solve operations problems. Lots of predefined logic, sometimes really complicated config files.

This feels wrong to most developers. It's nice to be able to express logic in a language we already know and can write tests for. It's even better to package that logic up, ship it off to a test server, and then deploy it in a repeatable way.

The developers who saw Edge Apps really early kept saying "by golly I'd like to be able to test routing/CDN/proxy changes and deploy them the way I do any other app". So that's how Edge Apps work. You can write and test Edge Application locally, then ship it with your existing deployment infrastructure.

Pricing, availability, pastries

Edge Apps are available today, with a Free Trial credit to cover development and hobby use. Features are priced individually in very small increments — pay only for what you use.

Don't want to pay? Great! Download the open source version and give it a try:

npm install -g @fly/fly

If you'd like to know more, email us or come say "hi" at SF JS in a few weeks. We'll buy you a pastry!

Written by

Kurt Mackey

Working on Fly since 2016 — dreaming about it since 2008.

Chicago, IL