Build your own edge computing app

In this series we're learning about edge computing for the web. In the last two instalments we found out what and where the edge is:

Now it's time to get your hands on your very own edge computing web app – and the cool part is you'll have it deployed in minutes without even downloading or installing anything onto your computer, because we're doing it in Glitch. 🎏

Remix the Glitch website

We're using a simple demo website on Glitch that just has a single web page in it.

When we deploy it to Fastly, we're going to use the Compute platform to change the user experience for the website at the edge. Compute is going to let us run a serverless edge computing app on the Fastly network. The app will run in between the website host and our users, so it can change the request and response when people visit the site.

We're keeping it basic to get started, but our Compute code will switch the website stylesheet and add some info about the user location. We could use a similar pattern to customize the site UX in other ways, like tailoring it to the user's location or preferences.

Check out the demo:

Go ahead and remix the site: ~learn-edge-computing

Your own copy of the website will open in the Glitch editor in your browser. Sign up / into Glitch if you want to keep the project.

All of the steps are in the project README – make sure you use Preview > Open preview pane to see your live site at its glitch.me address.

Check out the Compute code

In your project, you'll find the code for your edge computing app in the edge folder. There are two files to pay attention to:

fastly.toml where we set up the detail for the service, telling Fastly to use your remix of the Glitch website as the service origin (or backend)
src/index.js where our Compute logic happens

💡 We're using JavaScript, but you can code for Compute in other languages.

Take a stroll through the index.js code:

It uses a function to handle requests that come in from users
The function can make changes to the request from the user, and the response from our Glitch origin website, before sending it back to the user
We add geolocation information from the edge to the response, as a cookie the Glitch site will write into the page when the user's browser loads it
We change the website stylesheet request path from style.css to edge.css (that's why the edgecompute.app version looks different)

🚧 What happens when you build and run

Although we're coding our app in JavaScript, what happens with edge computing is quite different from writing JS for environments like the browser or web server. When we develop Compute apps, Fastly is going to compile our source code into WebAssembly (Wasm).

When we write a language like JavaScript, we have to do it differently for client and server side development, don't we? JS code works differently in the user's browser than it does on a web server, because they are different runtime environments. Apps can access different resources in the computing environment they run in, and this changes how you write your code. Well the edge is different again!

When you deploy an app to the Fastly edge, it runs in the Wasmtime environment. This lets your apps run safely on Fastly's edge network in the cloud. Like client side vs server side JS, it also means that there are some differences in how you code your apps. The JavaScript project structure for Compute is generally similar to developing for Node.js.

Set up your Fastly account

If you haven't already, sign up for a free Fastly developer account.

In your account, grab an API token so that you can deploy from Glitch:

Choose Account > Personal Profile > API Tokens > Create Token
Enter a Name of your choice and choose the following settings:
- Type: Automation
- Role: Engineer
- Scope: Global (deselect the Read-only access box)
- Access: All services
- Expiration: Never expire

📋 Create your token and keep a copy of it on your computer.

🚨 If you haven't created a Compute service in your Fastly account yet, you'll need to create one in the control panel before you can deploy from Glitch. Go to Home and choose Create service > Compute. You can leave the service empty and pop back into Glitch, this just unlocks your ability to create Fastly services from the CLI in Glitch.

Back in Glitch, paste your token into the project .env file as the value for FASTLY_API_TOKEN.

Deploy your app to the edge

With your Fastly API key in your Glitch project, you're ready to deploy to Compute. Open your project Terminal and enter the command: npm run publish

⚠️ If you get an error indicating that you can't deploy your Compute service, try the note in the last step ^^ to unblock your account.

Your Glitch app is preloaded with the Fastly CLI and some commands you can see in your package.json file. When you run the publish command, Fastly does a few things:

Builds the code in your edge folder into WebAssembly
Runs any relevant scripts in edge/package.json
Creates a new service in your Fastly account
Sets your Glitch website as the origin (or backend) for the service
Uploads your Wasm package to the service
Activates and deploys your new service across the Fastly network

💡 The process might take a couple of minutes to complete, and a minute or so longer to actually load for the first time when you visit your site, so don't worry if it doesn't work straight away.

When your service successfully activates, your Terminal output will display the address, which will have the same subdomain as your Glitch site, but with edgecompute.app instead of glitch.me.

Go ahead and open it in your browser. You should find your own location and Fastly POP (Point of Presence) indicated in the page.

That's it! You've built and deployed a serverless edge computing app that changes the UX for your website. 🌍🚀

🎁 Make a bonus edit

Follow Step 4 in the Glitch project README to show this bonus page during one hour at your website user's location.

What else can you do at the edge?

The project we've worked through here is pretty basic, but you can do a lot more in your edge apps. Check out the tutorial in the Fastly docs for an app that carries out a few additional enhancements on a Glitch site: