 Hey, welcome everybody! In today's tutorial, I'll guide you through the seamless process of deploying your next.js application on DigitalOcean using the App Platform. I only discovered the App Platform in my last video while I was building the virtual private server for the next.js continuous deployment video. If you call that video, you're well aware that the traditional deployment process isn't a walk in the park, or this should make it much easier. Hey, welcome everybody and let's get started. So this is the website that I'm going to be publishing today. And the only reason I made a super quick miniature next.js demo website, just so we have something to see and test instead of creating the default react application like I done in my previous tutorial. Now this project includes basic stuff like connecting to a MongoDB database. I've got an API route, which I can show you later. I'm using suspense, image, link, caching, fetching, and validating. I've got server-side rendering. I've got some client-side rendering. I've got a dynamic-side map. I've got some reusable components. And that's more or less it. So once we publish the project, we'll test to see whether everything is working. And that's it. I've already created a GitHub repository with this project. And the only thing that I need to mention for this tutorial is that you need to change something in your package.json file. So if I click on the package.json file and here at the bottom, in fact, I'm going to open it in Visual Studio Code so you can see. But here at the bottom of the package.json file, I've added this engines object. And inside this engines object, you can choose your Node.js version and the NPM version. Now, what I've done here is I've literally matched my Node.js version from my personal computer and the same for the NPM. These changes are committed to the GitHub repo and now we can deploy our project. Okay. So if you wish to follow along, I'll put my link in the description below. And the product that we're going to be using, it's under product, compute and an app platform. So if you click on it, you'll see that this is a fully managed infrastructure. Basically, you don't have to set up servers and do anything like that. It's all going to be set up for you. And the thing that I like about it is that they have a set pricing and you can always upgrade and click get started. And I've already signed in. So I'm just going to close this tab and show you where we are. So here on the dashboard, if you go on the manage and then apps, this is where we're going to be deploying our new application. Now, if you scroll down a little bit from here, you can read a little bit more about their plans. As you can see, they have a starter plan. They have a basic plan, which is around $5 per month. They have a pro plan, which is what I'm going to be using today. And they have serverless functions, which I haven't tested yet. And from here, you can also create databases, which is pretty cool. So let's grow up and let's create our application, create app from here. I'm going to be using GitHub. Let's select the repository. Here it is. Next is our platform. This is going to load my main branch. I've only got one branch and the source directory can stay the same. Auto deployment is what I want. So every time I push changes to my main branch, it's going to auto deploy, which is pretty cool. Of course, you can change your branch if you wish to. And then let's click next. From here, you can edit your plan. So if I click on edit plan, you have your basic plan, which starts from five a month. And then you have a $10 plan, which is the basic plan. And then the pricing becomes quite steep here, as you can see. And if you go to the pro plan, which they say is best for prediction, if we click on the instant size here, you will see that the pro plan starts at $12. And then the price becomes fairly steep. As you can see, I think I'm comparing it to a virtual private server because for a virtual private server, you can potentially get this sort of size for around $6, maybe a little bit more, but you can get this, but obviously you have to set up everything yourself, security, and it takes a lot of time and effort. So I'm going to go through the 12 a month. I'm going to choose one container, which is going to make it $12 for me. And that's it. So if we go back and then from here, you can add more resources. For example, you can create a database. If I click on database and add, for example, but it looks like the only option is Postgres SQL. And this is 512 megabytes RAM shared CPU, one gigabyte disk. And this costs seven a month. I'm not sure whether this is a good price for it, but yeah, just so you know. And then I'm going to go back and then just click next because I don't really want the database. So from here, you can set up your environment variables. You can either have them globally, or you can set them to a specific application. For example, my next platform test application. So I'm going to set mine here. I'm going to click edit. And then from here, you can add your keys and values. So let me add my database key super quickly. Here it is. So I'm going to grab MongoDB ERI based in here. Let's copy the value as well. Copy paste. You can encrypt it from here. And I'm going to add one more. And I think this is just an example one next website URL. Yep. Let's paste it. And then let's copy this as well. And let's paste it. Save the changes and or environment variables are now added. And let's click next from here. You can edit your application info, such as the name and your project. I've only have a default project here called first project, but you can change all that. And then you can set your region. For example, let's have a look at the regions. You have New York, San Francisco, Toronto, Amsterdam, Frankfurt, London, Singapore, Bangalore and Sydney. So for me, this is going to be London. And as you can see, any static components are served on our global CDM, which is pretty cool. Let's save this and let's click next. Okay. From here, you can review pretty much everything that you've done. And if you spot anything, you can always change, of course. And then you can just click create resources. Okay. All app is now being created. And I believe that this is going to take some time to do. And while this is happening, let me show you around. So from here, from actions, you can deploy application, you can force redeploy, you can manage your EMV variables, you can manage your domain names, you can manage alert and policies, and you can manage your app specs. If we click on insights, you will see that from here, you can see your CPU, memory, restart count, CDN, ingress bandwidth and all the CDN data, which is pretty cool. Activity is going to be your deployments here. As you can see, it's currently deploying. And if I click on deployment, it's probably going to tell me where it's at the moment. So it's installing the node modules and its status is building. What else can I show you? You have runtime logs, you have a console. And then the last thing you have here is the settings. And from here, you can literally upgrade your plan or downgrade your plan with a single click. It's really easy to do. The domain names we can set up once the application is built and some other settings that you can explore on your own. That's pretty much it. So I'm going to go back to the overview here and wait for this to build and deploy. And then we'll set up the domain name. Okay, you know, app is deployed. I will have a look at how much time it took to deploy. It wasn't fast for sure, maybe like two to three minutes. And that's it. Now from here, you can actually view your application straight away. So I'm going to click live app. And of course, they give you a temporary URL that you can use for this. And if I zoom in super quickly, you will see that our application is fully working. You will see that our application is fully working. Now before we have a look at the other stuff on the website, let's set up our domain name. So I'm going to go back super quickly. And then from here, we can go under settings, scroll down and then under domain names here, I can click edit and I can add domain name. So let's add domain name. And my domain name is going to be called ready.lo. I got a super cheap from pork bun just for testing purposes really. And now we need to set it up. So choose your domain name, DNS management by the looks with the two ways of doing it. You can change your NS servers to dig the ocean and manage your domain name from their platform. Or you can manage your own domain name, which is what I'm going to try to do. And this gives you a little bit of warning here because not all domain name providers have this option. So the C name flattering or using a name. So now all domain name providers have this option. And you might have to do this. But I believe that pork bun this have this option. So I'm going to try it. So I'm going to go to pork bun. And then from here, I'm going to click domain management. Let me zoom in a little bit. Here we go. And here is my domain name ready.lo. Let's click on DNS. And from here, make sure that you remove all of your records that you don't need anymore. And I'm going to add a new one. The one that we need to add is going to be this one here, alias C name flattering record. Let's click on this. And now for the host, it's going to be exactly the same is going to be empty. And the answer is going to be the string that they're giving us here. So let's copy and paste it. And let's click add. Okay, this has been added. And now if we go back to digital ocean here, and if I click add domain, okay, a new domain name has been added. This is great. And it's redeploying here by the looks of it. Oh, here we go. It's already done. It changed my domain name here to ready lol. And now if I click live up, let's have a look. Yep, we have a domain name. It has SSL as well. So you don't have to deal with that. And everything seems to be working. So if I click on books, this is service I rendered. If I click on a book here, this is also service I rendered. And this uses suspense, I believe. And then we have books, which comes from an internal API books that I've created. And I'm going to show you now. But this is client side fetched. If I refresh quickly, you'll see that it kind of like it probably has a loading state. So this also works. If I go to the API super quickly, should be able to see the API that I've created here under API slash books. And what else? What else? We have the about, which is just a static page and the same with home. And at the bottom I've added a site map, which is a dynamic site map that comes from the database. And this is coming from a EMV variable that we've added earlier. On this side map, I have revalidation and so on. So that's pretty much from this tutorial. The platform actually looks quite promising. It's my first time using it. So I might give it a go and see what is like. Anyways, thank you very much for watching. Consider subscribing to my channel, like this video, and hopefully I'll see you in the next one.