2. Edge Compute Workshop

If you have not done so already, to get started, please follow the instructions on the Start Here page.

1. Exercises 📚✏️🤓

While not important for the first few simpler exercises, please be aware there are some considerations around the sizes of memory and data for Compute, see the links in section 5. Useful Links

1. Challenge 1: Hello Universe 🔭⭐🪐

${\color{lightgreen}Level: \space EASY}$

${\color{fuchsia}Challenge \space 1:}$ Update the contents of the page to include your name or some other recognisable change.

${\color{teal}Hint \space 1:}$ In the HTML, I changed the title and replaced the iframe with my own content. Test the changes by running your service locally (no need to publish to a Fastly service).

2. Challenge 2: Working with a backend

${\color{lightgreen}Level: \space EASY}$

${\color{fuchsia}Challenge \space 2:}$ Instead of serving a generated page (aka synthetic) from your app, setup a backend in your compute service to use https://green.fastlyforward.com.au/ and serve that as your page instead. Test your code locally and also push to a Fastly service to test there.

${\color{teal}Hint \space 2:}$ Define a backend in the configuration (TOML file) and use it in your code. Before publishing to a Fastly service (or before testing) ensure you set up the corresponding backend in Fastly and use the same origin name as your code.

Helpful Links

• https://developer.fastly.com/learning/compute/javascript/#communicating-with-backend-servers-and-the-fastly-cache
• https://developer.fastly.com/reference/compute/fastly-toml/#backends
• https://developer.fastly.com/learning/compute/#limitations-and-constraints

3. Challenge 3: Custom headers

${\color{lightgreen}Level: \space EASY}$

${\color{fuchsia}Challenge \space 3:}$ Add a custom header of your choice to the response back to the user/client.

${\color{teal}Hint \space 3:}$ I return a fun fact about space bunnies.

4. Challenge 4: Caching

${\color{lightgreen}Level: \space EASY}$

${\color{fuchsia}Challenge \space 4:}$ Using the Readthrough cache, provided by default in your language's Fastly SDK, change the ttl for a page request.

${\color{teal}Hint \space 4:}$ Use the built-in capabilities of the language SDK to change the TTL for your request.

Helpful Links

• https://developer.fastly.com/learning/concepts/edge-state/cache/#readthrough-cache

If you are not already familiar with the concepts of service chaining and shielding, perhaps have a look at: https://developer.fastly.com/learning/concepts/service-chaining/ https://developer.fastly.com/learning/concepts/shielding/

Currently, Compute does not support some of the functionality you may be used to using in VCL, including shielding, so that is an example where you would want a VCL service in front of the Compute service.

5. Challenge 5: Load balancing

${\color{orange}Level: INTERMEDIATE}$

${\color{fuchsia}Challenge \space 5:}$ Randomly select a backend and use that to serve the page (add another backend red.fastlyforward.com.au in the local config toml and also in the service itself).

${\color{teal}Hint \space 5:}$ If you have 2 backends defined (e.g. green and red, as per above) then you will see green in the response ~50% of the time, and red in the response ~50% of the time. You could also add some extra information to your headers such as a service number version to the response, to help with debugging if needed.

6. Challenge 6: Content Enrichment

${\color{orange}Level: INTERMEDIATE}$

${\color{fuchsia}Challenge \space 6:}$ Use external APIs to bring more data into your app and build something cool. Use the Fastly Compute platform capabilities to store your application's data at the edge.

${\color{teal}Hint \space 6:}$ In keeping with the theme of space, Nasa kindly provides some nice APIs to play with https://api.nasa.gov/. Fastly's KV (or object) store is a great place to store any kind of content you like https://developer.fastly.com/learning/concepts/edge-state/data-stores/#kv-stores (keeping in mind any of the data size limits we mentioned earlier).

7. Challenge 7: Application view logic at the edge

${\color{red}Level: ADVANCED}$

${\color{fuchsia}Challenge \space7: }$ Write your own template engine at the edge.

${\color{teal}Hint \space 7: }$ There are multiple ways to implement a templating engine. You can use an existing templating language such as Mustache or Handlebars, or you could follow the instructions here to perform your own custom stream processing.

8. Use existing frameworks to build your service

${\color{red}Level: ADVANCED}$

We created expressly, a lightweight and minimalist routing layer for JavaScript apps running on Fastly's Compute@Edge, and inspired by the popular Node.js framework, Express. https://expressly.edgecompute.app/ https://www.fastly.com/blog/write-less-do-more-at-the-edge-introducing-expressly

9. Challenge 9: BYO coding language

${\color{aqua}Level: EXPERT}$

${\color{fuchsia}Challenge\space9: }$ Use your favourite coding language and build something to run on Fastly's Compute!

${\color{teal}Hint: }$ If the code can be compiled to a WASM binary and implements the WASI interface.... https://developer.fastly.com/learning/compute/custom/.

2. Useful Links and Resources ⛏🧱

• Glitch for an easy way to have a backend in your project
• Compute Limitations and Constraints
• Fastly Account Resource Limits
• Glossary

Note: if you have a paid account, we can often increase these limitations to better suit your needs!

3. Solutions 👍👎🤔

A suggested solution for each challenge is provided here, however there are many other possibilities so these are just provided as a guide in case you get stuck!