Bun Crash Course 2023 with HTMX example

Рет қаралды 37,067

Күн бұрын

Bun Crash Course with HTMX todo app example at the end. This video was inspired by the release of Bun 1.0 on 7 September 2023.
Repository of crash course - github.com/Eckhardt-D/bun-cra...
Repository of example app - github.com/Eckhardt-D/bun-htm...
Bun - bun.sh
HTMX - htmx.org
Hyperscript - hyperscript.org
Pico CSS for the Styling - picocss.com
Elysia - elysiajs.com
Hono - hono.dev
---
A Bun Tutorial on the HTTP, WebSockets, CLI, File I/O and more. Followed by a simple Todo App built in Bun.
--
TIMESTAMPS
00:00 What we build at the end & installing
03:28 Bun CLI init, run & create
08:54 Bun build API and bunx CLI
14:28 Bun HTTP/HTTPS server
19:34 Bun WebSockets
24:10 Bun File I/O
35:48 Bun SQlite Database
38:06 Bun FileSystemRouter
41:00 Bun Test Runner
44:28 Bun HTMX app

Пікірлер: 66

@mr.daniish 10 ай бұрын

This is such a timely upload, just as htmx and bun are taking off! Thank you

@tgsoon2002 10 ай бұрын

00:00 What we build at the end & installing 03:28 Explore Bun API 44:28 Bun HTMX app

@HuynhLuong227 10 ай бұрын

thanks for sharing..., hope HTMX popular soon

@TheD3adlysin 10 ай бұрын

Loooool. Was waiting for the Udemy courses to come out. I knew the news around bun would create a bunch of these training videos.

@SumriseHD 10 ай бұрын

you could even buy a whole udemy course bundle

@randomforest_dev 10 ай бұрын

awesome

@roblesrt 10 ай бұрын

Awesome!... Would love to see Bun + HTMX + Turso.

@Danielo515 10 ай бұрын

This was awesome ❤, I'm really impressed with bun. Just one question, why didn't you just use the bun router to dispatch the requests?

@pietraderdetective8953 Ай бұрын

great tutorial! I followed from beginning to end and everything works. At the end you mentioned part-2 of this video and I've searched your channel but I couldn't find it..was there a part-2 to this great tutorial?

@KaizenCodes 28 күн бұрын

Hey, thanks for the comment. I have not planned part 2 yet because I just had my first child born and am loaded at work otherwise. I do plan on bringing more Bun goodies once things settle down though

@TangHoong 10 ай бұрын

Thanks for the tutorial, I was looking for the tech stack which best with making a bun cms, any suggestion?

@KaizenCodes 10 ай бұрын

For the API I would use something like Hono or Elysia. For the frontend I would use Vue. Nuxt would be cool too but it’s not fully functional with Bun yet last I checked.

@RicusNortje 10 ай бұрын

Came here for the bun and HTMX, stayed because I heard the SA accent lol. Also playing with HTMX now, still wana start a side project with bun

@KaizenCodes 10 ай бұрын

Namibian, but yeah pretty much same thing.. and cool! Elysia is something I would suggest

@Motion152 10 ай бұрын

bro same xD

@dngt6007 10 ай бұрын

Kaizen, excellent video, how can I reference a local css or js file from the index.html in your example app, thanks

@KaizenCodes 10 ай бұрын

Thanks! You would need to either inline it into the html or setup the server to read the file from disk and reference it. But honestly think at that point it maybe best to use a framework like Hono or Elysia to handle static files.

@israelsousa 10 ай бұрын

Nice video, I have a doubt, like node, bun will need a version manager like NVM?

@KaizenCodes 10 ай бұрын

It’s too early to say, I actually hope not. I like that Bun self manages with bun upgrade. But probably at some point someone will create it 😅

@danteDeveloper 10 ай бұрын

did you use neo vim for this video? I want to which IDE are you use and how to use it

@KaizenCodes 10 ай бұрын

Yes Neovim for the code editing 👍

@boot-strapper 10 ай бұрын

what terminal program is that? BTW this tech seems super cool. Very exciting, dont think I can go back.

@CoolestPossibleName 10 ай бұрын

are you talking about neovim?

@boot-strapper 10 ай бұрын

@@CoolestPossibleName im taking about the terminal he was using for his wsl

@I_Lemaire 10 ай бұрын

@@boot-strapper It's Windows Terminal, bro

@boot-strapper 10 ай бұрын

@@I_Lemaire it’s not

@boot-strapper 10 ай бұрын

22:28

@ericluciano 10 ай бұрын

What font name are you using in the terminal and configs nvim?

@KaizenCodes 10 ай бұрын

github.com/Eckhardt-D/kaizen.nvim my nvim config. As for the font, I think it’s JetBrains Mono.

@ericluciano 10 ай бұрын

@@KaizenCodes thank you.

@wojciechosinski5927 11 ай бұрын

What other options do we have if the goal is to render components serverside? React with renderToString is one of them. Is there anything else?

@KaizenCodes 11 ай бұрын

That’s a good question! There was a video called the BETH stack by someone else where they used @elysiajs/html and typed-html . I would have to look into that more to give you a good answer.

@BinaryIgor 10 ай бұрын

@@KaizenCodes Why not just have components as html (+tailwind/css?) strings? In may cases, that's enough ;)

@astrea4231 10 ай бұрын

i'm following the same as you. But somehow i can't see anything logging out when i run file.ts. I also can't write file. Help me plz const file = Bun.file('package.json') const contents = await file.text() console.log(contents);

@KaizenCodes 10 ай бұрын

Is there a package.json file in the directory that you’re running the command in?

@astrea4231 10 ай бұрын

@@KaizenCodes Yeah I tried possible paths too. But when I run it, it just show nothing and do nothing

@KaizenCodes 10 ай бұрын

@@astrea4231Ah that sucks.. is the code in github or something to look at? It would be impossible for me to tell you what might be going wrong via comments 😅

@aspirinemaga 10 ай бұрын

Very hard to follow on what are you doing with that terminal editor thing.

@KaizenCodes 10 ай бұрын

Would you prefer VSCode for videos instead?

@twd2 10 ай бұрын

does it work with Svelte like this !!!

@verythreatening238 10 ай бұрын

yes works with every modern js framework svetle, nextjs ect ect

@thiscris_ 10 ай бұрын

What's that VSCode font? It's not JetBrains Mono. Thanks in advance.

@KaizenCodes 10 ай бұрын

It’s not VSCode, it’s Neovim running in Windows terminal - so probably the terminal’s default font - Cascadia Code. I don’t use this machine as my daily.

@programminganytime4332 10 ай бұрын

which vscode font do you use?

@tickshot 10 ай бұрын

That's not vscode it's neovim

@naranyala_dev 10 ай бұрын

yeah htmx with tailwind css

@karthikm.1804 10 ай бұрын

fullstack app w/t nuxt, zod, prisma, supabase

@vitorguidorizzzi7538 10 ай бұрын

prisma, lmaoooooooooo

@ATXAdventure 10 ай бұрын

Honestly, great video but I want to hear your voice, not your obnoxious clicky keyboard.

@KaizenCodes 10 ай бұрын

Haha I’m sorry. It annoyed me too actually. It’s the only board I have for now but will figure out a way to make it more bearable. Thanks for the feedback.

@thiscris_ 10 ай бұрын

@@KaizenCodes You can use a dynamic microphone like a Shure SM58 or Shure SM7b if you want to invest. Those reject unwanted noise. Also you can switch to a keyboard with different switches. Blue clicky switches are noisy. Personally I didn't find the sound annoying at all. I found it rather pleasant.

@LourensRolograaf Ай бұрын

@@KaizenCodes All my keyboards have blue switches -- so for me please keep on clicking! Let us hear you hacking, damped keys is for gamers!