Vite Crash Course | Faster Alternative To CRA

foreign [Music] what's going on guys welcome to my Veet crash course so in this video I want to talk a little bit about the what it does what its benefits are and we're going to jump in we're going to spin up a react application look at the the boilerplate that's given to us the starter code and so on and I also just want to talk about Tooling in general because I think it can be confusing to people that are on the kind of the beginner level that have just created their JavaScript files and put them right in the script tag you have one or two files and and that's fine for small projects if you have a website with a little bit of dynamic functionality or you have a really small front-end application that's fine but when you move to using a framework or you're building more modern dynamic interactive interfaces you're going to be using build tools and you're going to need a way to have a larger file structure and have that bundled into your production JavaScript that you can then include include in the browser alright so Veet is one of those tools that can do that now Vita is a more modern way of doing it so before we talk about V it's important that you understand how traditional module bundlers like webpack work so webpack what it does is it takes your development file structure which could be made up of many many JavaScript files they could be classes they could be functions your import your exporting code from some files you're importing into other files you're using npm modules so third-party packages you might have some CSS or SAS you might have you might be using post CSS so you have this kind of large development source code and then what webpack will do is it'll take all of that and bundle it up into sometimes a single Javascript file called like bundle JS or main.js and then that will be included in a script tag in your HTML so that would be a production build and that's what happens when you use something like create react app or view CLI it just all does it under you know under the hood when you use create react app it's actually using webpack under the hood now the issue we have with something like webpack is that when you're in development and you make a change it goes through that bundling that packaging process every single time it uses Babble it transpiles the code and it does it every time which is okay at first but as you're installing more packages and your application grows it starts to get really slow so what Veet does is it works in a different way where in development it's not rebundling everything every time you make a change instead it it takes advantage of the Native es modules in the browser because in modern browsers you can use es modules which is that import export syntax all right so and you can do that by just having a script tag and then putting a a type attribute and saying type equals module and then you can use that syntax so V takes advantage of that in fact it's built on top of something called es build which is actually what is using those es modules and serving your code directly to the browser in development so vid is essentially a Dev server it's not a module bundler now when it comes time to actually bundle your files for production when you run npm run build it uses something called rollup which is a a module bundler all right so V is very fast because it doesn't have to keep rebundling everything like like webpack or parcel now as far as create react app goes I'm seeing a lot of people lately using Veet over create react app you know if they're not using next.js or remix and it is faster in many ways uh I don't like to say one thing is better than the other create react app is a great tool it's been around for a long time so there's a lot of resources there's a lot of support for it I'll continue to use it in courses and tutorials but Veet is a good alternative and there's a react plug-in that you can use that makes it really easy to get set up in fact if you just run the initial command It'll ask you if you want to use just vanilla JavaScript react views felt and we'll go over that we'll see how that works now let's just take a quick look at how something like create react app works which uses webpack under the hood so basically when we first run create react app webpack is going to look at the entry point which is going to be the index.js file and then it'll bundle all the files and modules that are imported in that index.html then it's going to transpile the code with Babel it's going to set up websockets for hot reloading it's going to bundle everything and then it's going to it's going to serve to the browser right if it's you have your Dev server when you run npm start or whatever it is so this is a great process for development but the issue is that create react app has to bundle all the files every time there's a change and this can start to get slow as your application gets bigger it also means we have to wait for the files to be bundled before we can see the changes in the browser now if we look at the Veet process we don't need to bundle everything before starting the server veetuses es build to pre-bundle our files and do code splitting on the Fly and this means that we can start the server and we see our changes in the browser immediately and we don't have to wait for the files to be bundled so this is a huge improvement over create react app so after the app is served to the browser V will then watch for changes and update the browser in real time and it uses the browser to parse the es modules and then it'll bundle files on the Fly and this means that we can see our changes immediately and when your code contains Import and Export statements the browser will request the corresponding files from the server via HTTP alright so that's kind of a just a quick rundown of how Veet works so what I want to do now is jump in and show you how to get started with using Veet for we're going to use react but of course you can use it with vanilla JavaScript or another front-end framework all right guys so this is vjs.dev this is where you can find all the documentation configuration options so anything you need so if we go to guide here it will tell us how to get set up now I do want to mention that I have a blog post at my website that is basically a basically follows along with this tutorial so talks about a lot of the stuff we've already mentioned and then has little Snippets for our commands and the little bit of code that we'll be writing and so on so I'll have the link to that in the description so to get started we can use npm yarn or pnpm so I'm going to open up a terminal here and we're going to run npm create and then Veet at latest and then whatever we want to call the folder I'm just going to call it Veet app now when I run this It'll ask what I want to use as far as a framework or vanilla but we can also add dash dash template template and then I could say react or view or whatever I want to use but I'm just going to run it like this and you'll see the choices that we get vanilla view react preact lit spelled and others I'm going to go ahead and choose react you can use typescript I'm just going to choose JavaScript and then CD into feed app and then from here I'm just going to run vs code and I just want to take a look at the file structure now throughout this video it might seem like I'm bashing create react app and I'm really not I'm just trying to point out the benefits and the features of Veet and one of those features is the very simple boilerplate file structure that we have here so you can see it's very light if we look at our package.json again very light we just have react and react Dom as dependencies as Dev dependencies we have Veet we have the react plug-in because we chose to use react and also our types for react and then as far as scripts go we have our Dev script that's going to go ahead and run Veet which will run the dev server we have our build script to build out our files for production using roll up and then preview will preview our production build once once we run npm run build alright so simple package.json the config again very simple very light all we have here is the Define config helper function that's where we pass in all of our configuration and here we just have a plugins array with react because that's what we're using all right now you can also install other plugins I'll show you that towards the end and then we can have a server object here for our Dev server options and I'm going to set Port 3000 because the default I believe is like 51.73 or something like that so and if you want to add a proxy here you can do that as well there's other options you can look at the documentation for that so let's save that file and then we're going to go to our index.html which notice is not in the public folder the public folder is strictly for assets images icons things like that index.html is right in the root and if we look at it it's very simple we have our div with the ID of root just like you would with any react application and then notice the script tag is using this type equals module so this indicates that we're using ES modules in the browser and instead of pointing to some bundled JS file we're actually pointing to our main jsx which is our react entry point so if we look at that that's where react and react Dom are brought in our main app components we have a little CSS file with some default styling and then rendering here from react Dom which is rendering our app component okay and if we look at the app component it's very simple it's just a simple landing page we'll check it out in a minute and it has some state for account and just has a button that's going to increment that count all right so let's go ahead and run the dev server I'm going to open up my terminal and we're going to say actually first of all we have to run npm install which will obviously install Veet and all our dependencies react and so on okay once we do that we can run npm run Dev that's going to open on 3000 and you're going to notice that everything is just really really fast so this is just a basic landing page it's the app.jsx file that I showed you we have this little button here where we click and it just increments the count State okay so what I want to do now is just create a very simple react component so let's create a folder called components and then in there we'll create a file called header let's just say header.jsx and I'll do r-a-f-c-e enter I'm just using the react Snippets extension and let's see we'll just put in here in the div hello world and then let's bring that into our app.jsx so we'll say import header and we'll put the header component right here okay now I'm going to save that and let's go back here and notice now we get hello world and notice that the state is still here that count is 12. it didn't reset to zero when I made a change okay so that's an example of HMR a hot module replacement so another thing that I want to show you is how we can have environment variables so if we go back to vs code and we create in the root okay you want to make sure you're in the root and we're going to have a DOT EnV file and this is something you can do with create react app as well if you have Global variables that you want to be accessible throughout your site then you can have this dot EnV file where with create react app you would do react underscore app underscore and then whatever you know whatever the the key you want to use or the variable you want to use we'll go ahead and use copilot's suggestion of API URL now instead of using react underscore app we say Veet underscore and then whatever the the variable so I'm going to save that and then to use it let's go into our header and to use that let's just replace this hello world we don't do process.env what we do is import.meta so import meta and then EnV and then whatever our variable is so we'll say API underscore URL okay and then if we go back to our home page here we should see that value of the API URL so that's how we can have environment variables now another thing we can do is use SAS out of the box so let's go back and I'm just going to install SAS we do need that as a dependency so we'll install it as a Dev dependency and let's run the server again and what I'll do is go over to here to the source folder create a folder called scss or we could have our SAS files and let's create main.scss I'm just going to add a simple variable of primary color and we'll set that to let's say steel blue and then I'll add that to the body's background color now when I have the the CSS file I can just bring it directly into my component so I can say import and we're going to do dot slash scss slash main dot scss save that and now you can see we have our blue background so it's as easy as that if you want to implement SAS and then when you're ready to build for production you can simply run npm run build okay so very quick and then you'll see there's a disk folder here and if you want to preview that build you can do npm run preview and now that's going to open on this localhost 4173 so this is our production build okay so pretty simple now as far as plug-ins go if you go to the website here and you go to plugins as far as official plugins we really just have the The View plugin react react with swc and then you can also use roll-up plugins because it uses roll up to bundle your files for production and then there's also right here there's a bunch of community plugins so different Integrations you have like electron and all kinds of stuff here pwa Progressive web apps you have loaders you have bundling plugins Transformer plugins helpers so you can take a look at that there's just there's a lot of different things that you can install and use there's even a vet SSR plug-in that you can use for server-side rendering so that's it guys hopefully you enjoyed this as I said there is a blog post to go along with it if you want to if you want to read this and there's there is some extra information that I put into here but uh but that's it guys thanks for watching and I'll see you next time

Channel: Traversy Media

Views: 88,692

Keywords:

Id: 89NJdbYTgJ8

Length: 16min 24sec (984 seconds)

Published: Tue Mar 14 2023