Bun Tutorial – JavaScript Runtime (Node.js Alternative) [Full Course]

Key Takeaways

welcome to this bun crash course bun is a cuttingedge toolkit designed to supercharge your JavaScript and typescript applications with its Lightning Fast startup times built in support for typescript and jsx and a range of powerful features designed to seamlessly replace node.js bun promises to revolutionize your development experience whether you're looking to optimize serverless functions or enhance your workflow this course will Empower you to leverage Bun's full potential and seamlessly integrate it into your projects hder Malik developed this course he is a full stack developer and entrepreneur bun is a JavaScript runtime it's a similar or alternative of nodejs but it but it is faster than node.js you can execute JavaScript and typescript with one you can also install the packages with the help of bun it will also have provide function ality to run test cases you will have all in one toolkit you can develop test run and bundle JavaScript and typescript projects that is the definition of bun it can execute JavaScript and typescript on the server it will also compatible with nodejs package manager under the hood it's a Javas script run time it helps to run JavaScript similarly in the Chrome you can run JavaScript let's do that here I'm going to run the JavaScript I can say y a z is equal to 10 let me print Z I got the value so I can run JavaScript on the Chrome browser bun can run JavaScript on the server side bun is a new JavaScript runtime built from scratch to serve the modern JavaScript ecosystem the reasons to use burn it's faster burn starts fast and runs fast it extends JavaScript core the performance minded JS engine built for Safari it also provide the API key API for like starting an HTTP server and writing files bun is designed as a drop-in replacement for node.js it natively implements hundreds of nodejs and web apis including FS path and buffer the goal of the bun is to run most of the World server side JavaScript alternative to nodejs and provide tools to improve performance reduce complexity and multiply developer productivity you can also use external nodejs packages with with bur you can also execute typescript fast fast running performance web standard apis you can also run TSX like typescript with react works with node modules no more module Madness you can also use the watch mode run test in the watch mode starting an HTTP server websocket server read and write hash password write a test this is the result they got Benn is BN took 36 seconds PNP took more seconds and npm took more seconds 36 second here and yarn is a bit slower Nots compatible crazy fast Let's test it how burn is fast this is a test result of a burn burn is also a test Runner you can also run test with the help of burn just like you did with just framework just compatible syntax crazy fast enough Theory now we're going to install the burn on our machine I have a Mac I can install the burn by using this one if you are windows you can also install burn if you are windows you can use this option I am on the Mac I'm going to install burn if you want to install specific version you can do that but I'm going to install the current version or the latest version bun was installed successfully let's check it out if I write burn Das Das help to get started you got to run this one this [Music] command now I can run bur Das D help it can recognize the command oh my God it took it took a few seconds to install the bun burn run run J JavaScript a package.json file or a script run unit test you can use this command if you want to run in a depal mode you can do this command if you want to in create an empty project you can use this one if you want to create a next GS project you can use this command if you have to install any dependency you can use burn I or add a dependency bu a or bun add remove dependency bun RM link link and npm globally you can use Link PM more commands for managing packages BN build build bundle typescript and JavaScript into a single file upgrade to the latest version you can use this command we have installed burn successfully now we're going to create a new project burn project let's create a new folder I can say in my code file in my code folder you can say burn first oh make directory burn first let's go to the burn first let's create a new project by using bun in [Music] it you can provide your package name I can use bur first entry file should be index.ts file please run that so it has also executed the file so I'm going to open the code into my visual studio code editor oh oh my God I got the node modules folder inside the node modules I got the bun types we have the package.json file TS config file so I got the node modules bun lock file I cannot see that we have the index.ts file we also have typescript configuration that's amazing you can run run the typescript with the help of burn now this project is compatible with typescript you can run any type of typescript project or any kind of nodejs project let's say I'm going to run the node file as a node let's create a new function read do or read I'm going to take I'm going to provide the text the string I'm going to provide the arrow function and it is going to return hello or return text I'm just adding a typescript I can call the message hello world and I can print the hello world here const text I got the text or I can say the message so I can print the message here by using the log you can run typescript I can use this command bun run to run the typescript project Bun Run index.ts that's amazing hello world you don't need to set up any type of if you are working with nodejs you have to set up you have to install depth dependencies of typescript you have to do some configuration you don't need to do that it is automatically compatible or already configuration conf already configured with typescript that's amazing now we're going to move forward uh I can create a web server with with the bun let's create a get repository get in it I'll push that git repository into a project get [Music] commit first commit setup burn oh I did not add that get commit [Music] DM setup and I can push that code I don't I think I did not set the repository let's set the repository I can say GitHub let's create a new repository you can find the source source code at this repository what I can do I can create a new branch I can start from here I can say setup or init I can use the init burn course I can say source code for bur YouTube source code for burn course that's it let me push my code it will create the master BR or main branch now you should see the main branch this is the entry point we have only single branch which is main which is entry point you can start uh you can start checking out this repository and start with main branch that's it let's move forward let's create a new Branch I can say web server server web server [Music] so I'm going to delete everything from index. let's create a new server we can use burn. Serve Port should be 3,000 and fetch should be there's a fetch method it will take request argument let's return the response hello world that is it it's a simple the fastest the simple way to create create a web server that's amazing I like that listening on Port HTTP Local Host colon and uh I can use back tick here listening [Music] to server I can get the port from here server. Port that's it so now we need to run the project I can run that I was running the project bur [Music] run index.ts oh it's not a bin it's a one so I got the issue template string was not now my server is running at Local Host colum 3000 I can check that from Local Host colon 3000 amazing you can see the hello world message here if I change if I change anything hello world are you learning burn but we have to set configure the automatically uh Auto reloading I didn't set that we can also configure a script for start I can say bur run index.ts that's it there is nothing new here npm or you can run burn instead of npm you don't need to install external npm I can say Burns Run start that looks good so you want to install the package you can also do that burn add I can I can add a packet fidget or F figlet I don't know bur add it's going to install the dependency let's add burn a new package you can also install the typing of the burn types and fig let oops oops oops oops fake let now let's use that package figlet I can import figlet from figlet figlet I can see the suggestion what I need to do I I need to do a little bit changing here body figet dot text [Music] sync hello hola instead of response I can provide the body in the response let's run the project so oh my God so you can add a little bit changing in the text or modify the text I am learning burn don't worry I'll figure it out how to run in the development mode project you can see I am learning [Music] burn if you want to R run the bur in a development mode or a watch mode you can add a script I can say dript burn Das dwat I have to provide my entry file which is index.ts so I can say burn def bur runev so my application is running on listening mode hello I'm learning burn from my video oh nice so I have I got that now you can see a simple video that looks good so we have created the web server let's create new routes in the server inside the fetch I can get the URL by using the new URL it's a it's a function I can get the URL I can add the logic if url. path name should be root URL then you you can return this response otherwise you can return new response and I can save 404 I can also add a new check url. path [Music] name here let's say I'm going to add a triple sign strict equal in JavaScript if we have the about about page I can say return new response about me I can rended the HTML text here about me my application is running now let's look at the root route I'll get the video if I look at the about I'll get the about me page what about the contact page if URL do path name should be I can say the contact return new response contact us let's visit the contact so I can see the contact as I can create a new Branch it should be routes adding routes and I can push that into Repository now I'm going to teach you how to handle error let's create a new route path [Music] name I'm going to create a new route which is feed and this I don't I'm not going to send any content in the response so I can return the error could not fetch feed if error comes it is going to throw the error otherwise it is going to return the response 404 if I try to fetch the invalid route I will get the 404 if I try to fetch the FED route I'll I'll get the I got the error but I want to I want to render the error in readable format I don't want to break the complete application you can do that here there is an error method it is going to take the error argument here I can return the response so let me render the HTML here PR and we have to provide the error and you can also render or log the eror tag I'm going to log the eror Stag let me close the pre- tag so we are rendering the HTML we have to set the header for HTML let me set the content type let me set it as an HTML whenever you call this throw method it is going to call the error method if error comes it is going to call the error function this one so I got the error could not feed error this is the complete error message and in the new line it is going to print the error stack error could not error could not find could not fetch the feed in this video I'm going to teach you how to stream a file in bun let's create a new file you can use any name here I'm going to create txt file let's call it g. txt hello guys hello bun developer so now we need to read this file in the index.ts file let's create a new route URL dot path [Music] name should be create then we need to read this file I can say new response 1. file we need to provide the path of the file in our case gr. txt let's look at I'm going to access the gr route the path does not exist oh I forgot to add this back slash now hello burn developer uh we have learned the basics of burn now I'm going to teach you how can we build a restful apis uh we have used if you have worked with nodejs I'm sure you used expressjs framework to build rest apis uh if you want to build rest API in bun you can use a framework it's built on the top of BUN and you can use the typescript typescript supported supercharge by bun so it provides a framework you can see it's a faster than all of these framework fast fastify Kaa Express in the nest that is amazing so 18x faster than Express let's look at so we have to install the app let we I've already installed bun let's create a new project I'm in the my project folder if you want to do in in terminal you can also do that but I have open the vs code burn create Alysia and Alysia and I'm going to call it my application you can use bndr API awesome it's going to create a rest API let me go to the CD uh to my rest API and I can open that project into my vs code editor I'm going to close the previous code editor now you can see the index.ts file we have bulog package.json file and we have TS config they have already created a Dev script to run the project in development mode and I can see new Alysia doget we have a root route this is how you can create a new server that's amazing so let's run the project burn run oops awesome we have created a new server like in Express awesome hello Alisia I can change that hello Bund I'm going to build restful API so it has it is listening on the port 3000 so here I have mentioned the host and the port server Port Lisa is running at local host and here is our Port let's look at hello Dev Bev I'm going to build restful apis this is amazing now we're going to talk about routing in Alicia Alysia we have already created the get route we can create a route by using the chaining let's create a new route I'm going to create the get route this time I would like to add the V or path parameter let's say post and I get the ID so I can get the prams here I can use the destructuring here this is a request Handler and it is going to destructure the prams and I would like to extract the ID here I can return anything let's say if I want to return the ID I can do that one run Dev so I would like to test this route let's try to access the route Local Host column 3000 SL post ID I would like to provide the ID which is one here so I'm returning the Json object and here I got the ID you can also do that let's say it's an ID and I can return the title learn burn so now you will get title and the ID I also want to talk about let's complete that get route or here I can say route so we have created the get route now let's define the post route or delete route you can also do that let's say I post and it's going to get the request body so I'm going to use the call back function it's going to give me the body let's return something here so we need to perform the post request I'm going to use the postman if you don't have a postman you can install this software we're going to use this software to test the API I have to send the post request Local Host call in 3000 and/ poost let's provide the body you can provide the body by going to the raw and Json ID one title should be Lear note so I got request PA post I don't get the body we'll talk more about how will you get the party so let's create another route this time I can say track everything like when you send request track SL1 SL track SL anything it's going to call this method let me show you the demo return track route Let's test it out I can send the request I have to send the get request so I'm going to send the get request I don't need to provide the party for the get request track slash2 I'll get the track rout if I say track slash to/ learn I got the track route whatever you send after this track matching it's going to call this method track route so we did not talk about the context object here we are uh we are getting the prems from the context object this should be the context so here I'm going to return the context let's add a new out so I can send the post post out let's provide some body ID or title should be learn anything so I got the context here I got the context so context has request property request object it's a raw request for accessing data as a FB standard type so party which come with request but I don't I'm not getting any body here we will I will you will also get the query prems store which is a global store is a uh store is a global mutable store for Alicia instance you will also get the set response representation I get the status code and the header what about here if I try to get the body Lia Lysa follow you use the destructuring pattern if I do that let's send the request that looks good I got the body when I was not using the destructuring I was using this one context I'm returning the context in the response I was not getting the body request body so if you have worked with Express you have to use a Json middleware you don't need to use Json middleware here I can destructure the body and I can return the body that's it so now I got the party let's say [Music] description learning pun from course so I got description and the title you can also get the set property set if you want to set these status code you can also do that let's say it's returning a body it's returning an object and inside the function let me do that here I'm going to set set do status code let's say if I set the for 43 it's going to return the 403 status code you can see the 403 Forbidden but I want to I want to have 2011 let's say a record created successfully now I got 2011 that looks good if you want to return the array Json array you have to stringify that let's create a new route I can say tracks so what I want to do I want to return a new response here I want to send the Json array so have we have to stringify I can say songs or tracks let's provide a tracks can say dancing feed here I can say whatever song [Music] name let's try to fetch all the tracks I can send the get request let's send the tracks to fetch all the tracks so I got this one tracks but we did not set the header for the this response type that's why we are not seeing adjacent response so we have to set the headers here we have to provide the header content type it should be application sljs now you can see that I can see adjacent response back here I got the tracks I have all of these tracks one more thing I would like to mention if you don't want to use json. stringify Alysia will convert that for you if you return the simple let me comment that if you comment that and if you return a simple array Alysia will do that for you it's I'm going to return the array so that's it so we have to return the object here I can say tracks and we can close the object let's send now I got the same response let's add a new new song so I got a new song here now we're going to talk about how to build a state edit now we're going to talk about if you want to extend the Handler function you can also do that this is this is useful when you need to access extra values in a Handler like database connection or any variable or any variable you need uh I can set the state here here I can call the state let me Define the state I can say version one or you can provide any value here so I can also add a decorate it's additional properties let's say you want to map any value or you can say get dat it's a function it's going it's going to return the date current date and you can destructure the value here in your Handler function let's say I want to use the date and the state here I can access the store and I can access the get dat function you can see that uh now I can use that I can log the state let me log the store and I can log the I can call the get dat function or you can call get dat dat it's returning the date so all I need is to call all I need to use the get dat let's try to run the project my application is running so we have to fetch all the tracks I'm going to send the get request so I got all of these tracks in here you can see the version and this is a function so it's returning dat do now is returning a function so we have we got to call that function let's do that I'm going to call this function let's use it and I got the exact let's use let's add more values so if you want to add a multiple Properties or you can add the object here here a let's say uh ID should be one or whatever variable you want to store here email should be let's provide the email Jan gmail.com so I have accessed the store let's say I want to use the I want to access the I want to access the store here inside the while creating the post so I got the store so I can log the store let's do that uh so we going to create a new po post to access the to log this store so let me create a new post so here I got the store now we're going to talk about plug-in a plugin is a way to decouple logic into smaller parts and defining reusable components across the server defining a plugin is as simple as defining a new Alysia instance let's create a new plug-in I'm going to create plugin inside the index.ts file here I'm going to define a plugin Define plug-in con plugin new Alysia let's define the state for the plug-in here you can Define plugin version let's say I'm going to use the one do get let's define the route I can say form plugin it's a Handler function and it's just returning a simple string or let's define a new method slash create this simple message hello hello Dev so we have created a plug-in now we need to register that plug-in you can use the use method in the application instance here so I would like to register this plug-in with the help of plugin you can uh break your code into multiple components now I have this is a separate code this is my application so you can also move that plug-in into a separate file I'll also show you how to do that but let's say I have registered that plug-in now I want to use that plug-in into my application how can you do that you can extract a plug-in from the store or you can uh use the let's let's get let's access the the state from the plug-in you can do that so where I want to I want to get let's say for in here I want to get access here in the tracks route so I would like to log the store and I would like to access the plug-in version that looks good it's also giving the syntax highlighting I have registered the plugin in the application and inside the plugin I have defined the route this one so I have defined the state plug-in version now we need to call this get tracks it should log this uh oh I got the plugin version here inside the store we got the plugin version what about these routes let's let me access these routes did the did did the application create these routes so I'm going to copy that let me paste it let me paste it here and I'm going to use the create let's do that oh my God that's amazing hello def I got the route what about this this form plugin let me access that oh God awesome I got the high so you can uh plugin also registered these routes so in the application by using the application instance you can use these routes these routes so registering a plug-in will combine the types between plug-in and a current instance and the scope of hooks and schema got merged as well so scope and the schema get merged here the store object is merged now you can see that you can also place a plugin into a separate file I can I can use plugin. TS file uh let me move the plug-in code here we need to import Alysia so we also need to export the plugin so I can use the plugin here let me import plug-in plugin that looks good so we got the plugin our application still working I can access these routes let's say I want to access GRE route it should give me the message what about fetching the tracks it should log the store this plug-in version that's powerful concept you can break your application into multiple components let's say you are building the Spotify clone you can create plugin for tracks plug-in for artists plugin for users you can divide your application into plugins now now I'm going to talk about how can you group multiple routes I've already implemented that feature you can use the app Group I have converted listen method into separate app. listen here I have created a routes this is a group a user group you can say if we need to create a new route related to user you can do it here let's say I want to define a get route user dot uh whatever you want to say package let's say that org get user by ID so it's going to give me the user by ID so now we need to test this [Music] function let's test it out we need to send the get request I can send the user and I'm going to provide the ID so I got the user by ID route you can also make versioning of your API just like I did here version one and I can I'm getting the app as an argument into my Handler function here I'm defining all of my routes let's define a new route for a products I can define a put route or update product here I can say update product by ID we can also Define delete route delete product by ID so this should be the delete route delete product by ID so this is how you can group your routes let's try to access the route V1 products and the ID so I got the get product by ID what about the delete one or what about the update one I got update product by ID let's try to access delete I got the delete product by ID this is how you can group multiple routes into single route if you want to if you want to add the validation for your route Handler Alysia provides a models approach let's define a new route actually we have defined the sign in route this is a post route so we need to get the body for the sign in in the body a user need need to provide username and the password we are returning the complete body or I can say I'm returning the body dot [Music] username I'm returning the object username body dot actually return the complete part let's return that so let's send the signin request for the user and the signin here to send the body we need to select the Json select the raw select Json and you need to provide the body here I'm going to provide the username Jan gmail.com let's provide the password 1 2 3 4 5 so I'm getting the the username in the password back but how can you add the validation let's say if I send invalid field anything it will accept I don't want that we need to add the validations so in Alysia you need some you need a model you need to define the type of your body you want to accept let me do that here here you need to add the body it's asking me the body what is T you can get that typing from thisa they call the T I don't know this is here you can Define the type it's like an interface here and I'm defining the type for the body so I can say I need to define the type should be string [Music] string and what about the password field D do [Music] string that looks good now you can see it will not accept the invalid let's say if I add invalid oh I got the I got the error invalid body you got to provide the username and the password you cannot add any additional field just like that it's going to give me the error here we have validated the request party it's like a dto data transfer object what about the response for the response I can say d doob let's define the object type we would like to send the object or not the type of the username should be string and the type of password should be string so this is the uh dto or or typing for the response if I add now you can see that so in the response it will send only username and password you can also create a separate file and say models. TS and you can use your models here I'm going to copy that you need to get the typing from Alysia T from lysia let's store into sign in dto I call it data transfer object and we can export that now we can use the model dto here Here sign in dto call it sign in dto I'm also going to replace this response object to sign in D to you so it's going to fine it's going to working fine and let me add invalid field any field I should get the error so this is how you validate the request body so I'm returning the ID let's add the validation for the [Music] prams I can use the prms object let's define the object type here we need to provide the ID and and I'm going to use numeric type let's run the project this will convert a string into number automatically so I'm going to open the [Music] postman so we have to send this request V1 SL products and the ID we need to send the get request to V1 product and the ID which is one it's going to return the one ID in the response if I provide string and it's a numeric it's a it's a number so it should give me the eror invalid pram ID expected Union value so if you provide a b c d it's going to return me the error if I provide the integer it will work so this is how you will apply the validation on parameters in this lesson I'm going to teach you how to build a front Ed application with one let's create a new application I'm going to use as a v white provides a lot of template for react View and angular I'm going to provide the name of my application I can say react react application it will ask me the framework I'll choose the react whatever front end application you want to create let's say I want to create with react uh I'm going to use typescript with s swc Speedy web compiler it it's going to create uh it it has set up the project for me so I can do that go to react B install install all the dependencies now my project has created so I'm going to go to my react app uh I have already in my react app let me run the project now I would like to run the project by using this command let me open the project in my VSS code so let's run the project you can see the project is running on Local Host colum 5173 if you want to run the v as a bun you can change a script here you can write bun X Das dasb and theide you should see the react project is running now I've also modified that script so it will run the white CLI as a bun not a nodejs now I'm going to teach you how to build an HTTP server using Express and burn so make D make directory Express with bun you can choose any name CD Express with pun go to this directory open the open with code editor I can create a server. TS [Music] file let's import Express I don't need to do any setting for typescript it will automatically run it let's create the [Music] application we have to set the port I can set the 8080 let's define a root route uh it will take request Handler with two arguments request and response so I'm going to send the response say hello world now we need to listen the application we need to set the port for app I can say Port here I can run a simple message listening on Port I have to use backtick here here we also need to replace colon to pactic now I can add variable which is Port so when you run the application you will get the error because we don't have installed burn so I can install burn actually we we did not install Express we need to add the Express package as a dependency it has installed Express so the error should be gone now now we need to run the project we can say burn server. we don't need to write node server. yes I didn't set any configuration for TI script not yes config nothing here app is listening on port 8080 you can verify that go to the Local Host colon 8080 now you can see the hello world this is how the burn is powerful and the fastest to build application