Deploy your react+vite app in 3 EASY STEPS

hello everybody my name is Miss and in this video I'm going to show you how to deploy a vitamin react hat in just three simple Steps step one we're gonna build the app step two we're going to create a netlify a site and step three we're going to deploy it very very easy I'm going to take you through it here's how we do it I've got this project up here this little business card that I've been working on so I want to deploy this app it's a react invite app so I'm in my code editor and the first thing I need to do is step one I need to build the project I've got to make it production ready so here's what we're going to do we're going to go to the terminal we're going to click new terminal and then very simply we're going to go npm run build boom it's going to build that and you'll notice we've now got a new disk folder let's have a look at this this fods real quick let's see what we've got in it we've got our index.html file fantastic and we've got our assets this looks very very confusing don't worry about it here's what happens when you hit the build command it takes all of our react files bundles them all together into a single index.js file here same with our CSS I've only got one CSS file here but if I had multiple it will bundle them all together into a single index.css file and then it automatically finds any images so I have an images folder with my little profile picture that will go automatically into there as well so we know everything is in there beautiful so that's step one done easy as that step two we're going to go on to netify you need to go onto your netify account main page right here and all we need to do is click on this little button here called add new site so we're going to click this and we're going to go for manual deploy and we're going to click on that it's asking us to drag and drop your site output folder here which for us is this dist folder right here this is our disk folder okay this is what we need to drag and drop into it the easy way of finding this in our folder structure if we just right click reveal in file explorer if you're on Mac or Linux there might be a slightly different button but you should be able to recognize it revealing file and explore we're going to click on this and it brings up the folder where we've got our disk folder and we can literally just drag and drop that folder into netlify very very easy it's going to take a few minutes depending on the size of the project it'll take a few minutes to get it but then once it's done here we go we've got our deployment it's given us a domain so we're just going to click on this domain name and there's my project it is working exactly the same as my local project does exactly the same and that's it that's how we deploy a fighting react app hope this has been useful if you have any questions hit me up on the Discord my name has been missed have a fantastic day goodbye

Channel: Programming with Mist

Views: 42,929

Keywords:

Id: 7T4w0QJtL-o

Length: 3min 11sec (191 seconds)

Published: Sun Dec 11 2022