In this exercise, you'll deploy a Cloudflare Workers project in order to build a linktree-style website. Below is a list of requirements and success criteria for your finished project.
Create a new Workers project using Wrangler. This project will respond to two kinds of requests, one to generate a JSON API (defined below), and second, to serve an HTML page (see "Set up an HTML page")
To begin, you should define an array of links. The links should be a JavaScript array, with a number of link objects, each with a name and URL string. See the below example for one of these link objects:
{ "name": "Link Name", "url": "https://linkurl" }
You should define at least three link objects inside of your array.
Once you've defined this array, set up a request handler to respond to the path
/links, and return the array itself as the root of your JSON response.
In addition, you should ensure that the API response has the correct
Content-Typeheader to indicate to clients that it is a JSON response.
You should be able to test that this works as expect by running
wrangler devto access your Workers application locally. Visit
localhost:8000/linksto confirm that your application returns the link array as a JSON response.
With your API deployed, you can flesh out the rest of your application. If the path requested is not
/links, your application should render a static HTML page, by doing the following steps:
Your Worker should begin by making a
fetchrequest to
https://static-links-page.signalnerve.workers.dev.
The response from this URL will be a static HTML page that you can enhance using HTMLRewriter.
Note that you need to make the request to this HTML page in your Worker. The URL will return multiple static HTML pages randomly, so you should not copy-paste the HTML into your Worker, as you will not complete the exercise correctly.
Using HTMLRewriter, you should transform the static HTML response from $URL, and pass in the links array you previously defined into the page. Note that this means that your links array should be available as a variable for both your previous
/linksendpoint, as well as this static HTML section. Target the
div#linksselector, and add in a new
afor each link in your API using HTMLRewriter.
In order to use the links inside of your HTMLRewriter handler, you can use a custom class to pass in arguments, for instance:
class LinksTransformer { constructor(links) { this.links = links }async element(element) { // Your code } }
Here's what the output of the
div#linkssection should look like:
You should also remove the
display: nonefrom the
div#profilecontainer, and inside of it, update the two child elements to show your user avatar and name.
To do this, target
img#avatarand set the
srcattribute to a profile image.
Do the same for
h1#name, setting the text to your username.
Once you've passed the static HTML response through your HTMLRewriter instance, you can return it as the response from the Worker.
Ensure that the correct
Content-typeheader is set for this page, allowing it to render as HTML in a browser.
Once you've completed the code for this project, you can deploy it using
wrangler publish. Follow our Quick Start guide to learn how to deploy Workers applications. You should submit both the JSON API URL and your deployed webpage for grading.
Create a URL.txt that contains one line in it with the URL of your page. For example if my assignment was deployed at https://myassignment.mydomain.com/ I would put the following in URL.txt:
https://myassignment.mydomain.com/
We will test your code by visiting the URL in that file and the /links endpoint as well. In the above example we would test https://myassignment.mydomain.com/ and https://myassignment.mydomain.com/links .
Remove the
display: nonestyle from
div#social, and add any number of social links as children to the container. The children of this container should be
alinks, with
svgicons as the children of those links. For example SVGs, use https://simpleicons.org.
Using the HTMLRewriter, target the
titletag and update the text inside to your name.
Using HTMLRewriter, target the
bodyelement and change the background color. You can simply swap out the
bg-gray-900class with another class from Tailwind CSS's color palette, or set a
background-colorstyle to a color, gradient, or image of your choice.