1. Home
2. Solutions
3. Tutorials

This tutorial walks you through enhancing the user experience (UX) for a website with a Fastly Compute service. Compute can tailor your site behavior with functionality that runs closer to the user. You can code your logic in a language of your choice and compile it into WebAssembly (Wasm) where it can run quickly and securely as a serverless application on the Fastly network.

Check out the video to try Compute in a few minutes – read on to set up an app that does a little more processing at the edge.

Your Compute app sits between the user device and the origin host for your site, so it can manipulate the request and response. The starter code for this tutorial adds geolocation information to the request, handles errors with synthetic content, password protects pages, and builds structured data into HTML.

You can use the starter code on an existing website or try it with the Glitch demo site - remix the Glitch project to get your own copy and build your Compute app in the browser. The instructions below also walk you through developing in a local environment if you prefer.

Set up your Fastly account

Sign up for a free Fastly account if you haven’t already.

The Compute app requires an API key - if you don't already have one, grab one from your account:

1. Go to Account > Personal profile > API tokens.
2. Click Create Token then fill out the Create a Token fields as follows. If a field isn't specified, you can leave it as the default.
   • Name: enter a name for your token
   • Type Automation
   • Role: Engineer
   • Scope: Global (deselect the Read-only access box)
   • Access: All services
   • Expiration: Never expire
3. Copy the token value and save it in a secure location. You'll need it later on.

Set up your developer environment

Start a new Compute app

Fastly provides SDKs to compile Rust, Go, and JavaScript to Wasm that runs on the Compute platform. This tutorial uses a JavaScript example.

You can use the code from the Learn Compute starter kit for development in Glitch or locally.

Explore your new app

The files most worth checking out are src/index.js and fastly.toml:

• The src/index.js file has the functionality in it - each time a request comes in to the Compute service, it tailors the response
  • Adding a location cookie to the headers
  • Checking the origin response for any 404 errors and returning some synthetic HTML
  • Password protecting any path beginning with a “p”
  • Checking for requests ending “.json” and sending the data back as HTML
• The fastly.toml file contains the setup information for the service, including a backend - this is the origin website
  • You can use the demo fastly-compute-starter.glitch.me site or change the value to use your own site if you prefer

Deploy your app

npm run publish

Fastly will build and deploy your Compute app. The CLI output will return the address of your new app, which will end edgecompute.app. If it doesn’t load right away, give it a minute and try again.

Test your enhanced site

With your edgecompute.app site open in the browser, check out the difference between it and the origin website:

If you’re using the Glitch origin, you’ll find the location info written into the page - otherwise you can find it in your browser dev tools by opening the Application > Cookies. Alternatively open the Network tab and select the homepage address, then scroll through the Headers:

Experiment with the different paths in the site:

• Try opening a page you know doesn’t exist on the origin site, like /ohno - you’ll receive a synthetic 404 error page Fastly built at the edge
• Open any page beginning with “p” such as /private and Fastly will prompt you to log in
  • If sign-in fails, the app returns a synthetic 401 unauthorized error page
• Open any path that returns JSON, like /info.json - Fastly builds it into an HTML page including the structured data

Edit your Compute code

Make a change to your functionality! In the index.js file, the code builds the location info into a greeting. You’ll find a comment with the following content:

// 🚧 🚧 🚧 Add the code from Step 3 in the README on the next line 🚧 🚧 🚧

On the line after this, add the following code:

// Let's get the time of day and find out how far from UTC it is
let displayTime = new Date().getHours();
let offset = geo.utc_offset;
displayTime += offset / 100;
    
// Tailor the greeting to the user time of day
greeting =
  displayTime > 4 && displayTime < 12
    ? "Morning!"
    : displayTime >= 12 && displayTime < 18
    ? "Afternoon!"
    : "Evening!";

The code changes the greeting to reflect the time of day at the user location.

Build and deploy your app again using the publish command in your Terminal.

Once your update has deployed, check out the cookie again in the browser dev tools (or the homepage if you’re using the Glitch origin).

Test using Fiddle

You can test your code in the browser using Fastly Fiddle. Clone the example Fiddle and update it to suit your site:

1. In the fastly.toml section, change the local_server.backends.glitch entry for both url and override_host to your own origin site
2. Paste your index.js code into the Fiddle
3. Choose a path in the Configure Requests field, like /ohno
4. Run and check out the response data
   • Use the button next to the Run button to browse the Fiddle result in a new tab

What to try next

You can find your service in the control panel for your Fastly account - to change the functionality it delivers, you’ll make your changes in a dev environment and build / deploy it again as above. You can include many different types of edge functionality in your Compute apps.

• Learn more about edge computing
• Use your own domain with your Fastly service
• Follow a more comprehensive intro to Compute
• Check out code examples for Compute