HTMX & Go

HTMX & Go Creating an HTTP Server

Topics:
Check out a free preview of the full HTMX & Go course:
The "Creating an HTTP Server" Lesson is part of the full, HTMX & Go course featured in this preview video. Here's what you'd learn in this lesson:

ThePrimeagen guides the students through building a simple HTTP server using the Echo framework in Go. They explain how to set up the server, create an index page using HTML templates, and render the template with data. The final result is a server that displays a count of how many times the page has been requested.

Get Unlimited Access Now

Transcript from the "Creating an HTTP Server" Lesson

[00:00:00]
>> All right, time to build a server. So if you're adept at how to launch a server, and you want to use a different language than Go, you can follow along and not use Go because the server will not be a huge part of the code today. Well, actually, I mean, it will be about half the code today, the other half will be literally HTML.

[00:00:20] All I need is that your server should be able to produce HTML, you should be able to respond with various status codes. You should be able to make routes with params i.e like contacts with ID. You should be able to read query parameters, form parameters, anything like that.

[00:00:33] And you should be able to create verb based routes, GET, POST, DELETE. So as long as you can do that and you feel like you can keep up, then use that. That's one of the beauties of HTMX is that you don't have any requirements on the server. Choose whatever language you want, whatever you're most comfortable with.

[00:00:50] It has absolutely no decisions or thoughts about what a server should do. And I think that that is very, very important part of HTMX. There you go. So where do we start? Well, I think the best place to start is usually the beginning. So we're gonna create a very simple HTTP server and an index page and then upgraded to use HTMX to give like the very first kind of introduction.

[00:01:12] I know in today's world, templates are not sexy. No one says, hey, everybody, let's use templates. Everyone wants that JSX that RSX that JESX, that's Go's version of JSX, which does actually exist. They are simple, they can become annoying, and I fully agree templates sometimes are annoying. But so are other options, every option has its trade off.

[00:01:34] I intentionally chose templates because of the same reason above. I want zero dependencies and I want this as simple as possible. Anyone with any reasonable amount of programming experience can look at a template and pretty much figure out what's happening, and that's that. Which also means I'm gonna try to do everything as grub-brain as possible.

[00:01:52] I'm just gonna have one thing in the file for the templates and one file for the server. We're not trying to do good programming here. But if I were to use something and I wanted something a little bit more spicy, I would consider using something like temple. Temple is pretty cool.

[00:02:05] It's an impossible word to Google for. So you try to go Google Go Lang Temple, you'll probably not get the results that you're looking for, it's quite surprising. So if you ever get interested in it, it's just literally temple.guide. And then you get this whole great little thing about how to build it.

[00:02:22] So you get to use something that looks like JSX, you can only use string interpolation, all that fun stuff. It's actually pretty good. I had a great time of playing around with it. All right, now back to our regular scheduled programming, and that's gonna be, and so our task is to display a count that represents how many times a page has been requested.

[00:02:41] So let's first start with the view, the delicious HTML. So I'm going to jump in here, I'm going to open it up at the base and I'm going to go down to views. Don't worry about what's in blocks, we'll come there later, okay? And I'm just gonna create a new file called index.html.

[00:02:57] I'm sure everyone can join in. Now, me personally, I love naming every one of the blocks in a file. I don't know what it is about it, but I like having names for my templates. So I'm going to go block index this and there you go, I've named my block, perfect.

[00:03:12] And so I'm gonna create a quick HTML5 document, pretty straightforward. And all we're going to do is just put a count in there, so that should be as simple as Count Count. Now if you're unfamiliar with Go templating, these little two squirrely braces on each side, simply say, hey, what's in here?

[00:03:32] I think it's actually Lisp that gets executed in there. So practically old camel, but what's inside of here, simply I'm saying, hey, whatever objects passed in, give me the property count off of it. All right, so now we need to set up the server. You need to definitely get these two items installed.

[00:03:49] This is just echo, it's just a really simple server as far as I can tell. I think they have a decent amount of features. If during your time you're using echo and you keep seeing an error popping up on your import, despite you doing a go get of that item, just execute a go mod tidy, it cleans things up.

[00:04:06] I'm not really sure what a go mod tidy does other than it must organize your files, make sure you're using all the things that you said you're using, and then ensures that they're installed. That's my guess on what it does. And I'm sure the gophers can validate and or tell me I'm wrong.

[00:04:20] But that's pretty much what I guess happens. All right, so we're gonna come back here. Okay, so I'm gonna execute those two things, go get github echo lab V4, and go get echo lab V4 middleware. It's going to probably do those two things, I think I already technically accidentally have them already installed, fantastic.

[00:04:36] We're gonna go to the command directory. I'm gonna open this up and just create a main.go. So, you can see right here, touch command main.go, awesome. Create a little quick package main, a quick func main, awesome. And I'm just gonna start using it as if echo is here, so echo, echo, open up a new echo.

[00:04:56] Make sure it's v4, as you can see, I'm using v4, don't accidentally use something else. There we go, New, let's see, we're gonna use a middleware. Look at that co-pilot already knows exactly what we want to do. Add the middleware here. So look at this I am having that same problem that I was talking about how it's just like, I don't know what this is, I don't believe any of this stuff exists.

[00:05:16] I'm gonna do a little go mod tidy, everything should be nice there. All right, fantastic. And usually that goes away, there we go, fantastic. And I'm not using the correct middleware, look at that, see? V4, there we go, [SOUND]. So everything's going good now. Now this is the only part of the course that has a whole bunch of programming that's not really about programming the problem, it's about setting up a project.

[00:05:41] So if you've never used templates or echo, you can set it up such that echo can take in a template renderer and it just makes programming down the road a touch easier. So I'm gonna do a couple things. First, I'm gonna create a quick struct called templates, why not?

[00:05:56] And it's gonna be pretty easy, I'm gonna call it, there we go, copilot pretty much auto completes it all for you. Make sure you get the HTML template. There we go. I am going to add, look at this, it's copilot already knows, that's the one, that's the one I want right there.

[00:06:11] You wanna create this function called render that is based off the templates and it will simply have an IO Writer. It's gonna have a name. It's going to have the data for the template, and it's gonna have the context from echo, it returns an error. Pretty much how echo works is just that it has functions that return errors, usually takes in a context, return out an error, that's pretty standard.

[00:06:30] And I'm just gonna execute the template, and that means I'm gonna write to the writer whatever's in the template and pass in the data and everything. So it kind of takes care of all this stuff for you. And then I also usually like to do like a new templates, I don't know why I like to do this kind of stuff and copilot too is really good at auto completing it.

[00:06:47] Just create a new templates that ensures that we are able to parse out the HTML. All of our HTML is in the views folder, so I have it in the views folder, there we go. So if you're familiar with a different way to produce views and to use a different server, again, you can even use a different server and go, I don't really care, long as you can just do your basic verb routing and everything.

[00:07:05] So I think we have everything we need at this point to produce a delicious route. So I'm going to go down here, and I'll leave this up for one more moment, let everyone try to catch up. If you're using co pilot it should, if you have echo imported, and you just start typing templates pretty much everything will be auto-completed because this pattern just exists thousands of times on the internet.

[00:07:28] So it can pretty much recognize it right off the rip, awesome. All right, so now all we're gonna is I'm gonna set up a renderer, so I'm just gonna say, hey, renderer here's a new template, so all a renderer needs to be has a renderer function with that same arguments that I said above, a writer, a name, data, and the context, boom.

[00:07:47] So now we can start using that renderer really easily within the go routes going off the context. All right, so we're gonna do an e.GET and I am going to pass in a function that takes a echo context, returns an error, pretty much everything that I said. And now we just simply need to render out the index.html.

[00:08:08] Now, if you remember, you may not remember, but we expect an object that has a dot count property on it and we're going to render that property. So I'm going to jump back here and we need to create that struct, so I'm gonna go type Count struct that has a Count int, fantastic.

[00:08:25] And then I'm gonna create a count = Count Count 0, I think that's how you do these specifications, there we go. Too many languages bounced around in my head. So every single time count or slash is requested I'm gonna increment the count and then I'm gonna render the index template.

[00:08:46] Remember, I named all my blocks, so this is the index block. I'm just going to render it out, there we go. I want a 200, I want the name template and here's the object I want to use for that template, fantastic. That's why we did all that work up above, make this park kind of easy right here so everyone should be able to follow along.

[00:09:03] At the end of the day this is the code we had to write, fantastic. And if we've done everything correctly, which we have one more item which look at that copilot just knows, it just knows we have to do this e Logger Fatal we have to actually listen now, so I'll go on port 42069 and we'll go over here and do a little local host 42069, you'll start it, site can't be reached.

[00:09:24] Why can't it be reached? You didn't actually start the program. You gotta start the program, okay? It's that simple. So in a second terminal, just type in air. Air has all the configuration for this project to just watch. So if we change any files, including HTML files, it will automatically recompile our server.

[00:09:40] It's super fast, this makes it really easy. You probably won't be able to get to the browser in time from your editor before Go has already reloaded. Goes super fast, it'll make this pretty easy. So when I refresh, it's count one. It's count two, it's count three, four, five, six, seven, eight, nine, ten, all the way up to whatever number we want.

[00:09:56] There's all of our logs, because we use the logger. So we may need to use this for debugging at some point during this course. There we go, fantastic. Okay, so we've done it, we have built step one, which is the counter.
>> That command was just air?
>> Air, yeah, A-I-R.

[00:10:12] So once you did that go install air, it will make it publicly available. You may need to do a hash dash r or you may need to make sure that wherever the go bin path is is within your path. So if you don't have air, air is effectively node mon, yeah, that's a fair way to put it.

[00:10:27] Air is kind of or maybe it's a little bit better to say air is more like Webpack dev serve, is having everything, it's watching everything. The moment you make a change, it's redoing, it's the vibe of Go. In case I forgot how to program, here's all the things.

[00:10:40] Look, that's pretty much, I pretty much program the exact same thing each time. All right, fantastic.