Switching from Create React App to Vite

hi maurice here welcome to this video where i quickly want to show you how to convert react application scaffolded out with create react app to use fight and some of the advantages so i've got an application here it's not huge but i generated a bunch of components so it takes a bit of time to start up with great react app it takes like 9 to 10 seconds to start up and my pc is quite fast see a bunch of components here now how fast would that be invite well it's going to be a lot faster so how do we switch over to vite the first thing we need to do is create a white config file and i'm going to drag the one in i did in the previous video where i did the initial demo it's pretty small it just depends on two packages so let's install them the plugin react refresh which is react specific and fight itself so that's the install done next thing i need to do is create a script so i'll create a fight script and i'll include the open option to make it closer to what create react app does you can leave that out but this will open a new browser tab to run the application another change we have to make is the index.html create react app uses one which is in the public folder and fight actually wants one which is in the root of your project we need to make a few changes to that there is this percent public url percent which fight doesn't like so we have to get rid of that the other thing fight wants is to know where to start executing the code so at the bottom of our body we add a script element make it type module and we point it to our the entry point of our application so in this case the index.tsx in the source folder so as we can see fight now starts up in about a quarter of a second if i do so again about the same time so a quarter of a second instead of 10 seconds pretty sweet i like it so one of the reasons fight is so fast is that it uses e is built under the hood another reason is it just compiles the files which are actually needed so in this case most components aren't needed immediately so they won't be compiled until actually needed now i have run into one issue with fight one thing which is not compatible and that's m files if you use the dot n files then with create react app invite the naming is a bit different with fight you have to use the vite underscore prefix it won't recognize the standard create react app prefixes but that's a small difference and most of the time i don't use environment variables at all so pretty sweet i'm sure i'll be using fight a lot more often

Channel: Maurice de Beijer - The Problem Solver

Views: 1,050

Keywords:

Id: Zw1NcZ4KquQ

Length: 3min 15sec (195 seconds)

Published: Tue May 18 2021