Develop an edge computing app in the browser

#webdev #serverless #javascript #cloud

When I try a new web technology, I really want to play around with it upfront before installing anything locally or setting up a developer environment. Over the last few months I’ve been exploring GitHub Codespaces for this purpose, working on a set of projects that guide you through building and deploying apps to the network edge straight from the browser. In this post I’ll introduce our new Fastly Compute learning experience that you can try out in seconds.

With a Compute app, you can enhance the user experience for a website at the edge. The app can manipulate the request from the user and the response from the origin website. You can write your code in various languages and the Fastly SDKs will compile it into Web Assembly (WASM) that can run at the edge, between your users and your website host. In this guide we’re writing our edge application logic in JavaScript.

Read on for a more detailed walkthrough of the flow but here’s the gist:

You fork a GitHub repo
Open your fork in a codespace
The app runs and automatically opens a preview
The project includes a sample origin website that runs too
You tweak the Compute app code and see the preview update as you work
When you’re ready, you grab a Fastly API key, copy it into your project, and publish

Fork the project

Getting your own app running takes a couple of clicks:

Sign into GitHub and visit the ~learn-edge-computing repo.
Fork the repo into your account (best to leave the name unchanged)
Open your fork in a codespace by clicking Code and creating a codespace on your main branch

When the codespace opens it’ll attempt to do a few things automatically:

Build, run, and open a preview for your example origin website
Build, run, and preview your initial Compute app
You’ll find some buttons along the bottom of the editor to make the process easier
- Use the 🔎 Split button to separate your preview from your code so that you can edit and see the results at the same time

Get to know your new app

🚧 Your project includes a demo origin website – the code for it is in the origin folder.

🌎 The logic for your Compute app is in the src folder. Check out the content of the index.js file.

In the Terminal area, select PORTS to see the origin and edge versions of your site – use the buttons to toggle between them in the preview. Check out the differences in functionality:

The style is different because the Compute app switches the stylesheet at the edge.
There’s a cookie written into the page that includes geolocation information passed in at the edge.
The ohno link returns a synthetic HTML page at the edge instead of a default server error.
The data link also returns a synthetic page instead of raw JSON.

Develop in the browser

Make a change to your Compute app. In the README you’ll find a suggested edit you can copy and paste right into the index.js file. With any luck your app will automatically rebuild and update in the preview. The edit adds information to the geolocation cookie indicating the time of day at the user location.

Note that the geolocation info won’t be accurate until you deploy to the edge, because your app is initially running “locally” inside the codespace which is running in a container hosted by GitHub.

Make changes to your origin app too in the origin folder, like changing the HTML and CSS.

You can share your draft app with collaborators using the 🔗 Share button at the bottom of the editor – they’ll just need to be signed into GitHub to see it.

Deploy to the edge

Sign up for a free Fastly account and grab an API key. Pop your key into your codespace with the name FASTLY_API_TOKEN.

Click the 🚀 Publish button at the bottom of the editor and follow the prompts. A few things will happen at this point:

The Fastly tooling will build your app and package it for deployment
It’ll create a new service in your Fastly account and upload the package
The scripts in the codespace will also deploy your origin website to a GitHub pages site for your repo
The GitHub pages site will be set as the origin for your Compute app

When everything’s ready, you’ll see an edgecompute.app address in the Terminal output. Go ahead and click it to check out your deployed app. How does it behave differently at the edge?

You can carry on making edits to your app and hit that 🚀 Publish button whenever you want to go live with them.

Remember to commit your changes to your fork of the GitHub repo if you want to keep them – use the Source Control area on the left of the codespace editor.