Bun Crash Course | JavaScript Runtime, Bundler & Transpiler
Vložit
- čas přidán 17. 05. 2024
- In this crash course, we will look at the Bun.js JavaScript runtime/bundler/toolkit. I will show you how to get set up and check out some of the features.
Bun Official Website & Docs:
bun.sh
Check Out My Courses:
traversymedia.com
If you are on Windows, this is a video I did setting up WSL. It is old, but the steps are pretty much the same:
• Windows 10 Bash & Linu...
Timestamps:
0:00 - Intro & Slides
1:22 - What Is Bun?
4:41 - Features & Advantages
9:16 - Installation
11:50 - bun init
12:55 - bun run
13:18 - Bun.serve()
15:29 - Watch Mode
16:22 - Hot Reload Mode
16:43 - Env Variables
18:16 - Bun Scripts
19:30 - Simple Routes
21:00 - bun x
21:58 - Node Core Modules
23:59 - File I/O API
27:05 - Testing
29:19 - The Bundler
32:21 - bun build
34:26 - Bundler Watch Mode
35:03 - React & JSX
39:03 - Conclusion - Věda a technologie
For crash courses, this channel is awesome and must watch. Soo nice explanation and to the point!
Thanks my friend. I appreciate it!
I remember, when I started my web dev career by watching your html, css and js tutorial. Then I jumped to start learning HTML5 canvas for building 2D games. Now I am a full stack developer, a Pro freelancer and also started my own CZcams channel. You are one of my Inspiration for this all Sir! Success has only 2 main principles:
.Having a Goal in Life.
.Hardwork to achieve that Goal.
BTW the reason why you may want to combine improt/require is because some required libraries may not support ES6 and you are stuck. Is handy to have the felxibility to have both, specially if you are mirating old projects.
Ah yes true
@@TraversyMedia Bro, r u giving heart to ur self.
@@Ahmad-lc1ln😂
I think by mistake bro
@@mkmalikcom It's too late. No take backs allowed. It's now in an infinite heart loop.
@@trappedcat3615 omg 😮
Just finished going through this now , thank you for making this I now have a grasp of what I can do and how bun works
Thanks for creating and sharing this awesome crash course Brad
Super exciting! Great course Brad :)
Perfect timing Sir!
This is the video I was trying to find, Really appreciate Brad😢. Love you man, you're a life saver.
No problem. Enjoy!
I NEEDED THIS 🙏
I have been waiting for your own take on Bun!
thank you so much Brad it is an amazing video about Bun 🙂
Thanks for this Amazing Crash Course😊😊
10 minutes in & im going to try bun after watching this video. something exciting indeed.
Saaaaaaaaaaaaaaaame!!!! 😂😂😂😂😂😂
I know right...😂
'Bun' looks like a pretty interesting library - great tutorial BTW !
Another price less class! Thx Brad!
Very informative, thank you. 😀
I was just waiting for Brad's take on Bun! Time to watch this video!
I agree, I've been looking at Bun for just over a week and it seems awesome, and now we have Brad's take too. I might actually enjoy a Rainy Monday now.
Thanks for this crash course Brad!
👀 I was about to start learning node (I still will learn node) but I couldn't resist checking out the bun hype. So tasty lol
this was amazing. I now understand bun more intimately. good job Traversy
Thanks for making this informative video! I wonder how much of the functionality provided by bun replaces the rich plugin library available to webpack and babel.
Notifications on ♨️♨️ , exactly what I have been waiting for
Thanks Brad, for this crash course!! I am waiting for your full course on bun on Udemy 🙂!!
Time to put BUN in my resume!, thanks ❤
Thanks Brad! when you starred this on GH, i knew a new crash course is coming. 😁
Awesome, thanks for this!
Thank you bro for this great tut
Thanks for the video.
Was very explainatory and easy to follow.
just a question, is something I try to figured it out.
Did you make it work with routes, but using a separate file of routes?
I had have try to make it as node.js and express but without express is not possible.
Bun is such a good addition to the js ecosystem.
Thank you so much for this video. I was looking for a tutorial for how to use bun as a development server. My node/npm is broken in my machine and I wanted to try bun. Now I have the clear guidance on how to use it. Thabks again 🎉
I'm following Brad from last 2 years I believe he is one of the best Programming Instructor in the world and quality content I just love your teaching way that your primarily focused on quality content even less effort of editing that's really love and huge respect and love from PAKISTAN.
God bless you Brad, you are inspiration for us.
Thank you for your quality content :-)
This is it, the great has made a video on it 🧙♂️
great crash course
The GOAT 🐐 strike again.
Brad, you are the man.
This was pretty sweet
Wold be great to see you do a crash course on htmx
Thank you for this Bun crash course. Is Bun ready to be used in real development?
Nice dude
thx, it look fun, i m going to use in a dev project.
Thanks for this.
Great ❤
Thank you sir
woohoo Traversy Media always the best
Nice one again!
The reloading on its own part ( 35:20 ) is because of the Live Server extension tho.
good catch ... but the --watch mode is working in a very good and fast way
Very nice quick overview of what we can do with bun. Thank you, Brad. Just wondering, couldn't you have used fetch() instead of axios?
Nice
Sir more tutorial about PHP Programming language please!
Are we getting a php course with building custom MVC templating with twig and all the good stuff?
yes!!
Sir. Please make project playlists for nestjs❤🎉
May i ask what's your approach to learning new technologies?
Do you read whole docs first? Or do you dive directly into development and figure it out?
Or do you watch videos to learn about it?
The docs are usually my first stop. I will usually just open a file and start working with it following along with the docs. From there I just experiment. I use a lot of articles/blog posts, etc. Once I am somewhat comfortable I go deeper with tutorials and courses. Then when I feel I am ready, I will start creating my own projects from what I have learned. ChatGPT now has a big role in my learning as well.
@@TraversyMedia Thank you for providing your insight , I am currently trying to figure out the most efficient way to learn a new tech , my mistake lies in wanting to read whole docs before building something seeking to get a full overview of the capabilities.
I'll try to have a more experimental approach similar to what you're doing, thanks again mate.
@@TraversyMediaBrad, ❤ from Nigeria. You have impacted me immensely. I am newly introduced to coding and am getting along so fast. I am age 42 but getting inspired daily to move further deeper in learning at your feets 😊😊😊
Thanks 👍
Thanks Brad for creating and sharing this awesome crash course
do you plan to mojo crash course ?
I need to look more into it. There is just so much stuff out there.
One Ring to rule them all 😛
i used watch mode for bun on wsl and it's not working, any facing similar issues or do you guys have any fix for the same??
Your proshop 2.0 is just wow....
Elysia js tutorial pliz , that would be fantastic !
Hello Brad, thank you for this quick tutorial but it would way better if you have get rid of these type warnings at the code. Everywhere is underlined red =/ I mean, we can not use "document" like you do at coding side. (src/index.tsx)
I have been trying all these performance benchmarks and seeing if bun really crashes node and node is faster; what am I doing wrong. Node also have --watch option to correct this video a bit. What is the point of bun then installation?
Nice explained! One question. Do I need to uninstall Node in order to install and run Bun?
Not at all. You can use them together
No, you don't need to uninstall Node to install and run Bun. They can coexist peacefully on your system.
The bundler is not only for the frontend the bundler is for JavaScript Applications.
I am really finding a excuse to stay with Deno, I really love deno
Thanks for the video! It is probably the best video on Bun as of now 😎
I noticed that you chose to disable Copilot by going into your plugin/extension tab in VS Code. But do you know that you can disable it by simply pressing on the little Copilot icon in the lower right corner of the editor? That is just way easier in my opinion 😅
Excellent Brad. But there is no need to put await before Bun.file function as per the offical docs.
Code should be like this
const file = Bun.file("cv.txt");
console.log(await file.text());
console.log(file.stream());
console.log(await file.arrayBuffer());
Bun seem to have problems with regex, they are really slow compared to node.
By the way, you don't need nodemon for node anymore. node has a watch mode too.
Im a native Android developer, but I'm looking to expand my horizons. Looks like now is a more exciting time to check out web development 🤔
woah nc
Bun looks promising. I am more interested in using it as a blazing fast REST Api, but it looks like most JavaScript people are interested in using it for frontend tooling and show examples around it.
it already has two good frameworks for that, Hono and Elysia
Oh thanks for the reply but when I check hono and Elysia docs, I do not see any guide on integration with an ORM apart from sqlite. (Not sure why my first reply got deleted by YT)
@@randomforest_dev you don't need docs, just google how to integrate Prisma with Elysia, prisma allows you to ORM'ly use most of databases, so, writing Prisma code within Elysia project is all you need
Zig itself isn't 1.0 is it not? How reliable can Bun be and how long will it last? This feels a lot like the 'Deno will replace Node' hype phase everyone went a few years ago. But this has such good features, it's worth tracking for a couple of years to see how it will evolve.
from what i found on their website, their monetization plan is to at some point start offering hosting that runs bun, which doesn't sound promising. i'd be very careful around this tool. too much hype.
make a full course on next 13
❤❤❤❤😊
Do we need to learn Zig as well?
If you want to contribute to the project, yup. If you're just building stuff like what you do with Node, nah.
at 26:06 , I don't get any output, the file.text() is not working and it's also stopping any code after it from working..
same, did it get fixed for you?
Question: Why would you use this instead of Next.js ?
Everyones answer will be different here, but for me, I would use NextJS for a smaller dynamic website. Something like say a blog site, job listing website or even my website where I sell courses. I would use Bun for a very large scale applications, APIs and microservices. Something where you may have lots of routes that are being hit from multiple clients. Maybe a mobile app and a website, etc. Both are great, and in many cases can be use for the same projects, but I would make my decision based on scale.
However, Bun is very new, so I would not use it in a large production projet yet personally. I would stick with Node for now.
@@TraversyMedia cool! thanks for the answer!
We want Ether.js crash course
Why are my Bun files hidden? How do I get the files to my web server?? When I use GUI and navigate to the folder or directory there’s nothing there, I can’t see any files, but when I navigate there in command line then I see all my .tsx, and beginning files…
Why can’t I see my files so I can copy them over to my web server or how do I do this??
buen contenido auidovisual
@TraversyMedia Thank you so much for this Traver, just one small request, if possible. If you are getting sponsored by these companies, would it be possible to declare that in the Video... because all those magical numbers and performance metrics are nice on paper, untill you start working with them... So are you getting sponsored by Bun for this video?
i don't think he is, bun has just been really popular recently so i guess he just wants to talk about it and i think it's open source as well. And about the metrics, they're in most cases for when they are used in the most optimal manner, but even then i already tried bun(just as a package manager though) and it does feel quicker than node.
CZcamsr strager has a video called "do not use bun" with some performance tests he did himself, which paint a very different picture about how good bun really is. i wouldn't trust their own numbers or anyone who just repeats them. ;-)
But like I said, “feels” quicker, it might not actually be, it might just be me making myself think bun is faster🤷♂️
How compatible is compatible with Node JS?
Just for fullstack developers 😇
Make part 2 of javascript cource
the benchmarks arent lying...im yet to find a case/project where performance wouldnt be improved AT LEAST 2x
Even "Hello World" Example
Thank you to use Dark Theme
Easy for eyes
, when switching from editor to web browser to see result
, Thank you very much from eye-problem people like me.
Is it really going to be a game changing tool?
I really hope so. Having everything in one toolkit is key. The JS ecosystem is too fragmented. You need too many things to create full stack apps. Bun makes it so much easier and adds a bunch of needed features as well.
I love how you did say several times " dear windows users, you do need to use the windows subsytem for linux "
Is it hype or future?
I haven't used bun but I hope it's not hype. Bun united almost all the components that you're probably going to use in one tool. I'm still learning things like webpack but I want bun to have all the good features that webpack has without the tool being too complicated. We have to use too many different tools.. Why don't we have one tool that does everything. We should be making our lives easier, not harder
How does this help me? I don't work on web.
careful not to fall victim to the hype. i've seen a review with performance tests that showed bun being actually slower than pure nodejs. what is fast is mostly their package manager.
doesn't hurt to have knowledge still
As a C++ dev... I'm pure jealousy
I learned HTML and CSS JavaScript in the past and now I want to move to the backend but I dunno what should I learn Nodejs or Bunjs, my plan was to start Nodejs.
What do you think guys
I would stick with Node. Bun is too new and they are compatible in many ways so if you learn Node, you will catch on to Bun later very easily
@@TraversyMedia Thank you so much, by the way I am doing your JavaScript course.
It's really amazing I like the way you explain things, with documentation.
58 sec ago :)
Please do REACT HOOK FORM course.
Why is using focused tools a bad thing vs a kitchen sink tool? Also to say node is "only" 13req/s ... what sites are you guys building that need more than that?
Sir please can you make a crash course on Laravel 10 + blade and SPA (without Laravel and Splade) use pure js.
{
"compilerOptions": {
// Enable latest features
"lib": [
"ESNext",
"DOM"
],
"target": "ESNext",
"module": "ESNext",
"moduleDetection": "force",
"jsx": "react-jsx",
"allowJs": true,
"outDir": "./dist",
"forceConsistentCasingInFileNames": true,
// Bundler mode
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"noEmit": true,
// Best practices
"strict": true,
"skipLibCheck": true,
"noFallthroughCasesInSwitch": true,
// Some stricter flags (disabled by default)
"noUnusedLocals": false,
"noUnusedParameters": false,
"noPropertyAccessFromIndexSignature": false
}
}
1st
Please don't import React as default export, it's totally unnecessary since version 17.
Bun...? 🤔💭
,,But now I'm done, now I'll get back to making puns about Kim Kardashian and
Her two-ton buns of fun.
So gargantuan that they block out the sun." 🎶
(The Key of Awesome's Parody of Eminem's song called "Not Afraid")
Who uses Windoze in 2023? And WHY???