Deploying ReactJS Project on Vercel for Production: A Step-by-Step Guide

hello everyone in our today's build we're gonna discuss about how we can deploy our website in production build now I have one project running over here is already shopping store now I make it a little bit lightweight because you see everything is possibly running over here I can add the project like I can go to the shopping now I can go to add to cart and also then I can view my card and by the way also I can go to my sign up and also I can go for my sign in so I'm just trying to make it lightweight so that you can feel the differences the way it's supposed to be now to deploy that project it is a react project so what we are doing before deploying it because normally we are deploying it in the netlify aversal OR rail wherever the platform is available for it now to the deploy any react project first of all let's close that our host now we need to initialize the git inside our directory like git in it now we have the git in it now after having it I will just do git at dot pre like the preview so it will add everything is available in my directory and then I will make git commit like initial commit so it's like the first comment now after committing it I need to connect it with any of my GitHub repo so let's go to in the GitHub and the repository I will add my a new Repository I just add new what I'm gonna make audible test okay now I'm creating my repository so now I need to connect my repository to my application just copy that one just dump it over here so it will get connect my repo remotely now what I need to do you you just can follow through that command like I'm gonna do git push origin master it's not about how you can push the things to the gate it's about a production deployment that I'm gonna show you later on now if we refresh that one see we are getting everything inside our directory now if we go to the virtual like virtual dashboard we just need to make one ad project so we can add the new project and from here we can take that we can import that overall directory like we can import now we will deptoy so that deployment is not the production deployment that deployment is the like the development deployment is happening like you created a project you want to give your employer or someone to see so whenever they go to the in the like the project whenever they're spinning that project it may be a little bit slower and they will have a bad effect about the react maybe it's it's slow but it's not slow now what is happening whenever we are deploying like that way what is happening if you just go through your package.json like you see I use the react icons now maybe I used only 10 or 20 icons in my entire project but whenever I am doing in that way directly just connecting my project from GitHub repo is taking that entire bunch of items like if I go to my project this is my project if I just try to see as you see it's 807 megabyte and in the Dix 857 megabytes so it's a huge file so it will takes time to load right so I need to reduce the time period so that my website will be much more faster and to do that what I need to do I need to initialize our build you can go to the documentation and you can just read more about npm build so or better npm run build so I am running a production builds script so it will now here you can see I have one folder which will contain my every single items related to spinning that application okay so let's let it at the build create the build production now you see creating an optimized production build is not anymore a developing mode it's now going to be ready to production okay so now it's building that one so what we need to do after having that production build we need to connect that build folder inside our project over here whenever we are importing inversal so as you see it will just take a bit of time for the first build or anything because it will compress everything now in from the icons how many icons I took it will only take those components like if you see here it's a very big node modules now if you go to in our build is all coming static folder you see the same as CSS components or JavaScript components is available here now if I just go through over here inside my project in the build just see how many megabyte that one just imagine just can you believe it is only 17.5 what happened beforehand it's 857 megabyte so now that is much more small it's totally small so now what we need to do so let's go again let's see git status now it's showing there is sorry I made a mistake did a status now we make the build folder so we need to push that one also just put go through the same procedure hit add and then get commit and it will be build edit now again origin master so now it will give us our a build folder to our master so that we can access that one now if we go to our repository just try to spin it as you see we are having our build product now maybe in your application because I dare to I run already that one beforehand that's why it's directly take it now what it will do whenever you around the git push origin Master after putting the build it will not take you need to put your like that one will be uncommenting beforehand so you need to put that in common so that it will push the build folder also there so now what I'm gonna do I will just head back to reversal again I'm gonna take a new project now the same way import that project but what I'm gonna do remember I have like okay now I can edit the directory now I have public I have Source now inside that build folder I have everything I need so I will just click connect it to the build folder let's deploy it so if you know it's not any like deployment mode it's a sorry not in a development mode it's now running as a full functional production mode okay now we see how fast to build it because it's not going to create that npm install the third modules it will be so much faster to create now if if you see if you run there to one and it will be loading also it will be very very much faster now you see that is our product now we want to change something in our product in our application right so if we go over here what I'm gonna do I'm gonna go in our public folder now here I want to change our icon what I'm talking about is that one I'm I will just change that icon and the title so then after that I will push that one in our repository so first of all to do that I already have on a photo here I think no not that one a small logo Ico so that one we need to connect so what I'm gonna do um Also let's run our Local Host just to see the changes if it's right or not so in here small logo dot Ico and the same one I'm gonna also give I believe there will be one Apple touch here that one for that and for the title um yeah or a bin or a B shopping okay just to put the demo now as you see our death test text is changed now what you need to do we need to pass that one in our repository now in a normal way what we did we will just close that then we will just create npm add npm blah blah blah we'll do that but now whenever you are running the build command before you are pushing anything in Gate you need to run that build again like npm run build otherwise it will not because now again it will go through every single component and it will find out the changes and then it will update the changes that's why what you will only make the production build once you know that it gonna be all right okay you are going to finish that project that's why in the development mode we are not making it in a production build so it will be very tricky now you see it gonna go through again and fetch every single thing and deploy it again now we need to just simply git add and then commit complete now and if we are right okay now see it's I think yeah it's already start building and I believe it will be much faster actually it's it's much faster than a normally how because I tried in my several project and it's very very fast to just to go through it see it's just like that it's very fast now as you may see what's the difference between doing that one and doing the other one now I have that one like uh orb shop I already uploaded beforehand and that one I uploaded like if we go to our I think it's also I deploy inversal so now if I go here in RB shopping that one including the node modules okay all the node modules will be appearing here that's the way I deploy it but that one with the production build right so this is our like the normally we are deploying without the production build now let's go to our application on network okay so in here we will try to find out the differences Also let's go back here in the network let's see the differences how it could be now the differences will be here okay how many how much times is taking to mount or unmount so in that way we're gonna find the differences okay first of all I think it will be performance in the network so first of all let's spin that one it's reloading just look in the finish so what I'm gonna do I will go through all over the components and I will go to other components I would go from top to bottom and see how it's taking to reload I go to about page contact page Journal also I'm gonna go to My Signing uh I think the sign up oh no that one sign up was not added so now I will again head back to my home so after doing all or the thing like all other things it took around 9.14 second to finish 9.1 for second okay and also it low 2.3 megabyte resources now the same thing we're gonna do it here let's spin that one now let's go to from top to bottom let's see how is that and also in the shop we're gonna go and in the about also in the contact in the journal and we're gonna head back to our home now if you see the same amount of resources it took only 7.24 million two four seconds so here I believe it's the first one here is 9.14 here is 7.24 but this application is just a light application so it's like around 2 seconds is difference what if if that kind of if I like put the authentication and also the uh I'm just making the shipping online or something everything after I put that simple application can be 100 times more weights and see if it's 100 times more weight 100 into 2 milliseconds you're getting nearly two minutes with that right so that that's an in-depth way you can calculate and also whenever you will go through each and every single individual things you can see the timestamp how is mounting how it's going to be relocated with the timing so whenever you are completed as such a good project you want to showcase to someone or you want to make it in a good Production Way always use that npm run build before uploading that one so in that away that your build will be much more faster like anybody like I have that one I just click over here here oops it's uh not that one like I have that website I just copy it let's go over here let's paste it it should be much faster like a blink but this kind of website which is like a kind of with the node modules it gonna be a little bit time mistaking it's getting little delay it's very lightweight that's why you will not feel that much but it's having that difference so always whenever you are doing any production build try to run npm npm run build than to use it so I think it can help you in your future build so hope you're gonna use it see you in next video

Channel: Noor Mohammad

Views: 5,239

Keywords: ReactJS, Vercel, Production Deployment, Web Development, ReactJS Project Deployment, Tutorial, Step-by-Step Guide, Front-End Development, Easy Deployment, Fast Deployment, Hosting for ReactJS, ReactJS in Production, Deploy ReactJS on Vercel, Deployment for Beginners, Deployment for Developers, git, github, REACTJS, Vercel Deployment, Vercel Production Deployment, Deploying Project from Github

Id: GqAVT84-XwY

Length: 15min 5sec (905 seconds)

Published: Tue Jan 31 2023