This is an app for learning about edge computing with Fastly!
In this project you'll learn how to enhance the behavior of a website at the network edge using logic written in JavaScript. You can test the functionality locally in the codespace without installing any local tooling, then grab a Fastly API key when you're ready to deploy.
- Remix your own app
- Get to know your app
- Deploy your app to Fastly Compute
- Save your edits to GitHub
- How this project works
- Keep going! 🚀
Fork this repository to create your own copy of the app.
In your fork, open the site in a codespace by clicking Code > Codespaces and creating a new codespace on your main branch.
Give the codespace a minute or two to start up – it'll automatically build and preview your new app!
This starter kit changes the behavior of a website at the edge. Check out the origin version of the site.
In your codespace preview:
- Try opening a page that doesn't exist:
/ohno - Now try a page that the origin returns as JSON:
/data.json
- When your website preview opens, click the 🔎 Split button at the bottom so that you can see the site side by side with your code.
- You can close [x] the Terminal while you work.
You can view the origin version of the site in the codespace too by opening the 💻 Terminal, selecting Ports and clicking the little preview button next to the Origin listing:
Explore the code:
- Your
fastly.tomlfile includes the service config - The
src/index.jsfile includes the application logic
The functionality:
- The app changes the stylesheet from
style.csstoedge.css - It grabs geolocation info about the request (this won't work reliably on the local server, read on to deploy to the Fastly network)
- It also adds a cookie to the response (the origin website writes it into the page)
- If the request is for a
jsonfile, we send the data back in a synthetic HTML page - We send synthetic pages back for any 404 or 500 errors
Make a change to the index.js code, like changing the content in the synthetic HTML page! The Fastly CLI will automatically rebuild and run the app – you'll see the effects in the preview.
You can share links to your draft app with collaborators – click 🔗 Share at the bottom of the editor. The terminal output will include a link you can right-click and copy to share with anyone you like!
This project includes a handy shortcut button for grabbing your preview URL but it might be a wee bit error prone 😅 you can also access these details in 💻 Terminal > PORTS.
Change
privatetopublicby right-clicking your running port and choosing from the options.Copy the URL to your clipboard and share it 📋.
When you're ready to deploy your app to the Fastly network, you'll need an API key and one command entered into the Terminal:
- Sign up for a free Fastly developer account
- Grab an API Token from Account > API Tokens > Personal Tokens
- Type: Automation
- Role: Engineer
- Scope: Global (deselect the Read-only access box)
- Access: All services
- Expiration: Never expire
- Copy the value of your new token
- Copy the token value into GitHub
- Back in your codespace, click into the textfield at the top of the editor and type
>to access the command palette - Type
secretand select Codespaces: Manage user secrets -
- Click + Add a new secret
-
- Enter the name
FASTLY_API_TOKEN -
- Paste your token value and enter
- Back in your codespace, click into the textfield at the top of the editor and type
In the notifications area at the bottom right of your codespace, you should see a prompt to reload for the new environment variable, so go ahead and click that (otherwise click the little bell 🔔 icon to check for the message).
Hit the 🚀 Publish button at the bottom of the editor, enter y and watch the Terminal output for your new site address! It might take a couple of minutes... 🥁
You'll see your new *.edgecompute.app address in the output. Open it in a new tab and tell everyone you know about your new site. 📣
How does your site behave differently on the edge?
🎢 Whenever you update your app, hit the 🚀 Publish button again to go live!
GitHub will keep the edits you make in the codespace only for a limited time, so it's a good idea to commit your work to a repo regularly. Use the Source Control button on the left of the editor – you can make commits, open and merge pull requests right inside the codespace.
GitHub will notify you if any of your codespaces are about to expire. If you have changes you want to keep, you can use the Export changes to a branch option.
⚙️ The settings we use to create the guided experience in the codespace are in the .devcontainer/ folder.
🧰 You'll find the Fastly CLI commands we use under the hood in the helpers/publish.sh script.
💻 If you check the right-hand side of the Terminal you'll find multiple processes – this is to run the commands.
This project uses the following extensions from the dev community! 🙌
Don't stop there, add a domain to your new site.
You'll find your service in your Fastly account control panel – check out the Observability stats! 📊
What else can you build on Compute? Check out the code examples for inspiration.
You can also clone the example website and deploy it to GitHub Pages if you like by following the instructions in its README (make sure you update the toml and index.js root values in your clone of the Compute app).
🛟 Get help on the community forum.
