Deployment

So the last thing left to do is to deploy the application. But just before we do that, I wanna show you one quick thing that I will add. So we won't write this together. This is another seed script that I will do. So I will call this production, like this, prod.

And I'm going to copy this directly from my snippets here that I have, and I'm just going to change these to go to, where is this? Just a second, let me see how I do it in here. All right, let me copy that. There we go. I'm gonna go ahead and give this ATS ignore, like that.

All right, so in here, I don't need Get is correct option, I'm not using that. So basically this prod is going to be a huge script that I do and it's going to fill the Spanish course pretty much ready for production. Basically it's gonna create two units and it's going to fill all of these lessons with a bunch of different challenges. You see we will have even more characters like zombie, the girl, the boy. So we're gonna go ahead and do all that.

So let's go ahead and just populate our public folder with everything we need as well. So go inside of my public folder here and let's go find and let's find boy.svg. So all of these are Kenny assets. So I'm gonna download boy.svg here. Let's wait a second for this to be downloaded and I will drop it in my public folder.

Then I'm gonna go ahead and find boy.mp3 in Spanish. And I'm going to download that as well. So let me drag and drop that in the public folder as well. And I have to do that for girl. So let me download girl.

So all of these are from 11 labs AI. You saw the process of how I do that. You have 10, 000 free quotes so you can go ahead and generate as many of these as you want. And I also need girl.svg right here. Let me add that to my public folder and one more character which is the zombie.

So let me add the zombie character here and let's go ahead and find the zombie.svg. There we go. So those are the three characters that I have added here which are being used in this seed script here. So now what I'm going to do is I'm going to go ahead in my package.json. I'm going to copy my seed script and I'm gonna call this dbProd like that and I'm gonna use the prod script.

So let me go ahead and run that now. So I will shut this down and I will run npm run dbProd. And let's see what mistakes did I create here? No database connection. Oh yes, my apologies.

I mean, you're not going to get this error. So inside of prod here, I just have to import .environment config. So it loads the environment variable. So this is quite a long database script. Npm run database prod.

But I just want to check with you. So this is how you run it. You do npm run prod and it's basically going to fill a bunch of this lessons two units but it's only going to be for one course right it's going to be for Spanish because I have the assets for that there we go so seeding database database seeded successfully And now let's go ahead and let's see how this works. So I will refresh this entire thing. There we go.

So we only have Spanish, but we are filled with courses. As you can see here, I can click start here. There we go. So we start with our familiar ones, but there we go. We have El Chico here, for example.

We have, let's see what you didn't see yet. The boy right here, right? And then we have questions like this to switch it up. So this is a script which you can, for example, show in production to test the app out. There we go.

So I showed you which pictures you needed to add and which sounds you needed to add for this to play correctly. Perfect. And all the questions will then repeat for the next one. So if you go into the next one, you're gonna see the same questions, right? So that's the only thing, but for a demo, it's enough.

And if you want to, you can go to localhost 3000 slash admin here, and then in here, there we go, you have Spanish and you can see all the units which you have. There we go. So you have two units here, then you have all the lessons and you can see how they repeat themselves because at some point they stop and then they become the lessons for unit two, Right? And same thing is for challenges, right? But this is basically to show you how this would technically look like in production.

And then you can play around and find a way to improve this. Maybe you would find a way to do vagination here, or maybe, you know, instead of showing nouns here, somehow indicate this reference to show nouns and also for that to be lesson with the unit one or something, you know, something to make this clearer to navigate because it can be quite complicated. You can see, especially when we have a lot of similar questions. Great, but that is a script I wanted to show you. Now it's time for us to do the deployment.

So the first thing we're going to do is the following. Let me go ahead and shut down the app and let's run npm run build. So npm run build is simply going to tell us whether we have any TypeScript errors inside of our app. If we do, we will not be able to deploy. This is fine as long as the final output has been received.

There we go, compiled successfully. Now it's linting and checking the validity. And this looks like it's completely fine. There we go. So if you get this result back, that means that you have no type errors inside of your app, which means we are ready to deploy this.

So the first step to doing this is to create a GitHub repository. So let's go ahead and prepare our new repository here on GitHub. I'm going to call this next14-duolingo-clone and I'm going to make this private and I will simply create the repository. So Now we have to go inside of our terminal here and run git add, git commit, and I will write 28 deployment here. For you, this can just be initial commit.

There we go. And then once you've added everything and run a git commit, you're going to run this second option to push an existing repository from the command line. So let me push that. And then once that is done, you can refresh here and bam, you have the entire project right here. After that is done, go into Vercel here and you should be seeing your new GitHub right here so go ahead and add that.

Now you have to fill the environment variables so go inside of your .environment file and you can just copy everything and then go ahead and open the environment variables and select the field and simply click paste. So all of these are fine, but we are going to have to modify the stripe webhook secret and the next public app URL. But we can only do that after we deploy because we don't have the website URL yet. So I'm gonna go ahead and pause and let the video play again once this is deployed. There we go.

So we deployed our project. So I'm gonna go ahead and click continue to dashboard here So I can get my full domain name. So there we go. I have my app deployed. So copy the URL, make sure you don't click on this deployment URL.

So not this one, because this one changes with every deployment. You have a static URL. It's this one. Next14duolingoclone.vrcel.app. So it's the shorter one.

That's the one we need. So let's go ahead and do the following. Let's go inside of Stripe. And do you remember webhooks? Well, we only have a local listener.

We never created an actual webhook for a hosted endpoint because we never hosted our app but now we do. So let's click add endpoint under the hosted endpoints here. So you can access this by going into the developers tab and clicking in the webhooks here. So this is our local listener. Now we have to do the same thing but for a hosted.

So change the endpoint URL to use your new app slash API slash webhooks slash stripe. Make sure you don't misspell this and click on select events here. The ones we need are checkout, session completed. Remember we have two events in our app and the second one we need is invoice. Where is it?

Payment succeeded. If you are not sure you can go inside of the webhook and find the two events. There we go, checkout session completed and the other one, invoice payment succeeded. So those are the two we need. Go ahead and click on add events.

There we go, confirm them here once more and simply click add endpoint. And then click reveal signing secret and copy that. Then go back to Vercel, go into settings in your project, click on environment variables right here, find the Stripe webhook secret, click on edit and replace the contents inside and click save. And then you also have to change the next public app URL. So find that, click on edit.

It's no longer localhost, it is now HTTPS and your Vercel deployment but remove the backward slash, sorry the forward slash, remove the last one. So just make it like this and click save. After you have done that go back inside of your deployments tab, find the one that is ready and working, click on the three dots and click on redeploy and simply press redeploy without any additional changes here And then you can go ahead and open the building to watch that. So I'm going to pause the video again and show you when it's complete. There we go.

So the second deployment was successful and now we can finally visit our app and let's go ahead and try it out. So I'm going to go ahead and click I already have an account and I'm going to log in. And there we go, I am back inside. So what I'm interested in now is does my upgrade Stripe work? So now this is where I should see my events.

So make sure that, let me just ensure where I am. Oh, here on Stripe. So I'm using the test card again because I'm still in test mode regardless if this is deployed or not. Let's click pay and subscribe. And let's refresh here to see if there are any events happening.

There we go invoice payment succeeded right here we have our event. Great! So where was I right here? Perfect! You can now see that I have a lifetime deal.