What is Vite? How does it work? Explaining all the files in a generated React + TypeScript App

Hello friends May the fourth be with you welcome to this preview of my new course react Roots which teaches the basics of building modern single page web applications with react and typescript if you go to reactroots.com you can learn more and specifically if you click on the section what will I learn in this course you can see all of the lessons from the course and if you click on lesson three that's what today's preview comes from so this preview covers these two learning objectives use Veet to generate react applications and explain the purpose of each file in a generated react app I hope you enjoyed this preview if you do definitely check out reactroots.com to learn more here it is alright let's write some react code so for this we're going to use Veet Veet is next Generation front-end tooling so this is a build tool it's similar to like webpack if you've heard of webpack it's similar to parcel under the hood it uses this thing called roll up and it also uses this thing called es build but essentially when we write react code that looks like this it has to be turned into actual JavaScript and so Veet has a plug-in that can do that for us it handles all of the all of the details of making sure we we have the right like react dependencies and everything else and first of all it provides a really fast development experience so when we're we're building apps with Veet it's using ES build and essentially that makes working with in development really fast because it doesn't have to transpile everything completely it basically transpiles things just enough so that they work in the web browser and then when you do a production build it actually uses roll up which makes sure that it works across browsers and uh does minifying and everything else so we're going to be using V if you want to compare it to something you can compare it to webpack or parcel Veet Veet is the new hotness and it's kind of here to stay uh solid.js uses Veet svelt uses Veet Astro uses Veet various other things USB everything is using Veet essentially it's become like the tool that everyone wants to use and it's zero config as well so yeah and so uh create react up is potential is what we used to use and there are just a lot of issues with it it's old and and the mechanism for how it managed things was very cumbersome so create react app under the hood used webpack but by default it hid that configuration away from you and if you wanted to modify it or like add new build settings you would have to eject and that was potentially cumbersome because now you have a big config to maintain you didn't necessarily have to do that because there is a tool that would let you modify the config in your create react app without actually ejecting but it was a third-party tool it wasn't supported on Main and then there are other various issues as well yeah there's a lot of drama around around it I'm not going to talk about it all I'm going to say is we're going to use V it is the uh if you're if you're building a single page application like a completely front-end react app Veet is the way to go I talked about this the past two days but we're not going to be building server-side renders at rendered apps for that you potentially would use something like next.js and nexjs does not use V Next JS uses I think it uses Speedy web compiler this thing all of that to say you honestly you don't have to worry about it because it handles everything for you it is good to know what these tools are and like the fact that they're happening under the hood but let me show you how actually how easy this actually is all right so if you go to V you click on get started they have a few different templates that you can use we specifically are going to use the react and typescript template and what we can do is just run this command yeah so there are a lot of issues with create react app I mean if you search if you search Twitter if you search YouTube you can find people talking about it and giving a rundown I'm of the opinion I just use what works so I mean I use create react app for a long time especially like if I didn't need to modify the config and it was fine um these days uh I used to beat for everything all right let's go so in this directory I'm gonna run this command now technically you can pass in an argument and just say hey I want to use the react TS template but let me show you if you do it without that you're going to get some options so I'm gonna run this give it a project name let's call this intro to react it's going to create a folder called intro to react and then we can choose our framework so in our case we're going to use react but you can see that they have templates for for other front-end Frameworks or just a vanilla JavaScript as well so we're going to choose react and we're going to choose react with typescript now you could choose uh typescript with swc so that's that Speedy web compiler thing but in my experience there aren't as many supported plugins for it because if you choose this one your you the the plain typescript when it's using roll up and there are a ton of roll-up plugins and and Community packages you can use with it um so we're going to choose this one and now it created a folder so it created a folder called intro to react if we go into introverted react so in this folder we have our have our app that was generated with Veet I can install dependencies um because you can see like they give us a package Json they give us a TS config so they basically give us everything out of the box and then I can install dependencies start it up uh with the dev command so if I do npm run Dev that starts it up I open it in my browser boom I've got a react and typescript app that's that's running with Veet um okay so let's the the next step is we're going to talk about what actually got generated here and talk about all of all of these files um but yeah Veet is cool you can use it for a lot of different things we're specifically just going to be using the react typescript template um and then later on as we build more complex applications we might have to dig into how do we handle static assets or various types of things that we want to load in but for the most part we can kind of just use the setup as is let's talk about all the files in this generated app and and what do they do and why do we need them Etc so when you generate a Veet app with reactant typescript it's going to give you this like I said it has a TS config so this has some sensible defaults you can see that it has a Target but you can see we don't even have to touch this like we talked about yesterday what what some of these properties do and why we would need this TS config but we can just use the defaults on unless we're doing some custom typescript stuff that isn't supported by default you'll see that there are two typescript files this one is for react for our front-end code you can see that it's referencing dom dom iterable that means we're going to be able to do front end type things in our typescript code there this other typescript config has called dot node this is for the build process so in on day one we talked about how we use node.js to build our front-end code so when we when we are running our app locally the actual code under the hood that uses typescript is is using this config um so again you don't have to modify or touch either of these but this one is being used by the build process this one is being used for the code that's running inside of the web browser if you look at the Veet config this is literally all we need so they have this plugin called uh react we add the plugin and now we can start working with react code there are various other plugins in the ecosystem and then there's a way to modify like the rollup config and any of the other options if you need to but yeah you can check out the site if you want to modify more but for the most part that's all we need and then we can look at the package.json so it gives us some scripts by default when we run npm run Dev it's running V when we run build it's going to run the typescript compiler remember we talked about this yesterday and then after running the typescript compiler it runs uh the build to take all of our our front-end assets and and turn them into a as as few files as possible and as few bundles as possible and then preview is a way of previewing the built version before we deploy it you see that it has a dependency on react and react Dom and then it has a dependency on their types as well so yesterday we talked about how some libraries don't have the types built in so if we're using them with typescript then we're going to need these extra type libraries we have the the react plug-in typescript itself to give us the typescript compiler and then Veet which is used to build so overall a pretty simple setup but it gives us all of all of our dependencies so we can get going from there I didn't talk about the package lock when we were talking about node and npm on day one but the package lock essentially allows these npm installs to be consistent across projects because you can see here that we have various versions and this little sign right here means we'll take anything 8.2.0 or above so it's possible that it actually installed 8.2.1 or 8.2.2 and we potentially want to know that so all of that information gets into the the package lock so when someone else does an npm install they get the exact version of it but you don't have to worry about that now we have our entry point so you can see it's just a plain old HTML file it's got a title um and then it has this one element right here so our entire react app is going to live on that one element with div ID root and then you're you can you're seeing something interesting here on line 11. so first of all script type module we talked about this on day one um essentially this allows us to use modules in the in the web browser but you'll notice we're actually linking a TSX file and browsers don't understand TSX files so this is actually some of the magic of Veet and and Es build so when we're running in development we link to our actual source code but behind the scenes whenever it sees that it's like oh well I need to transpile that into JavaScript and then if other files are linked and they're typescript or their or TSX then it's like oh I need to transpile those as well so on the surface pretty simple but when we build our app it we can't do this right because by default uh web browsers don't support typescript they they only support JavaScript HTML and CSS okay so that's the HTML that's our entry point we have our public folder which links the favicon that you can see right here and then we have our source directory which is where all of our react code is going to go now you can see here we're linking source main.tsx so if we look in source and we look at main.tsx this is the thing that gets loaded in and uh you can see we're bringing in react react Dom and then we're bringing in our our app component and some CSS um here you can see where it actually gets rendered so essentially all of our application code is defined in that app component and then it gets rendered out right here and this is TSX or jsx if you're in JavaScript but the fact that we can have these HTML elements like right in the file this is TSX we're going to talk about the specifics of TSX in a bit for now just think of it as HTML mixed with your JavaScript and then we're also seeing some type assertions here right so it's grabbing that root element and then saying this is going to be an HTML element and if you remember yesterday when we were talking about typescript we we can use type assertions when we know that something is going to be of a certain type right because if I don't have this type assertion it says it's possible that it's null right because when you select an element in the Dom it might not exist but we're like hey we know it exists because we defined it there's literally an element right here with the div ID root so I can I can just say hey I know it's going to be an HTML element it's not going to be null I think the other way you could do this with typescript is if you do an exclamation mark you basically tell it that thing's not going to be null it will exist but you can see we're basically rendering our entire app to that one element you typically won't have to touch this file unless we're changing like the top level rendered components but this is basically the entry point and from there we can start looking at each of these files so first of all let's look at app so in here we can follow to app.tsx and we see our app component you can see that it's bringing in some State it's bringing in some images and some CSS it's creating some state which we'll talk about and then we have our actual app component so we've got a div with two anchor tags we've got that header we've got a div with a button that we can click on um and so that is what we're seeing right here so we see those two images we see the header and then if I click this button I actually see some some initial state right there as well um that's basically our app let's talk about some of these Imports and talk about the fact that we are importing CSS in a typescript file which is not supported by the web browser if you if you tried to do this in the web browser it would break um this gets handled by the bundling process so whenever uh Veet comes across this file it uses rollup to say or ES build to say oh you imported a CSS file well I know what you actually want to do and behind the scenes it literally creates a style element and then takes the source code of index.css and puts that into that style element that's all happening behind the scenes but all we have to do is import the CSS file and now we get access to it if you look at the actual source of the web page um there's going to be a style element up here and that actually got injected yeah look at this so you can see that right here it has an ID and then those are all the styles of that CSS file but we didn't have to manually create a style element and put the CSS into it we we literally just import a CSS file and the build process takes care of that it it basically creates a style element injects all of those styles for us similarly if you look at the app component it's bringing in images right importing svgs is not something supported by uh ecmascript modules or like JavaScript modules but basically it sees this and it knows that it needs to create like a resource or a bundle or potentially load the entire SVG let's see how it actually does it yeah you can see that by importing it so we import react logo we import vlogo we just specify that you are the the import there but behind the scenes it based that import got turned into a string so if we actually look at what got imported here it's just the path to the file it's not the actual SVG and again all of that is handled by the build process so if we log this out uh you can see it it's it's it's literally strings like it's not actually bringing the whole SVG in um it is um uh just giving us a URL that we can then we can then reference because whenever we build this that URL will potentially be different and then uh same thing same thing happens right here so because I'm importing the CSS file uh during the build process it takes all of this injects it into a style element um and then we can actually get get styles for this page but it's important to note right so if you if you know how CSS works if there's a style tag on the page and there are CSS inside of it it applies to the whole page so this is a little bit deceiving because we're actually importing index here and then app here at the end of the day it's all Global Styles if you look at actually what's getting what get what gets rendered on the page both of these are Global so even if I Define something over here it's going to affect the the CSS everywhere else in my app on Tuesday of next week we're going to talk about other styling methods and there there are basically there are better ways to do it than having global CSS uh so we're going to talk about that next Tuesday for now we're actually just going to be using uh Pico CSS so it gets all of our styles by default but yeah muley is asking can you use SAS you can you just have to look at the Veet documentation on how to set it up so if you go in here and yeah just search for scss I don't know if it's actually supported by the phone let's see if it's supported by default we're going to change that to app.scss and then um let's use SAS for these selectors so is that how is that how is that how fast Mike let's kill the process restart it and let's see if this this breaks yeah so you can see once I start to import this it's like pre-processed dependency wasn't found did you install it and then at this point I mean we're getting off track here but at this point I think I can just install SAS let's try it so if I do an mpm install of SAS start it back up it works so uh V handles a lot of the stuff under the hood typically you would have to uh for other uh bundlers you potentially would have to go into the config add an option for SAS and add the plugin in this case if the SAS dependency exists SAS just works so that's pretty cool and that's that's uh like the benefit of feed so I got a little sidetracked there uh this is the app this is what's happening I think the last thing I'll show you is actually what is happening inside of the web browser when this is loaded with with Veet so if you look at the source code as you can see um it has it injects a couple of things so this isn't just directly the HTML file that we defined this is how we defined it but then you can see some extra stuff got added right so it has this react refresh it's got the Veet client and then it links to our file here watch what actually gets generated when we click on main.tsx the source code for this is now JavaScript that the browser can actually understand so you can see that there's there's no jsx right but we are we are basically this is plain old plain old plain old JavaScript that can run inside of the web browser but all of that is kind of handled on the fly so the moment a file is requested Veet can take that TSX file because if I'll remind you this is what that file looks like right this is how we write our code with typescript and everything else and then when it runs in the browser it needs to be converted into JavaScript that the browser actually understands so that's what we're seeing when we click on this but I think so when we're in development and uh in real time build these files and so this is in contrast to other build processes like webpack where every time a file changes it needs to to rebundle and recompile your entire app this does things on the fly as they're requested in the browser so that's that's the development process and that development process is running through es build now if we actually build this to be a something that we want to deploy to production so if I do npm run build this uses rollup and as you can see it takes all of my code and converts it into four files I have my main index uh my react SVG some CSS and a Javascript file so these four files are what we can actually deploy to production and that gets put into the dist directory so if I go into dist actually we can just look at it here um this is the stuff that the web browser is going to understand right so there's no more import of like a TSX file uh basically we import one single Javascript file that has everything it has the react Library it has all of our components everything else yeah so let's look at the assets so if we look at CSS this is a minified version of all the CSS in my app so I took the index.css and the app.css and put it all into this one file with no spaces as small as possible and so that's the minification process that's happening behind the scenes and then if we look at this Javascript file this also is I guess it's a few lines but this one line right here is 944 characters long so it basically took um all of our codes all of the react code and put it into a single bundle for us and that is actually what gets loaded into the web browser uh also like the SVG gets loaded loaded here um nothing special and the v logo too but this dist folder this would be the thing that we actually deploy to to a website and I guess let's do that so I use this tool called surge which just lets me deploy static websites so I want to deploy this I'm going to call this intro to react Veet example that puts it on the web and then now anybody in the world can go to it but if we look at the source code of the page we can see it's not it's not there's no build process now this is just those static files and when you visit this page you're downloading those static files you're downloading the JavaScript you're downloading the CSS and the page is actually actually rendering out so you can see my cool uh example there at that link but uh when we build react apps this way it's it's that easy to deploy them because they're all just they're all just static files all right any comments or questions concerns criticisms of all the C's anything uh about the layout of this in Veet before we jump into uh react components and how react components work uh yeah no good good question Brian npm run build used uh roll up um it's actually hidden even from us so uh you can see that it's doing Veet build but under the hit under the hood Veep build uses roll up so a roll up is for the production build uh es build is for the development server and explain the differences between the two TS configs once more one is for the dev process and one is for the build process yes yes yes yes yes so uh when I am in my terminal right here and I run npm run Dev this is node.js that's running on my computer this is essentially my development server running locally as I as I I work on the app um and so that spins it up here and then if I make changes it has things like Auto refresh so like let's go in here to change the title to be intro to react save that back in the browser it auto refreshes right now I'm in development and that is handled locally by node.js so I have this little program running it detects file changes it automatically refreshes the browser that's the development process and that's why we need node.js for that in that process potentially behind the scenes has typescript code written that watches for file changes or different things like that and so that's what this TS config is for so when I am running the dev server it's using this TS config behind the scenes also whenever I bundle my app so uh let's say we're not in development anymore we're ready to deploy if I do npm run build this build process uses node.js it's running on my computer to take all of the modules put them together into a single file everything else all of that is a node.js process that potentially the code was written with typescript to do that so that's why it needs that separate TS config as well so those two things are are node.js that's running on my computer after that whenever I deploy it is no longer no no no node.js is no longer needed because in the disk folder these are things that can just run in the web browser so uh node.js is for the build process and the dev server but after that you just have static files that you can you can deploy to the to the web to clarify this is for both the uh Dev server and the build process this other one is for our code that we write in our react app so uh for instance inside of here the fact that I can access document without getting a typescript error is because in the TS config it says hey uh for the typescript code I'm writing in my react app it should get access to Dom right if I get rid of these two things we're actually going to get an error because it's like hey document doesn't exist um yeah so it's like hey it's not defined you need to actually include that but we include it because this is code that's going to be running in the web browser for the build process it's not running in the the browser the build process doesn't need access to document so that's why the node config doesn't have the the Dom Library hopefully that clarified things I I do think if like if you're if you're newer to this I guess it can be confusing because there's a there are I guess also a lot of different ways to write a react app the way that we are writing our react app is basically a replacement for vanilla JavaScript HTML and CSS right so think websites that are running directly uh in a web browser that's how we're using react it's also possible to do things like server-side rendering um or static site generation with with react using other Frameworks and in that case node.js is actually running our react code but here node is not running our react code uh the the build process is taking a look at this file and generating JavaScript code but it doesn't actually need to access the document it just needs to generate the corresponding JavaScript if that makes sense hello again thanks again for watching this preview again check out reactroots.com to learn more I'll see you in the next one [Music]

Channel: Coding Garden

Views: 11,568

Keywords: javascript, coding, programming, node.js, tutorial, learning, debugging, web development, web, full stack, backend, frontend, live stream, live coding, react project, react course, react, typescript, react with typescript, learn react, learn typescript, context api, learn context api, live course, react roots, typescript vs javascript, what is typescript, what is compiler, what is transpiler, compiler vs transpiler, subset vs superset

Id: VfhRDGhAFi0

Length: 25min 8sec (1508 seconds)

Published: Thu May 04 2023