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.tomlwhere we set up the detail for the service, telling Fastly to use your remix of the Glitch website as the service origin (orbackend) -
src/index.jswhere 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.csstoedge.css(that's why theedgecompute.appversion 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
edgefolder 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.
🏆 Make sure you claim your Edge Computing 101 badge
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:
The ~fastly-compute-starter project handles website errors at the edge, password protects some pages, and builds JSON data into HTML.
- The Fastly docs have a ton of code examples to try in the browser for inspiration
- Check out the types of Compute functionality you can add to your websites
- You can even serve entire generated static sites from the edge without hosting them anywhere else
🛟 For support, post in the Fastly community forum.
Share what you're building in the comments!
Top comments (2)
This is a fascinating introduction to edge computing! I'm curious though, how would this approach compare to using traditional CDNs for improving site performance?
Thank you! So where a CDN is focused on delivering content quickly, edge computing is more optimised for building functionality, running different types of service, and integrating whatever you want to do at the edge into the development pipeline. In practice you can do a lot of the same things, for Fastly (where I work) Compute essentially gives you the ability to program whatever service you run on the edge network more easily by leveraging the languages, frameworks, tooling etc dev teams are already using. Hope that answers the question!