Nextjs Deployment

hey there everyone hitesh here back again with another video and welcome to this another video on xjs I thought we have done so much why not to show you the deployment part and some assignment part as well so I've added some of the assignments for you we'll first talk about that and then we are going to talk about how we can take this and Deploy on the varsal Warsaw is one of the great platform where you can host your Nexus application our database is already online in manga DB so we'll utilize that let's go ahead and try this out let me share my screen uh with you so this is what I've added in the next JS readme file you might have already seen that in the repo it's nothing it says a detailed course on xjs we can just actually move this here a little and I have added what are the tech Stacks that we have uses mail trap Nexus typescript Basics nothing much big deal and here is my YouTube channel link as well so I've added a YouTube I'm pretty sure you're watching this on YouTube if you're watching it somewhere else hey I have a YouTube channel apart from this there is assignment the first assign has improved the UI of the application right now we were focused too much on implementing the functionality part and the bare minimum basics of UI so that you can understand the flow of the application now definitely integrating too much of the Tailwind we could have done that we could have just copied and pasted that that I'll surely do that in the upcoming videos but it doesn't really add any much value if you request me enough in the comment section I would definitely add some of the videos which are focused purely and purely on Tailwind skills so I can do that if you wish want to have it let me know in the comment section but anyways in this one I have skipped that so that's your assignment to add more beautiful UI maybe make button more beautiful maybe use a theme for it or maybe have better inputs so something like that you can have it and also add a feature of forgot password we have done exactly same thing in the verify email and again just watching the videos no benefit for you and in case somebody's saying hey why didn't you do it you should have done that this is an incomplete tutorial I would say probably you will never learn programming if you'll just watch the videos and expect me to do 100 of it you won't be learning programming so I'm not bothered about you those who are bothered about learning the programming now is the time that you achieve it now if anybody is actually completing the entire thing just let me know your GitHub repository or you can send me a kind of a request here pull request but make sure your pull request is not merging your code in my code I don't want that I want user to see only the code which I have written I don't want other people otherwise people will be confused that hey from where this code came in so only after the hint just try to add or I can just add it just in front of you that we can go ahead instead of the hints up here so we'll just add your completed repositories so we'll just go ahead and say something like this uh your completed assignments assignments and you can just add your links up here so we can add here something like this uh add your repo so if you have completed everything so you can add up your repo link here I'll just push it again so you can just go ahead and add a repo link here that hey here is my completed version of it or probably a deployed version of it so go ahead and add it that kind of a pull request only I'll be accepting if your pull request is going to make any kind of a mess then I'll not accept it if there is a conflict I'll not accept it make sure you actually update the conflict take the proper poll and everything so go ahead and do that that's your contribution in here all right so that's the basic of how you can do that I have even written your forgot password hints as well that what user needs to do it's a five-step process I have given it here so that it will help you to learn all of that all right now this whole thing is being pushed so let's go ahead and actually push this final readme as well I'll just add this changes add your contribution here gear here and I'll just Commit This and we're going to push this so that this also this is also available there so all right so now everything is being pushed onto the GitHub it's time that we actually go ahead and take it on to the next JS uh versal actually deployment part but before that we need to actually create another user I have actually removed all the previous users so I'll just create another one just for the testing this user will be I'll just call this one hitesh hitesh123 really bad uh show the password h123 add a built-in role of write and write any database not a good idea but we'll still do it I'm just uh making this up all here so that you understand that what are the security issues and concern which you should be having so we'll just go into database and we will be connecting with the strings so I'll just copy this so that I can actually inject this in here so I'll just copy this go back up here and let's go ahead and deploy this so virtual and we need to bring up on our all of our environment variables here so I'll just click on project and this one is react not react it's actually in xjs next JS full stack auth yeah we want to import this this whole thing is good here is our environment variable this is where we actually inject all of this so let's go ahead and open up our environment variables since I have deleted everything so I'll just go ahead and open up the sample.env hey I can just close all of this we don't need this sample.env I'll just paste this into sample link so the username that we are using is hitesh and the password is hitesh123 and what you need to do further is add up your database name so we'll just call this as next YouTube auth yeah that's good so the first variable that we have is URI copy that enter into your domain variable just like this you had your environment variables and you don't have to do even a single thing paste copy its value paste the value here add this up we have one more how can I get here here it has one more we'll have the token secret make sure your token secret is oops make sure your token secret is way better than mine I'll just add some complex token yeah that's good enough I'll add this and we can also go ahead and add a domain uh domain yeah that's that's a crucial one because right now the domain is we have no idea what domain we have so we need to come back here and add this after the deployment because we'll get a URL if we would be having our own domain then there would be no problem I can just go ahead and do this but we need to add the environment variable little bit later this domain part I will just click on deploy and that is it that is it all it takes to deploy your application it will start building and if we don't have any bugs or issues we will be able to deploy it if we have some issues or something like that obviously we have to debug that part but again there is nothing much it will just give me a URL and all I'm looking for is a word cell app URL so that I can add it into my domain as we can see this is the domain that we have we don't have to have ports and stuff like that so this is taking us some time in building the build phase actually takes some time yeah okay maybe we should pause the video here there is no point of unnecessarily staring the screen here okay so let me pause the video all right so you just missed the confetti there is a confetti that actually comes up here so right now notice here it says add your domain I don't have my domain that's why I missed out that environment variable so again so let's continue the dashboard of it where this is so I can see my application is up and running and this is the deployment URL so that is what I'm looking up for so I need to actually copy all of this uh next year's full stack auth then some random variable Dash My username.versal.app I think that is a better way of actually uh domains let's just click on it and we can edit this to have a better URL so let's just have this next year's full stack auth versal app yeah we'll just copy all of this and now we need to actually add this into environment variables so there is environment variable without this the thing is not going to work so we have our token secret we need to actually provide domain and then the value of it so whatever the domain wherever you are deploying it needs that this is what we are using in our mailing services so make sure you actually get that and also there is a issue here that in the if you go into the source and inside the helpers and in the mailer I have actually deployed my own user ID and password here but I have actually deleted that account so it doesn't really work anymore but still make sure you actually use this to do add these into the credential and EnV that's a security concern here but anyways so I'll just go ahead and say that hey this is add another one no Adam save this one so please define the name for an environment variable ah accidentally added that one so we have all these domains and tokens and everything now our app should be there so now in theory at least we should be having this being deployed and it takes some time so there we go we can sign up and we can log in that's good and we'll just grab hitesh and we'll be saying hitesh at the rate google.com which is not true and we'll be saying one two three four five six very secure password uh we'll do the sign up obviously our mail will fail because that doesn't exist so that part of the code is not going to work it's saying processing taking some time and we got the sign up because our mailing is actually failing otherwise we would have got redirected there but in theory at least we should be getting some of the users in the documentation here or the document so there we go so there we go obviously we didn't got properly redirected everything but we are getting this the reason for that is because in this portion we are having a bug which is intentional I didn't want to expose my credentials otherwise we would have seen that everything is going nice and easy so now one more assignment for you is extract these user ID and password put that into environment variable so that we can actually inject them there that would be really really nice but now you know that how you can actually have your application and stuff like that we can log in and we can go ahead and say hitesh at the rate google.com and we should be able to get this so one two three four five six we should be able to log in processing login and the login now we are getting this so get user details I'm able to get my user details hopefully there we go and I can visit the profile as well this is working fine I can go back and hit the log out button let me see that if we are getting this token as well inside this and application and cookie and there we go we got the token this is how the real world application works and we can hit the log out and this should be taking us back only thing that's not working is our mail and we know why it is not working in the code part as I always say it's important to know how your code is working but it's also important to know that why your code is not working which is the part of the flow that might be broken this actually helps you to understand and debugging debug a lot faster because you understand your code in and out and that's what I always Focus that please go ahead and understand the part that it's not always about working code it's also about the ability to understand that which portion of my code is causing the bugger issue as the application will grow larger which shortly we'll see later on you'll understand that hey there's so much more to learn and so much more to understand but this was a fun deployment part told you deployment is super easy it's actually fun so in this video you have learned how you can deploy use your net environment variables some of the issues that we have that you can fix up there and can actually make a pull request that hey my repository is now all good and perfect at the age can you add this into the readme again I repeat this all those people who will be sending an unmindfully these pull requests which actually merge your code I will not accept that I'll write a comment below that that hey you didn't understood the video but those will be just sending me the pull request where there is a link of your repo in the readme file only I'll happily accept that and maybe thousands and thousands of people will be able to check out your repository that what's your version and your implementation of the assignments that we have done so be cautious don't just mindlessly send the pull request be cautious about that and in case I miss you uh miss your pull request or something let me know in the LinkedIn or Instagram or Twitter wherever you like that's it for this one let's call this one as end for the series officially I'll definitely make more videos so do check out and subscribe to the channel I'll catch you up in another such video

Channel: Hitesh Choudhary

Views: 12,570

Keywords: Programming, javascript, reactjs, nextjs, mongodb

Id: qJkey7UPyiw

Length: 13min 24sec (804 seconds)

Published: Sat Jul 01 2023