Learn Fastly Compute in your browser in minutes

Sue Smith - Sep 23 - - Dev Community

Just over two years ago, Glitch became part of Fastly. Glitch is the friendly community where everyone makes the web, and it has become a vital part of enabling more and more of you to take your projects to the next level with Fastly services. We have a new set of resources that walk you through getting set up with Fastly Compute in minutes.

With our new Glitch projects, intro tutorial, and video, you can learn how to give your users a better experience by building a serverless edge computing app that runs on the Fastly network – and it’s so easy anyone can do it!

Deploy to Fastly with a single command

Demo site compute

The demo site style changes based on the Compute service logic.

Our beginner’s intro to Compute starts by remixing a Glitch website to get your own copy, which you can edit in the browser. By signing up for a free Fastly developer account, grabbing an API key, and popping it into the Glitch project as an environment variable, you can spin up your Compute service entirely in your browser by entering a single command. No need to download or install anything locally, so you can try the whole flow in minutes!

The Compute app changes the site style at the edge and adds information about the user's location. If you follow the steps in the Glitch project docs, you’ll also learn how to show your users a bonus screen that appears during one hour of their day. The app is intentionally simple, but the goal is to equip you with the conceptual and practical basics that will set you up to leverage the many benefits of Compute in your own projects.

Try the Compute learning project yourself: ~learn-edge-computing

Customize your site UX

For a slightly more comprehensive (but still super easy) introduction to the kind of customizations you can add to your websites with Compute, check out our new tutorial: Enhance your site UX with Compute

You can also follow the steps in Glitch: ~fastly-compute-starter

Your Compute service runs on Fastly servers between your website and your users, so it can customize the behavior of your site and tailor it to the user. The example website we use in this new tutorial adds geolocation information to the response, password protects some pages, and builds synthetic HTML responses from origin errors and structured JSON data.

Compute site origin and edge

The origin and edge versions of the site behave differently on user interaction.

We use JavaScript in these new guides so that they’re suitable for as many people as possible, but you can code your Compute apps in other languages if you prefer. Fastly provides official SDKs for Rust and Go, and there are several unofficial SDKs available from community projects. We also provide tooling for popular frameworks like Next.js and Remix.

Develop with Fastly in your preferred environment

By building learning and onboarding paths in Glitch, our aim is to make advanced technologies like edge computing accessible to a much wider audience. Glitch has the advantage of supporting the entire development and deployment flow without requiring local tooling, but if you prefer to try Fastly Compute in your own IDE, of course, we also have you covered.

Use the Learn Compute starter kit to spin up a Compute service locally:

  • You can use the Glitch demo project as a default origin (or “backend”) regardless of whether you do your development in Glitch or locally.
  • You can alternatively specify another website to use with the Compute service, by including it in the fastly.toml file or the CLI prompts when you go through the deployment flow.

It’s easier than you think!

If you’re assuming edge computing is so technical it should be left only to experienced engineers, just know that we’ve been using these learning resources for internal training with teams across Fastly over the last few months. We’ve found consistently that people with little to no development experience whatsoever have been able to successfully deploy a Compute app during a single one-hour session. Leveraging powerful web technologies doesn’t need to be so hard – try it with your team!

Check out the code examples in the Fastly docs for inspiration on what you can do on Compute: Code examples | Fastly Documentation

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .