Golang + HTMX - Creating a Go webserver / HTMX Integration / Template Fragments

Рет қаралды 153,993

Жыл бұрын

Playlist ▶️: kzfaq.info/sun/PL-2EBeDYMIbR1ag15E2MonJOj_cCIjUnd
In this video, we'll explore how to integrate HTMX with the Go programming language on the server.
We'll cover:
- how to setup a webserver with the Go net/http package
- how to define routes and handlers with the HandleFunc function
- how to return HTML templates with the html/template package
- using HTMX to submit form data to the server
- swapping HTML responses into the document from our Golang handlers
- using template fragments to return blocks of HTML from a parent template
Final code can be found on this Github repository:
github.com/bugbytes-io/htmx-go-demo
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
ko-fi.com/bugbytes
Playlist ▶️:
kzfaq.info/sun/PL-2EBeDYMIbR1ag15E2MonJOj_cCIjUnd
📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
01:32 Creating a web server in Golang
03:28 Defining server URL and handler function with http.HandleFunc
06:31 Rendering template from Golang functions
09:40 Adding Context Data to templates
11:21 Displaying server data in templates
13:44 Styling list with Bootstrap 5
15:34 Submitting form with HTMX hx-post attribute
19:44 Extract Submitted Data from POST request in handler function
21:03 Returning HTML from Golang handler function
24:03 Using hx-target to swap content into targeted DOM element
26:51 Displaying feedback during request with hx-indicator
30:37 Template Fragments in Golang
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: bugbytes.io/posts/
👾 Github: github.com/bugbytes-io/htmx-go-demo
🐦 Twitter: bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
Install Go: go.dev/doc/install
Go ‘Hello World’: gobyexample.com/hello-world
Go net/http package: pkg.go.dev/net/http
Go html/template package: pkg.go.dev/html/template
Go templates: golangforall.com/en/post/templates.html
HTMX Install: htmx.org/docs/#installing
HTMX Swap Methods: htmx.org/docs/#swapping
Bootstrap 5 CDN: getbootstrap.com/docs/5.3/getting-started/introduction/#cdn-links
Bootstrap Spinner: getbootstrap.com/docs/5.2/components/spinners/#buttons
#golang #htmx #webdevelopment

Пікірлер: 335

@smyrnian_ Жыл бұрын

More Golang + HTMX please!

@bugbytes3923 Жыл бұрын

A series, perhaps?!

@ArisSetiawan-xy1dk Жыл бұрын

Series will be great. Thanks!

@bugbytes3923 Жыл бұрын

@@ArisSetiawan-xy1dk Understood! 😄

@ramadhanngallen9217 Жыл бұрын

@@bugbytes3923 series like a complete project

@bugbytes3923 Жыл бұрын

@@ramadhanngallen9217 Good idea!

@elhaambasheerch7058 Жыл бұрын

I would love to see a bigger project with HTMX + GOLANG that uses databases, great content man!

@bugbytes3923 Жыл бұрын

Definitely coming up! Thanks for commenting!

@Ash-qp2yw Жыл бұрын

This should be simple enough to do -- have your endpoints make sql queries. I tend to split it up into "endpoint code" and "database query code" and just call my db insert/select functions from the endpoint function

@paranoia77 10 ай бұрын

When will it release?? I'm looking forward to it!@@bugbytes3923

@qwoolrat 9 ай бұрын

seems not that hard as long as you know GORM

@paradiseonheaven 9 ай бұрын

i mean there's angular + go with databases. isnt it same? dont you just need to do the same?@@qwoolrat

@geoblk3000 7 ай бұрын

This is one of the most concise and straight to the point tutorials on Go + HTMX and templating on KZfaq!

@bugbytes3923 7 ай бұрын

Thanks a lot! Glad to hear that, really appreciate the comment - cheers!

@maximofernandez196 4 ай бұрын

12:20 Btw, if you guys happen to be iterating over an array, you must use {{ . }} That means that it would just use the data as is. If you send a slice, say "Slice": { "hello", "world"} it should be something like this {{ range .Slice }} {{.}} {{end}} that should print hello and world in separated lines. I suppose that's also why you use .Slice, because you send a map, so the point represents that particular map. Also, I don't know if that changed, but right now hot reloading works, so it's not neccesary to restart the server everytime you make a change. This is a beautiful and fast tutorial. Thank you so much, and also thank you for sharing the links for learning further.

@user-qs3vs2gb7z Жыл бұрын

Thanks a lot! Very cool video. I'm just dealing with a bunch of GO and HTMX! Looking forward to more videos on this topic! You're doing great!

@bugbytes3923 Жыл бұрын

Thanks! I'll look into some more Go + HTMX stuff. And some more Go in general!

@mentotong9652 11 ай бұрын

Great content! Your django+htmx content has helped me building an interactive web app for a national hospital without the need of JS frontend framework. It is currently used by the hospital and I am still enriching or improving the web app bit by bit. Now with GO, really helps me to learn new PL with different perspectives and approaches to tackle some of the Python issues. Would love to see more GO contents. Thanks a million.

@bugbytes3923 11 ай бұрын

Thank you! That's amazing to hear that you're using Django + HTMX in such a cool way for the hospital! Thanks again for the nice comment, and I'll try and add more Go content soon.

@avithedev Жыл бұрын

HTMX + Go series is absolutely necessary Subbed 🙌

@bugbytes3923 Жыл бұрын

Thanks a lot! Appreciate it - will work on some new content for this.

@oluwaseunomotosho6812 Жыл бұрын

very very necessary

@MaybeBL1TZ Жыл бұрын

@@bugbytes3923 True it's very necessary specially with a better file structure and a cleaning code + i subbed

@benderino42 11 ай бұрын

I'm new to Go and HTMX. The majority of the time I work with React/Node.js project. I was looking for a quick overview of these technologies. This video is exactly what I was looking for. In my opinion, it's a great intro. Thanks! Looking forward to seeing more advanced videos.

@bugbytes3923 11 ай бұрын

Thanks! Glad to hear you liked this video. HTMX + Go is a cool combo! I'll have more coming out from September onwards.

@clintoka 6 ай бұрын

I'm in the same position! React mostly. So interested to see more about htmx and go...

@catcatcatcatcatcatcatcatcatca Жыл бұрын

This seems like an awesome introduction to both golang and HTMX - can’t wait to try this!

@bugbytes3923 Жыл бұрын

Thanks!

@FirdausAziz 10 ай бұрын

I appreciate that you explained certain terms or concepts in relation to Django. It really helps put things in perspective. This is one of the most understandble Go video I've seen. Thank you. I hope to see more. Especially with something along Fiber + GORM. Because from my readings that are the nearest combination to Django.

@bugbytes3923 10 ай бұрын

Thank you, glad to hear that's useful! Fiber + GORM are definitely on my list. Definitely important to know a bit about the database/sql package as a starting point though, but I'll expand on this soon. Thanks again!

@darthcabs 6 ай бұрын

Love your way of teaching! Straight to the point, but going step by step, and doing everything by hand, rather than pasting blocks of code. Congratulations!

@bugbytes3923 6 ай бұрын

Thanks a lot, that means a lot! Glad you like the approach.

@20dareason09 Жыл бұрын

A great video! Clear, concise, and helpful! Looking forward to the series!

@bugbytes3923 Жыл бұрын

Thanks a lot! Hoping to get it prepared in the next month and start releasing.

@baz5719 7 ай бұрын

This was such a great video! Appreciate the thorough and straightforward explanation as we went along. Interested in more Go content. Keep up the great work.

@bugbytes3923 7 ай бұрын

Thanks a lot - really glad to hear it was useful! Thanks for the comment 🙏

@speedTurtle Жыл бұрын

Stopped at 6:38 to say how excellent this video is, from a beginner's perspective.

@bugbytes3923 Жыл бұрын

Thanks a lot, really appreciate that!

@ZorroRBF 9 ай бұрын

This video is a master piece. I watched it a week ago with little knowledge of HTMX and no knowledge of GO templates. After learning more about the two subjects, I saw this video again and it is great! Thx a lot! Really good job!

@bugbytes3923 9 ай бұрын

Thanks a lot for that, delighted to hear it and thanks for watching!

@anujtyagi8173 10 ай бұрын

More such Go tutorials appreciated. Also, group GO tutorials into a playlist like you've created for Python.

@willdurant141 Жыл бұрын

You are constantly anticipating what I want to learn. This is great.

@bugbytes3923 Жыл бұрын

Thanks a lot Will, glad to hear it!

@MHasnain2663 10 ай бұрын

This was so straightforward and easy to understand. Thank you!

@bugbytes3923 10 ай бұрын

Thanks a lot!!

@benyaminyakobi3652 Ай бұрын

Just got started with Golang & HTMX Thanks for the great content, perfect demo project for beginners!

@bugbytes3923 Ай бұрын

Awesome, thanks! Good luck with Go and HTMX!

@BbB-vr9uh 8 ай бұрын

Awesome video! Loved how you show each piece in detail before moving onto the next piece.

@bugbytes3923 8 ай бұрын

Thanks a lot!

@ahmettek315 Жыл бұрын

Thanks! I started checking HTMX with Go just an hour ago and surprisingly found your video that is published 16 hours ago. I am lucky. Though htmx itself was easy, you made that surely easier :) Thanks again.

@bugbytes3923 Жыл бұрын

Thanks a lot Ahmet! Glad it helped. :)

@ThomasSchlosser 7 ай бұрын

Excellent video. You hit the spot for my current demand. Exactly the right steps for the compile cycles, concise language. Top. Thank you!

@bugbytes3923 7 ай бұрын

Awesome to hear that, thanks for the comment!

@nodidog 10 ай бұрын

Great video, thanks for sharing. Be aware that the method used at 21:45 won't escape user inputs, so isn't safe for use in production. The html/template package does automatically escape though, so you can just use a template and parse the data.

@stevemccauley 10 ай бұрын

This is a fantastic video, with a lot of great Go server and template stuff. You gave a great explanation of how HTMX works, e.g. with hx-target, and the template fragment looks to be something that will be really useful. I've subscribed to see more HTMX with Go. Thanks!

@bugbytes3923 10 ай бұрын

Thanks a lot! Will do a proper project with Go + HTMX soon!

@angstrom1058 5 ай бұрын

This is great, thank you. Good pace, lots of info, no fluff. Love it. I would like to impose upon you... please, more. :)

@bugbytes3923 5 ай бұрын

Thanks a lot! Much more Go to come!

@fersalamanca2606 10 ай бұрын

Amazing content man. Really looking forward to a bigger project tutorial of Go + HTMX, maybe with some ORMs and migrations? Thanks for your efforts!

@Gusto20000 9 ай бұрын

Why does it feel like I went back 10 years and watching Angular 1 tutorial. Thank you for the video anyway, it's really informative Edit: This is very cool, much better that Angular 1 ;) thanks

@jasonmucio6067 6 ай бұрын

Great video! I like your consistent flow, which makes the content easy to follow. I'd love to see more a more involved project. 👍

@bugbytes3923 6 ай бұрын

Thanks a lot, still preparing some new Go + HTMX stuff for a more involved project - hopefully will release soon!

@josesimoes3478 11 ай бұрын

Great video!! Very concise and educational!! Exactly the level of detail I would pike to see in videos!

@bugbytes3923 11 ай бұрын

Thanks a lot!

@FrostlightX 9 ай бұрын

Thank you, HTMX + GO is exactly what I'm looking for, keep 'em coming

@bugbytes3923 9 ай бұрын

Thanks a lot, will do!

@AgustinLencina96 Жыл бұрын

niceee I will wait for a Go + htmx series!

@markopavlovic2597 11 ай бұрын

Very good introduction 👏 Awesome you posted all the valid reference links 💪

@bugbytes3923 11 ай бұрын

Thanks a lot, glad you liked it!

@michalbotor 6 ай бұрын

this is really elegant! your presentation is great, and i came here for go, but i'm super impressed with htmx!

@bugbytes3923 6 ай бұрын

Thanks a lot for the comment! Great to hear - and yeah, HTMX is cool!

@timbrockley 9 ай бұрын

Great introduction - you covered a lot of useful coding techniques in an easy to understand way :)

@bugbytes3923 9 ай бұрын

Thanks a lot!

@garbagechannel6514 10 ай бұрын

this is very well explained, thank you. i love the simplicity of the whole system too

@bugbytes3923 10 ай бұрын

Thanks a lot!

@christhornham Жыл бұрын

Great tutorial! Thank you! I'd love to see more videos on this topic.

@bugbytes3923 Жыл бұрын

Thanks a lot! I'll try extending this soon into a larger HTMX + Go app!

@pseabrook Жыл бұрын

Fantastic content dude! Extremely clear and informative.

@bugbytes3923 Жыл бұрын

Thanks a lot Peter. Glad it was clear and thanks for watching!

@binarydream0001 5 күн бұрын

Best ever Go + Htmx, so well explained.

@bugbytes3923 4 күн бұрын

Thanks a lot!

@FedericoPedemonte 5 ай бұрын

great video, thanks! As a Go lover and JS hater I think I'm gonna love HTMX 🙂

@Ego_Maritm Жыл бұрын

Amazing. I have been getting hands-on with Golang, and this is really beneficial. Again, thanks, bro💪

@bugbytes3923 Жыл бұрын

Thanks a lot! Good to mix it up a bit from Python.

@AliHassan-wc6nb Жыл бұрын

@@bugbytes3923 greetings! What would you suggest/what to choose for scalable applications? MOJO, GO or python Django! Great work bro!

@bugbytes3923 Жыл бұрын

@@AliHassan-wc6nb I haven't tried Mojo yet - you? Any good? To be honest, I think all can be scalable if used properly. Go has some advantages in speed, ease-of-concurrency over Python, but I think both languages are fine for 99% of web backends (if used properly). Software architecture can be a bigger factor than the language, imo.

@0ktothorp 9 ай бұрын

This is exactly what I wanted to learn lately. Thanks! 😁

@bugbytes3923 9 ай бұрын

You're welcome, thanks a lot for the comment!

@TheKer7 6 ай бұрын

Prime's talk of Go+hx got me here. Great content and explanations!

@bugbytes3923 6 ай бұрын

Thanks a lot!

@dazealex 7 ай бұрын

Quite powerful for folks getting started and don't want to mess with Vue or React, though Vue is pretty simple, but still has a bit of a learning curve.

@MarcusHammarberg 10 ай бұрын

Brilliant teaching at neck breaking speed! I love it

@bugbytes3923 10 ай бұрын

Thanks a lot!

@AmoahDevLabs Жыл бұрын

I've watched this video over and over again and it is very interesting. I suggest we continue with this and do more with Go lang.

@bugbytes3923 Жыл бұрын

Thanks a lot! I think some more Go will be coming up soon!

@AmoahDevLabs Жыл бұрын

@@bugbytes3923 Wonderful 😊. I can't wait for more Go stuffs 😁

@jedi2light 2 ай бұрын

Thank you for that type of content, really, I appreciate such a series of videos! Golang and HTMX is currently the stack of technologies I want to learn to gain some valuable experience, so really thank you for you job 🥰

@bugbytes3923 2 ай бұрын

Thanks a lot, glad it was helpful! Good luck on your journey with Go!

@IQUBE 11 ай бұрын

Loved this video mate! Great job!

@bugbytes3923 11 ай бұрын

Thanks a lot!

@lukehooper3435 11 ай бұрын

Nice stuff, keep it up! Golang/Gin, htmx, alpine, tailwind would be cool to see!

@licokr 3 ай бұрын

Great tutorial, easy to understand and perfect explanation! Thanks a lot!

@bugbytes3923 3 ай бұрын

Thanks a lot!

@markg1netsg 5 ай бұрын

Really well articulated, would love to see a series on GO - Hyperscript - HTMX - thanks a lot

@bugbytes3923 5 ай бұрын

Coming very soon! Thanks!

@adamtak3128 11 ай бұрын

Would love to see more Go + HTMX + Database videos!

@bugbytes3923 11 ай бұрын

Definitely coming up soon, I'm gonna do a video on Go + databases very soon as a prelude to more HTMX stuff.

@Dettol68 5 ай бұрын

great teaching style - the big paste of code was a struggle at times, but otherwise, loved it! Keep doing them

@bugbytes3923 5 ай бұрын

Thanks a lot! (and sorry for the copy/paste!)

@AmoahDevLabs Жыл бұрын

I thought about switching to GO lang for some of my projects but I never did that 😅. It seems you're getting started with Go. Thanks very much.

@bugbytes3923 Жыл бұрын

It's always good to check out other languages. Go is definitely a good one. Thanks!

@marju101010 Жыл бұрын

It's been a long time since I've learned so much from a youtube video.

@marju101010 Жыл бұрын

Thank you so much. Congrats.

@bugbytes3923 Жыл бұрын

@@marju101010 Thanks a lot, glad to hear it was helpful!

@iGageit 4 ай бұрын

Thanks for making this video! I needed it for my job lol

@bugbytes3923 4 ай бұрын

Thanks a lot for watching! Glad it helped.

@marcusk7855 9 ай бұрын

Loved it. Just started learning GoLang.

@bugbytes3923 9 ай бұрын

Thanks a lot! Any Go requests, feel free to let me know!

@prashlovessamosa Жыл бұрын

Thanks this is something new and fresh.

@bugbytes3923 Жыл бұрын

Mixing it up a bit 😀

@szmonszmon Жыл бұрын

Thanks! That was 2 technologies that I want to see together 🙂

@bugbytes3923 Жыл бұрын

Nice - thanks for watching!

@Frawkesish 7 ай бұрын

Super enlightening . I'm just starting to learn to after using react and node for 3months while learning to program in general 😅 this really seems like it will simplify the hell out of my life and job ..

@bugbytes3923 7 ай бұрын

Thanks a lot! HTMX can definitely simplify things, for sure!

@jollygirl2978 11 ай бұрын

Well explained! Thank you sooo much! More videos like this on HTMX and Go. Would love to see an exemple with interactive table element.

@bugbytes3923 11 ай бұрын

Thank you very much! I'll definitely be doing some more HTMX+Go stuff soon.

@mycroftholmesiv 5 ай бұрын

This is exactly what I was looking for

@bugbytes3923 5 ай бұрын

Thanks a lot!

@jiasheanleong7918 6 ай бұрын

Great video! I love your explanation and how you only use the standard libraries. Keep it up.

@bugbytes3923 6 ай бұрын

Thanks a lot, appreciate it!

@muhammadadibshaharudin6978 6 ай бұрын

that is very detail and straightforward explanations.. great content.. Would love to see more with database.. Thank you

@bugbytes3923 6 ай бұрын

Thanks a lot - it's definitely coming, soon!

@87zoomy Жыл бұрын

Great video. Just what I'm looking for

@bugbytes3923 Жыл бұрын

Thank you!

@runthat Жыл бұрын

Thank you!! You introduced me to HTMX foreverago and I love it. 😁

@bugbytes3923 Жыл бұрын

Thanks! Definitely a cool bit of tech. Good FastAPI videos yourself, btw! Will check out some more 💪

@runthat Жыл бұрын

@@bugbytes3923 thank you! Working on the third in the tutorial series but I’ve gotten distracted by these 1-liner shorts I’ve been making. They’re so fun. Anyway thanks!!

@jjj886dfhttgrdvjj7 5 ай бұрын

A truly brilliant video. Tyvm!

@bugbytes3923 5 ай бұрын

Thanks a lot!

@MonoMario89 6 ай бұрын

really great video! dependency free content, lovely

@bugbytes3923 6 ай бұрын

Thanks a lot!

@JanHKila 4 ай бұрын

Just great! Thank you.

@bugbytes3923 4 ай бұрын

Thanks for watching!

@dizphunkt 11 ай бұрын

Great tutorial, thank you so much!

@bugbytes3923 11 ай бұрын

You're welcome - and thank you for watching!

@darthcabs 6 ай бұрын

Fantastic content, pal!

@bugbytes3923 6 ай бұрын

Thanks a lot!

@BonerPauler Жыл бұрын

yes please make a video with go and htmx full fledged web app if possible a copy of existing well known website ...would be helpful

@bobman1983 12 күн бұрын

Very helpful video, thanks for creating it!

@bugbytes3923 10 күн бұрын

Thanks a lot!

@oluwaseunomotosho6812 Жыл бұрын

a big well done and Yes yes more Go+HTMX

@bugbytes3923 Жыл бұрын

Thanks a lot - it's coming!

@hm_webdev 4 ай бұрын

A Scotsman! 🎉 Refreshing to hear other accents.

@bugbytes3923 4 ай бұрын

Thanks from Glasgow!

@Lzadhito Ай бұрын

Top notch video for newcomer like me! thanks!

@bugbytes3923 Ай бұрын

Awesome! Thanks a lot!

@C.S.Argudo 3 ай бұрын

It took like a year of learning wtf youre saying but i kinda get it now

@heygarryification 11 ай бұрын

Great video, thanks a lot!

@bugbytes3923 11 ай бұрын

Thanks a lot!

@z01d Жыл бұрын

Liked! Request for more go videos.

@bugbytes3923 Жыл бұрын

Thanks, they're coming, just planning some stuff now!

@mlsandreas Жыл бұрын

Thank you!!! Really interesting video!!

@bugbytes3923 Жыл бұрын

Thanks for watching!

@jellyamna5521 6 ай бұрын

wow thanks u, great ever golang htmlx videos..

@bugbytes3923 6 ай бұрын

Thanks a lot!

@gaius100bc 10 ай бұрын

great tutorial, subscribed

@bugbytes3923 10 ай бұрын

Thanks a lot!

@bisadk2284 Жыл бұрын

Really grateful for all your valuable tutorials. I will be really helpful If you shows us how to create dynamic multistep form using Django since no other youtube have any tutorial related to this topic

@bugbytes3923 Жыл бұрын

Thanks a lot! I'll have a think about that one. Do you have any examples in mind? I can maybe try and make something.

@overbyte 4 ай бұрын

Love this. Thanks man

@bugbytes3923 4 ай бұрын

Cheers man!

@nskmptrck5492 Жыл бұрын

Thanks a lot for this one, really 🎉

@bugbytes3923 Жыл бұрын

Thanks for watching!

@archibaldivanovich4103 Жыл бұрын

🔥🔥🔥

@xizt5973 10 ай бұрын

3 awesome things in this video. Golang, HTMX and the beautiful scottish accent

@jerbear7952 5 ай бұрын

Yeah it's a great accent unless you are selling Purple Burglar Alarms.

@ChitChatLLMs 2 ай бұрын

Brilliant.

@kevinz1991 8 ай бұрын

awesome video! thank you so much. subscribed :)

@bugbytes3923 8 ай бұрын

Thanks a lot!!

@tatemo_labs Жыл бұрын

Very interesting content, thank you.

@bugbytes3923 Жыл бұрын

Thanks a lot!

@anirudhreddy9205 5 ай бұрын

Great Tutorial 👏👏

@bugbytes3923 5 ай бұрын

Thanks so much!

@abdulrhman2514 7 күн бұрын

This was a great video thank you bro

@bugbytes3923 6 күн бұрын

Thanks a lot man!

@norunners_ 8 ай бұрын

Nice tutorial. My only critique is to not parse templates per request, it should be done once on startup and then reused throughout.

@bugbytes3923 8 ай бұрын

Thanks a lot for that tip! That's definitely a better approach, an oversight on my part - thanks again!

@Tay74514 Жыл бұрын

Love your content ❤

@bugbytes3923 Жыл бұрын

Thanks a lot!

@afreebiker 2 ай бұрын

Great tutorial, thanks

@bugbytes3923 Ай бұрын

Thanks a lot!

@oussamasethoum1665 Жыл бұрын

More of this content please talk about the hx-boost and how to navigate between pages.

@bugbytes3923 Жыл бұрын

Good idea, will add to the list! Thanks.

@PeterNunnOZ Жыл бұрын

Great video, thanks heaps. Glad I found it through Go Weekly. Is there a way to clear the form once the post is done? I'm sure there is, but worth an ask.