Render HTML Pages with Cloudflare Workers

Instructor: [0:00] In the previous lesson, we deployed our first worker, just using the default code. It returns a response with a content type of text plain and the text, Hello Worker. Now that we got the basics down, we can start to deploy something more interesting.

[0:15] Back in the code, I'm going to delete this so that we can clean up the code here. Let's make something more interesting up here to the user. Let's say a HTML template, which looks like a real website. To do that, I'm going to do a few things. First, I'm going to make a new file, and I'm going to call it template.js.

[0:39] Inside of here, I'm going to set up a HTML template. To do that in workers, it's simple, you return a string. To do that, I'm going to say, const template. It's going to be a function, and it's going to return a template string that has HTML inside of it. I'm going to paste my HTML in here, so you don't have to see me type it, but it's straightforward.

[1:04] It has an HTML doctype, sets up an HTML tag and sets a couple header, a meta tag here, a viewport tag, a couple things you'll see in every HTML page. Then two important text values, one is title which says, Hello, and the second is a body that has an h1 tag of Hello World with the wave emoji inside of it, a straightforward HTML template that returns Hello World.

[1:34] In order to access this, I'm going to write, export default template. When any other file imports template.js, they get access to this template function. Now, back in index.js, I'm going to do a couple things. First, I'm going to import, template. I'm going to import that template file.

[1:55] I'm also going to call it here as the body of my response. I said return new response and as we talked about in the past lesson, template is a string here. This is the body of my response.

[2:11] If I add that in here, it's going to take that HTML and make it the body of my response. In order to make this work, we need to make one more change. We need to go into wrangler.toml, and we need to change this from JavaScript to Webpack.

[2:27] The reason that we do that is that the Webpack type, which is supported by default inside of Wrangler, is what allows us to import other modules, whether that's from our own project, for instance, the template.js file that's local inside of the same folder, or other npm packages, which we'll do later in this course.

[2:46] We've added template, we've set it as the body here. Now, it's time to republish our project. Back in the shell, I'm going to run wrangler publish again. This time, it's going to do more building.

[2:59] It's going to run npm install. It's going to set up a webpack configuration. At the end of the day, it only takes probably three or four seconds, and you can see that it's successfully published once again to the same URL.

[3:13] We've refreshed our page and we can see this is not what we expected. It's this weird string. It looks like it tried to put the HTML directly into the body. In fact, this h1 tag looks messed up. This is not a way of emoji, at all.

[3:30] The reason that this happened is that we don't need to add the template here as the body string. We also need to update the headers to set the right content type. For instance, text plain is my plain text response. We know that when we write, Hello Worker, it's a plain text string. We don't need to set any content type here.

[3:51] When we're writing HTML, the browser doesn't know that unless we change this content type to text/html. Once we do this, the browser will look at the incoming response and say, "OK, this is HTML. Let's render it like an HTML page."

[4:08] Here, I'll run wrangler publish one more time. It will still be fast. In three or four seconds, it will rebuild and republish. If I come back here and refresh, now you can see that it looks like we'd expect.

[4:23] If we inspect here, we can see this is the doctype HTML that we set up, the HTML lang is English, but inside of here most importantly, we can see that the body is rendering as an actual HTML page. Importantly, you can't pass in HTML inside of your worker and expect it to work.

[4:44] You also need to make sure that you pay attention to headers, setting the content type to text/HTML, or for instance, if you're doing something like returning JSON, or returning even an image, you need to make sure that you set the appropriate content type for whatever it is that you're returning as the response.