Vite with TypeScript and React (vs. Webpack)

[Music] if you are tired of your webpack builds taking too long the quickest solution that i can offer you with the same level of developer features but much improved ergonomics and definitely much improved performance is sweet in this lesson we will look at how you can get started with beat building a typescript plus react project so let's go [Music] getting started with bead is pretty easy as it comes with the guided project template creator you run the command npm init wheat at latest this will first download the feed package and then run the init command within that and this will ask us what project name we want which we will call demo feed we will select our framework as react and of course we love typescript on this channel so we will use react ts template now if you are familiar with create react app with the typescript template which is also something that i've demoed on this channel you will realize that this is much faster compared to that workflow now let's jump into our ide and start playing around with this project the first thing that you have to do whenever you clone a project that uses npm is run npm install and this is no different you will however again notice that this will complete much faster compared to a webpack template now the first thing that i want to show you in this sweet provided template is the package.json file notice that the only weed specific package that we really need is wheat itself and because we are using react there is one additional wheat provided package plugin react refresh we will look at that in a bit beyond that we have the usual suspects for react development which is react react on its type definitions and of course typescript itself we don't need any additional packages for the cli on the dev server or any of the loaders for typescript or css and stuff like that wheat supports all of that out of the box the next thing that i want to show you is how our application entry point is configured it is actually configured from our index.html if you open that file up you will see that it has a script tag pointing to our source which is src main.tsx that's good file it will actually read this index.html and then start compiling our main.tsx file within our main.tsx we have a pretty simple rendering of our app component and if we dig into the app component you can see that it is a pretty standard react demo component that you might be familiar with from other react templates now let's open up our terminal and run our first script which is what we will be using during development and it's intuitively called npm run dev this will start up weed in dev mode and start serving our application on localhost 3000. notice again how quickly it booted up now let's open up this url in our browser and see this demo app as we mentioned it's a pretty familiar app component with the counter button down the center which we can click a few times to update the react ustate to the value 3. now if we have the code side by side we can modify the app component for example modify the learn react link to be learn react fast link and you can see how quickly the ui responded and it preserved the value of use state at value 3. and this react specific fast refresh is actually configured from our weight.config.ts file within this file you can see that the only real code that we have is the react refresh plugin as someone who loves typescript there's a lot to admire within this particular file first off notice that this file itself is a typescript file and we suppose typescript config files out of the box next wheat ships with its type definitions so our config object is actually type checked by the typestrip compiler as you passed into the well typed define config function that we imported from wheat finally even read plugins come with typescript type definitions which we can see when we hover over the react refresh function now let's clean up our workspace a bit and jump back to our package.json to finally build our application and make it ready for deployment within our package.json script section we've looked at npm run dev already which is what we used for development the next script that we will look at is npm run build notice that our build command actually invokes the touchscreen compiler followed by beat build this is because a wheat does not do any of the type shape type checking as that is something that the typescript compiler can do much more efficiently for example with its watch mode or you can even enable it within your ide and the only time you actually need to invoke the dashboard compiler is only for the build time verification to make sure your code still type checks before you push to production now we don't need to use the typestrip compiler to image any javascript as that's already done for us by weed build so within rts config within this template no emit is set to true this means that we don't end up with any pesky generated javascript files within our source folder now let's jump back to our package.json and open up our terminal to execute the npm run build command this will perform a quick type check of our code with typescript followed by wheat build which will generate a production build for us within the dist folder notice once more how quickly this completed as someone who works in infrastructure and has done a lot of build in his lifetime i definitely appreciate the speed as you can probably tell now you can ship this dist folder to some cloud provider and yes lessons for that are coming but you can also test this production bill locally by running the serv command provided by the template within our terminal we execute npm run serve and this starts serving the dist folder on localhost 5000 so now we have two versions of our application running with our dev build on port 3000 and we can compare it to our production build easily running on port 5000. now comparing wheat to webpack there is nothing webpack specific that i miss as i've swapped over to beat and of course the greatest benefit is the performance there is only so much time that we have in our life waiting for our bills to complete if you enjoyed this lesson smash that like and subscribe and i will see you in the next one you

Channel: basarat

Views: 9,023

Keywords: typescript, javascript, basarat, that typescript guy, typescript deep dive, react, node, npm, angular, vite, vite react, vite tutorial, web development

Id: qTHmFz7mcKc

Length: 6min 7sec (367 seconds)

Published: Sun Oct 03 2021