Learn Vite For Next React TypeScript Project in 2024 | Vite Crash Course in 15 minutes

hey what's going on guys welcome back to another video I usually use CRA which is the create react app to scaffold my react projects and one of the major problem which I face is that my local Dev server becomes bit slow as my application code grows and also the build time increases whenever we make frequent changes in the code base in this video we will explore an alternative to CRA which is vat it's a new front- end tooling and we will see how it works and we will also explore why it is faster as compared to the CR so if this sounds interesting then stick around also don't forget to subscribe the channel and press the Bell icon so that you don't miss the videos like this one so let's get [Music] started so we will soon discuss how we can be a solid alternative to the create react app but if you are also looking for an alternative to boost your career in 2024 then check out coding ninjas lately they have undergone a refresh with an objective to help the Learner in every possible way to get the Tech Career you deserve faster the advantages of choosing a course at coding ninjas is that you get the fastest onetoone doubt solving session with their 500 plus teaching assistants ready to help you and solves 85% of your doubts in less than 20 minutes enroll into their three-stage learning model where they have an integrated Studio their coding practice platform with the course classroom where you will learn Excel and stand out you will get a placement preparation with onetoone mentorship session that will help you to Ace your interviews over the last seven years coding ninjas have helped 100,000 Learners to achieve their dream job they have, 1400 plus aluminize working in man companies and unicorns Learners have got one CR plus highest package after completing their courses and 128 plus% average hike in their careers if you are someone who wants to upskill to grab opportunities at top tech companies or looking for an alternative to boost your career then with the coding ninjas Advantage you can get the Tech Career you deserve faster check out their wide range of courses and job boot camps and give yourself another chance to Ace your Tech Career with top packages and working in top companies you can take a free trial of any coding ninja course you will find all the links in the description of the video all right guys so before we jump directly into the wheat and scaffold our first project let's go through some slides and let's understand some concept so the problem is before es modules were available in browsers developers have no native mechanism to allow the JavaScript to run directly into the browser in a modular fashion and that's where we are very familiar with the concept of bundling using tools like weback rollup and parcel which actually craws process and concatenate all our source modules into a single file which is we called as a bundle Js and that runs on the browser and this greatly improves the development experience from the front-end developers now let's understand what this es module is and how bundling works so now we will see that we have an example here where we have an app.js file which is using an import statement and this import is actually an es module so we have an import of an add function which is a named function and we have this function defined in our matt. JS where we actually export this function but we cannot run the appjs and matt. JS directly into the browser and that's where we use the webpack and we do the bundling and our existing code will look like this we have a function add and then we do a console log of that so this bundle.js will now be executed on the browser and we see the output next we will see that how we start up our Dev server using the CRA so create react app is based on a VAP bundle configuration and we see how our Dev environment is running so we see that that we have an entry point which is our index.js which has a reference to our app.js now all the entries and routes and all the modules which are inside the routes like all the import export statements they all are bundled together and form a bundle.js file and that file is served on the browser which we see our Dev server environment so whenever we make any change into any file all the files are bundled again and then they are served on the browser next let's understand what we is trying to solve so V solves two major problems one is the slow server start which we just saw in our c that all the files are getting bundled first and then they are served on the browser so this problem is solved using the native esm based module so now majority of the browser supports the esm based module how we can inject them in the HTML and which can be run directly onto the browser we're going to see it in a bit the second problem was the slow update so whenever your code base increases and whenever you make changes in your code it actually bundles all the files if you're using Create react app or webc based configuration whenever you make changes all the files will get bundled again and then the files will be served on your browser so this problem is solved using the hot module replacement using vat we're going to see this as well what this hot module replacement is in a bit now we see that how V actually serves us the dev server so this is the native ESF based Dev server and which is being used by the V so whenever we start our server it will readily available it just makes an HTTP request to the entry point and the source code is readily available using the native esm so majority of the part is taken care by the browser itself about bundling and V only transform and serve the source code based on the demand as soon as the browser request it's going to serve the source code so it's a very different approach which actually makes vat a bit faster as compared to the create react app now let's go to the official document M mentation and let's go through it and let's see how we can just scaffold our first wheat project all right so this is the official website of the vat JS dodev and it's a Next Generation front-end tooling and it helps us with some major advantages like instant server start Lightning Fast HMR which is the hot module replacement and there are a lot of Rich features optimized Bill several pugin which can be used and it offers a fully type API so we are going to go to the guide and from the guide what I will do is let's go to the get started and I'm going to scroll down and we'll see that how we can start whe so if we go here then we see that we have a scaffolding your first wheat project so for that what we will need to do is we need to use the npm command we will have a create and then we use whe at the rate latest we can also use the template so if you know already that we want to create a react app or we want to create a view app we can use any one of the syntax but for now we will just going to use the npm create weat and before using the npm you should also install nodejs into your machine so let's go to the visual studio code and let's see how we can scaffold the application so I'm going to copy this I will go to visual studio code and I'm going to go to the terminal so I'm already into my directory which is the V app and I have already installed my nodejs so I can check it via node hyphen V this is my version and we also have the npm so this is my npm version now what I will do is I'm just going to copy and paste so this is the npm create wheat at theate latest I'm going to hit enter now this is going to ask me what is your project name so I'm going to give my project name as first V app all right then it's going to ask us what framework you need to use so you can use a vanilla JavaScript you can have a view react preact lit shell solid quick others so it has a huge list of Frameworks which are supported so we are going to use react because we are much more interested in using the react so I'm going to select react and enter now it is going to ask me that what variant you need to use you need to use a typescript or a typescript with s SWR or you have a JavaScript and JavaScript with Sr I'm going to go with the very simple which is a JavaScript all right so now you see that as soon as you select it your application is already scaffold and it's bootstrap so you have your application here and if you want to compare this with your create react app so you can just have a parallel screen and you can just write create react app and create your app and you will notice that it takes a lot of time to create your project using the CRA so that's where V is very powerful now what we can do is we already have the directory here we just need to use npm install and then we have npm run all right so before doing that let's go through the folder structure and files that we have in our project so the first file I see is V.C config.js so it's a simple configuration file which is actually going to define the plugins which we will be using so it has a simple defined config and you can provide your plugins you can also provide more options here you can have a server as an option and you can provide the port number and everything we're going to see later on now we have a packet Json file so in the package Json file we have the type as module then we have the scripts which is Dev vit we have the build we have lint and we have preview for the dev dependencies we have the react react Dome dependency and we have a VJs plugin react because we are using a react app now if we go to the index HTML then we have this main HTML file where we have an ID as root but here you will notice one more thing that we have a script where we have a type as module and this is actually the native esm so you can use the type module and you can inject your es module files directly into your HTML and that is where the native es module based syntax makes wheat much more faster to serve your code now if we go to the source folder it will be pretty standard we have this main jsx where we have this create root document. getet element by ID we take the root and then we just render our app component we go to the app component and we see that this is our app component we are not going to change anything now let's go and let's install the dependencies I'm going to go to the project first so I'm going to have the CD now I'm going to have the npm installed so that is going to install all my dependencies and then once we have the dependencies installed we are just going to run our Dev server all right so all our dependencies are installed now if we want to run our server what we will do is we are simply going to use npm run Dev and you will see that it instantly load our Dev server so you will see that we have already our Dev server started in just few milliseconds and now I'm going to copy this all right I will go to the browser and into the browser I'm going to add this and let's hit enter and you will see that we have our first project V plus react and it has a simple counter so we can just just click on the counter and you will see that when you added your app.js and you save to test the HMR all right which is the hot module reload now what we will do is I'm going to go back here and here I will add few properties into my config so what I will do is I want to change the port so I will go to the V I will go here I'm going to have the server and inside this I'm going to give the port as 3,1 or maybe 3,000 uh along with that I also want that whenever I run my application it should automatically open the browser as well so I'm going to have the open and I'm going to give the open flag as true I'm going to terminate my server and we will again start our local environment so I'm going to have npm run Dev and if I hit enter you will see that as soon as I hit enter it immediately opens it in the browser so we can easily identify how fast it opens our Dev server because it is using the native esm module now let's understand what this HMR is so if I go back to my visual studio code and here what I will do is uh I'm going to go here and I will go to the app.jsx and here I'm going to Simply add uh something so I will add an H1 and I'm going to add uh what is HMR so now if I save this you will see that it is only going to replace the app.jsx from the module graph so it generates a module graph and it is only going to replace this particular component so that it doesn't affect the other parts of the application and it becomes very quick so I'm going to save it and you will see that V HMR update only updated on the app.jsx and if we go to the browser we will see that we have this updated now I'm going to change the counter and if I go here and now here what I will do is I'm going to create a new component so let's have a new folder I'm going to name the folder as component and I'm going to create a simple file for the component which will be message. jsx all right now in this I'm going to use a snippet and create a component and here I will have an H2 and I'm I am from message component all right I will just remove this we don't want and now we can just import this in our app.jsx so here I will go and have my message all right the message is imported and I'm going to save it here so you will see that when I save it and if I go back here you will see that I am from my message and the state is also maintained so it is not rendering everything so that's where this hot module replacement it actually speed UPS the changes in our code so if we go here and now this time I'm going to change this I am from message component and I'm going to have HMR and I will save it then you will see that HMR update only on the message. jsx and it's not bundling all the source code again and then you're serving it on your local server the other aspect which I want to show you is that how we can use the environment variables into the weat project so what I will do is we going to have a simple uhv file so I'm going to go here I will have the EnV file so when we scaffold our application using the C we use a environment variable where we use it as the reactor app and then we gave the name of our variables so if we go here then you will see that adding custom environment variables and we used to use reactor app and then we give the name of the variable now whatever the key we give it if we want to fetch it we used to have a process.env and then we have react app and then the key but when we use it with the V we don't have to do like this what we can do is let's go to the documentation and we can go to environment variables here and here we will see that how we can make use of it so we need to use V and then we give the key name so let's copy this all right I will go here and I'm going to add it here and I'm going to give the key as the page so let's have the page now if I want to fetch the key then what I can do is I'm going to go here I'm going to have the H3 and here we can actually fetch it so if we want to fetch it what we will do is we going to use the import do meta Dov and then we're going to give the name of our key so the name of our key was V some key so let's use that so I'm going to have V some key all right so now let's restart our server so I'm going to cancel this and I'm going to reset it again before that let me close this and I'm going to hit enter and now we should be able to see something here oh oops we don't see anything so we made a mistake let's take it inside the application so I'm going to move it all right I will save it and let's restart our server again so I'm going to restart my server and we see that we have the page here all right so this way we can actually use the environment variables but if we don't give the V so let me have a DB password so I'm going to have DB pass and this DV pass will be 1 2 3 and let's try to use this so I'm going to go here I'm going to have the console.log and I'm going to log this so let me log the import and I'm going to change this to DB pass so let me copy this I'm going to go here I'm going to change this DB pass and now if we run it and let's go and let's check so if I go to the inspect element in the console and we see that we have it undefined so we really need to give the key and the key should start with wheat and then only we should be able to get the value of the environment files all right so if I go then we see we have 1 2 3 now the last part I want to show you that if you want to have your application to be production ready so what you can do is uh you can simply go to packet Json and then you can use the build so let's use it so we can use npm run build and this is going to build our production version so you see that it's very quickly and it has created a disc folder and you have all the assets and everything all right now if we want to preview this we can also use the preview so let's have the npm Run preview and this is going to preview us the application from the disc folder so this is how our application looks like so that's where V is bit of faster as compared to the C as it's using the native esm module to load the source code into the browser directly that's all I have in this video from now onwards maybe from our next projects we are going to use wheat as a front-end tool for our react application and react projects so I hope you like the video a thumbs up is appreciated you can also follow me on Twitter for latest updates and before you go don't forget to subscribe the channel and press the Bell icon so that don't miss the videos like this one thank you thanks for watching

Channel: Dipesh Malvia

Views: 2,166

Keywords: vite, web development, javascript, vitejs, vite tutorial, vite javascript, vite react tutorial, setup vite react typescript, react, reactjs tutorial, learn vite react, learn vite in 15 minutes, CRA or vite, Your Next App Needs Vite!, vite ts, vite project, typescript vite, javascript vite, react vite project, vite react, vite typescript, vite js, create react app vs vite, vite react typescript tutorial, setup vite react project, Hot Module Replacement, hmr update vite

Id: -fj1loJfSdA

Length: 17min 31sec (1051 seconds)

Published: Tue Jan 16 2024