STOP Wasting Time! Your Next App Needs Vite! | JS, Typescript, React

if your next project is built with JavaScript typescript react or react and typescript together V will help you start your project faster than ever before today we'll look at how fast and how easy it is to use Veet [Music] hello and welcome I'm Dave today we're learning how Veet can help our front-end development process and I'll provide links to all resources in the description below I'll also provide a link for you to join my Discord server where you can discuss web development with other students and you can ask questions that I can answer and receive help from other viewers too I look forward to seeing you there today we're talking about Veet it looks like you would pronounce the word Vite but it is pronounced Veet as in v-e-e-t today I'll show you how V can help you get any JavaScript typescript or react project started faster than ever and Veet also easily works with several other libraries and Frameworks first you're going to need node.js so let's go to nodejs.org and if you don't have node installed you want to install the version that is recommended for most users as of the making of this video it's 18.12.1 the LTS stands for long-term support and even if you do have node and you just want to upgrade it maybe you want to download and install that so after the download go ahead and install node.js and then open up vs code to an empty folder I have an empty folder open in vs code and I'm going to press Ctrl and the back tick to open a terminal window and inside this terminal window I'm going to type node and then Dash V just to check which version of node I have installed and you can see I have the latest 18.12.1 now that we've confirmed that we have node let's go ahead and use npm that comes with node to create and then Veet at latest is what you want to type in and press enter after we do that I'm going to go ahead and click this Arrow to take our terminal window to full screen here in vs code you can see it's asking for a project name I'm going to create a veet-typescript project so that's exactly what I'll call this v-ts- project and this will create a new folder with this project name I'll press enter and you can see it gives me choices for a framework including the Top Choice here would just be vanilla JavaScript now that's what my typescript will compile into so I'm going to choose that but if I wanted react you can see it's in the list as well as preact lit spelled and others so I'll just press enter here on vanilla and then it gives me the choice JavaScript or typescript I'm going to choose typescript and press enter and now you can see it is completed creating that folder with veet-ts Dash project and we're in the parent folder that I called Veet here so inside of this it is telling me what to do it says CD and then choose that folder name so veet-ts Dash project and now I'm inside of that as you can see here for the terminal and now I need to type npm and you can either type install or just the letter i which also means install so I'll just type I will let that install and after it completes which it's very fast and then we'll say npn run Dev and this is going to start up our development server ready to go it says it's at localhost 5173 when I Mouse over this it says I can control plus click to go ahead and open it in a new tab and now that's what I've done and here is our minimal Veet app already using typescript and it's got a counter in it which works as well so now let's explore the folder and see what we created and that was very fast as far as creating all of that as well we can close this by the way and the server will continue to run so let's open this folder and see what we've got we've already got our TS config for typescript if we're going to use typescript and of course we could change our configuration if we wanted to but the defaults are pretty good for your normal typescript usage and if you've been completing my typescript series you can see it already added the enclosed Source directory that we'd been adding to our typescript config file and you could change those again if you want to our package Json already says we've got Dev dependencies here of typescript and Veet and you can see what we could choose to do to run our server as we did before with npm run Dev that's why it's running right now there's also a build command for when we would deploy say we sent this to GitHub and then we would deploy it to versel or another host and then we could just say where our file is and it would build right there in our deployment that's all great so everything looks good there let's look at the minimal stuff here and we're just pulling in our main.ts in the script that it lists here and that's because we're in Dev mode now so it hasn't really built that yet and then inside the source directory we've got our main TS file we've got the counter TS and just the base stuff for that basic page but that got going very fast and one thing I want to highlight here is we've also got a veet-env dot d dot TS now this is where we would set the types for environment variables and Veet has some great documentation on the V site that I'll link to in the description that would show that so we've created one project already we'd be up and running and ready to write our typescript code for this project but I want to create one more here before we finish so I'm going to bring this back over and I'm going to go ahead and open the terminal and press Ctrl C so we can stop our Dev server and from here I'm going to CD and type two dots which is going to take us back up to that Parent Directory and that's what we see in our file tree over here is the Parent Directory and then this project let's create another project so I'm going to once again type npm create beat at latest press enter and it should give us those choices again I'll let this go back to full screen what am I going to name this well I'll just say beat Dash react Dash TS Dash project so I'm going to use react and typescript we'll go down and choose react by pressing enter choose typescript once again and now it gives us similar directions notice it's already created that project folder for us as well so I will so CD and then veet-react Dash TS Dash project then npmi and then we should be able to type npm run Dev and this will go much faster than create react app if that's how you've been creating your react projects okay npm run Dev this will get up and running and I should be able to control click and launch this and now we've got a Veet and react project once again a counter that's working and we can explore those files if we want to so I will drag this over let's look inside of this project and we can see something more like we're used to for react now so we'll open this up and we'll see a main.tsx file I can close that terminal window again and then we have our app.tsx file here as well and there's an assets directory as well it has the react SVG in it right now so just a little bit more exploring notice it's also got this Veet env.d.ts once again we're using typescript now with react that we would see here still got that config file for typescript here as well it's got our package Json and there's also the Veet config that I didn't talk about before but if we were going to use plugins this is where we would put that in and you can see this is using a plug-in for react so that was a very fast way to start a react project and it's configured typescript for us already we're going to have that type intellisense in here too so let's go to the app.tsx and we can see what we have here for our basic code and if I Mouse over count it tells me count is a number so we're getting that same assistance that we're used to even if we're not in react when we're working with typescript so it's great it's ready to go with the intellisense already built in okay quickly I just want to highlight a couple of things in the docs there is great documentation here for Veet let's go to the guide and then in the guide you would want to choose deploying a static site and they already have this mapped out for several hosts including versel just GitHub Pages even render.com netlify I believe Firebase is in here so I wanted to highlight that if you're ready to deploy your project they make it fairly easy step by step as well and then as I talked about EnV variables and modes they describe all of that here and it's a little bit different than you may be used to with other projects where you had process.env here you would have import.meta dot EnV dot mode and where I talked about type below well I said dot mode that would be a built-in variable but you would put your variable here if you created one and it shows you how to do that as well here in the docs also though if you create an EnV file if you end it in dot local it will be ignored by git because you already have a git ignore file that is created for you in those projects as well so just a couple of things to highlight I am not an early adopter of new things I like to wait until they are fleshed out a little bit and are working well within the community I believe Veet is I I know it's been around for a while and I just had not experimented with it that much but now that I've used it I don't think I'm going back I think it will be my new choice to launch projects and it just does such a great job and configures them pretty much like I would want to use them right from the start remember to keep striving for Progress over Perfection and a little progress every day will go a very long way please give this video a like if it's helped you and thank you for watching and subscribing you're helping my channel grow have a great day and let's write more code together very soon

Channel: Dave Gray

Views: 65,092

Keywords: Your Next App Needs Vite!, vite, vitejs, app, vite app, vite js, vite react, vite typescript, vite ts, vite vs create-react-app, create-react-app, vite project, vite setup, vite set up, react vite, typescript vite, js vite, javascript vite, vite javascript, vite web dev, vite webdev, webdev, web dev, create react app, react app, typescript app, javascript project, typescript project, react project, react setup, typescript setup, project setup, vanilla js, vite tutorial

Id: SsITROMWhnM

Length: 10min 35sec (635 seconds)

Published: Sun Nov 20 2022