 Today, we will deploy the Mern project we developed in the previous video. For the people unfamiliar with the project, we developed a simple crewed application which is based on Mern and it looks just like this. There are a lot of options when it comes to free hosting and most of the platforms are incredibly generous. Here we have a few options for a web server built with Node.js and our client built with React. The free tiers are designed to help you get started and once your project grows, you can always upgrade. Note that some platforms do not allow commercial use on their free tier. In order to publish our project on render.com, you will need to have GitHub account and it's totally free. You can go to github.com and sign up from here using your email address. Follow the instructions and then you'll be good to go. I've already got an account, so I'm going to close this. And the second thing that I want to mention here is that I'm going to be using the GitHub desktop application just because it simplifies the process of creating repositories and pushing changes. It's just a nice development workflow. You can get the GitHub desktop for Windows, macOS. I'm pretty confident that it's also available for Linux as well. And that's it. I'm already logged in in my GitHub account and I'm here under repositories. If you wish to use the command line you can do, you can create a repository from here as well. But as I said, I'm going to be using the GitHub desktop application. So let's open the GitHub desktop application from here and we need to start by creating a new repository. An easy way would be to add an existing repository from your hard drive or I've already got my folder here with the client and server and we are going to start with the server first of all and I'm just going to drag the server folder inside here. This is going to notice that this is not a Git repository. Would you like to create a repository? And all we need to do is click here, give it a name. I'm going to call my project book dash server. Of course, give it a nice project name. Then if you wish to, you can give it a description. Initialize this repository with the readme file. And for the Git ignore, this is important. We need to select node and this is purely because we don't want to be uploading all the node files on GitHub. There are quite a lot of files and you don't need them. For the license, choose the one that suits you. I'm going to go with MIT license and then click create repository. That's it. We can close this. And now inside here on the left side, we have our first repository called server and we can actually change the name by publishing this repository. So I'm going to click publish repository. And from here, we can give it another name. So book dash server. Give it a description if you wish. And I'm going to keep my code private just to show you that you can have your repository private so nobody else can see it. I'm going to click publish repository. And this should take a second. Okay. Our project is published on GitHub. And if I go to my GitHub account here and if I refresh and if I look for book, you will see that we have book server updated now, which means that everything has gone well. Now let's jump to render.com. And if we click on prices super quickly, you will see that this is free for hobbies, students and indie hackers. And this is going to work just fine for us. So sign up for render.com. And once you're done, just go to your dashboard. From here, click on you and then select web service. Click on this. And this is going to ask us to connect a repository from GitHub. If you sign up with GitHub, otherwise you will need to connect your GitHub account from here. Just follow the instructions. And then because this is a private repository, it's not going to show up in here. And we need to configure our account by clicking configure account here. If we scroll down a little bit from here, we can select only the repositories that we want rendered to see. And I can select repository, look for book server and click on it. So this is going to be added to the list and I can save it. We're going to get redirected back here. And as you can see, now we have the book server project available and I can connect it. From here, we need to give or service a name. I'm going to give it a book server. Choose your region from here. I'm going to leave as default. The branch can be left as the default one. Runtime is fine. Yep, everything else is fine. The command node index is fine. We've already said that. From here, you can choose the free tier, scroll down and click create web service. All right, while this is creating, it's going to take a few seconds. We can go to the environment variables. This is where we can add or MongoDB connection. For example, with a click at environment variables, we have the key and the value. So if I go to my project and if I click on server here, we have all dot EMV file. We created in the previous tutorial and we essentially have MongoDB URI, which I can copy. We need to replicate this basically. Put it inside here. And for the value, we can just grab the MongoDB and the rest from here and paste the value in here and just save changes. And if you click on event, the important bit here is that you will be able to see whether your project failed. So as you can see, it says deployed failed for this number here. And I don't really know what this means, but if I click on deploy logs here, you will see, let's have a look super quickly. So the error is Mongo 7.3.4. The engine node is incompatible with this module. Expected version bigger than, bigger or equals than 14.20.1. So let's fix this. I'm going to open my server project and all we need is the package.json file here. And here, maybe just above the development dependencies, we need to add this code, which is going to tell render to run node with this 14.20.1. Save this, go back GitHub desktop and now publish the changes so I can do engine. For example, and then commit to main and then publish. And if you go back to render, this should automatically start deploying. So if I go to events one more time, you will see that automatically it started deploying because you notice that there is a new commit. And now all we need to do is wait a couple of seconds and see how it goes. But if you get an error, make sure that you see the deployed logs. And normally you can Google it and find the answer pretty quickly. All right, awesome. As you can see, deploy live for and the number here engine. And by the looks of it, if we get the green cloud, it means that our project is working. Here is all URL, which is given to us by render.com and this is going to be unique and it won't change. So if I click on this, hopefully we should be able to see all API working and we're getting hello, mate. And then it was API slash box press enter. You'll be able to see that we're getting the books and all API is working, which means that our first mission is complete. Okay, now that we have the server running, we can copy this URL and we can super quickly look into our React application. So here where we have client, let's open this in Visual Studio code super quickly, code dot, and I wanna show you a couple of things. The first thing that I wanna show you is that if you go to route and let's say books, for example, so we've been using or local development server, which is localhost of 80,000. But now we can use this one here. And of course, if you wish to, you can add a custom domain name as well, but let's keep it simple for now. I'm gonna copy this. Now the problem here that I'm having is that we have localhost on a couple of files. If we scroll down, we probably have a couple of times here as well and we're repeating ourselves and it's pretty hard to update. So what we can do is create another EMV file inside here, inside our client. And this is gonna be called dot EMV dot local. And inside here, since we're using VIT, we need to put VIT, like so underscore and then the name of our variable, which is gonna be server. You are URL and this is gonna be equals the URL. So for example, if you're developing locally, you can put this as your localhost. It's gonna be like this of 80,000. And that's it. Save this. And now I'm gonna show you how we can use this in our application. So we don't have to repeat ourselves. And let's say, let's start with box, for example. Inside here, if we put the base URL in single slanted quotes, like so. And if we use removal of this and if we use the dollar sign and curly brackets, we can bring the variable name, the VIT variable name from here by doing import dot meta dot EMV dot VIT underscore server URL. And that's it. Now we could potentially also create a server URL here. So const server URL purely because we cannot use this everywhere, the base URL because it has the slash API slash books. So I'm gonna grab this. So I'm gonna grab this and paste it in here. So now potentially I can grab this and replace pretty much everything that we need. For example, I can replace this here by replacing this part without the uploads, of course. So dollar sign, curly brackets and server URL. That's pretty much it. Save them. Let's go back to create book and do exactly the same. So I'm gonna copy this here, paste it around here and let's see what we need to replace. So we can definitely replace this one here. I can do it with single slanted quotes and just replace the website like so. Also, let's see whether we have it anywhere else. I think we're good to go here. So let's go to the next one. I'm gonna copy this one more time. Edit book. Save it here. And in fact, I can just put it inside here like so. That would also work. I should have done that maybe. And now I can go down. Change this to single slanted quotes. Swap this. So this was purely bad planning from my end but there are not too many. So we just need to replace a few. I'm gonna replace this and for the images here, we also need to replace this. And I think that's gonna be it single book. Okay, maybe we need to do that as well. So I'm gonna copy this here. Let's put in here. Change this. Save it. Change this. Save it. And that's it. So now everything is pretty much the same for application is gonna look for this EMV.local file and it's gonna go to localhost. So essentially when we publish a project now in side render, we can change this URL to on your server URL. Let's do that. Okay, from here, we need to create another repository for our client. So I'm gonna drag and drop this in here. And this is gonna say add local repository, create a repository, give it a name, book-client. Initialize this repository with readme. Get ignore needs to be node and license. I'm gonna go for MIT and click create repository. Close this. And now we should have our client repository in here as well. And we can push the repository. I'm gonna call it book-client. Keep the code private and publish repository. And we have our repository published. So we have our client on the server. To go back to render.com, click on dashboard. From here, we can click on new static site because React.js is a static website. And then from here, we need to configure all new repository so we can add it because it's a private repository. Scroll down, click on select repositories. Look for book-client, select them and save. Now we can create all new static site by selecting the book-client, connect them, give it the name, book-client. The branch is gonna be main. Everything else stays the same except the distribution folder. So every time we build our project, our project will be built in this distribution folder, which I can demonstrate. So let's click create static site. And I'm gonna demonstrate this as well this is creating. So this is gonna take a couple of seconds. And if I go to the client here and if I open it in Visual Studio Code, sorry, if I open it in Terminal, let's say. And if I do npm run build, you will see that this is gonna create a distribution folder inside here. And this is our website fully built. We're gonna minimize this. And the other thing that we need to do is we need to go to environment variables here. And we need to mimic the EMV here, the EMV local. So this one here, let's grab the VIT server URL, add environment variable, paste it here. And let's paste the value when we work locally that can stay the way it is. But when we publish our project, we also, we wanna be using our server URL. So I'm gonna go back to the dashboard here on another tab. I'm gonna go to book server and copy the URL from here. Copy this. And paste the value inside here and save changes. If we go back to events, this should take a couple of seconds and hopefully we'll have the website running. Okay, it took a good minute. But as you can see, we're getting the green cloud in here, which means that we can now visit our website on this URL. And as you can see, all website is working if I go on books. You should be able to get the books. Everything else should be working. If I click on the filters, they should be working. And where do we add a book? Let's add a new book. So I'm gonna do test, test, five, test, test. Let's choose an image of the cat and submit. As you can see, data submitted successfully. If I go back to books, you should be able to see that we get the test here. And if I click on it, it comes up with all the data. And so on. That's pretty much it. And that's pretty much it. And the last thing that I wanted to talk to you about is that if you go back to render.com and if we click on settings, from here, you can deploy a custom domain name. If I find that, here we go. If you scroll down, you'll be able to see custom domain names. And you can just click on that custom domain name, add your domain name, and this will give you the DNS instructions. Unfortunately, I don't have a domain name that I can use. It's totally free. I believe that you can publish around 25 domain names for free. I found a super cheap domain name that I can buy and use for this tutorial. So I'm going to buy this super quickly. And then I'll show you how we can connect our domain name on render.com. Awesome. I've got the domain name. And now I'm going to log in to render and see whether we can connect it. Okay. I've got my domain name ready. And from here, I'm going to click DNS. Obviously, depending on what platform you use, it's going to look a little bit different, but the settings will be more or less the same. At the moment, I'm going to click on this. Click on settings. And then at the bottom, I believe we have custom domain name from here. Click. Add custom domain and let's type or domain name ready. That low and say from here, we can either add a name or alias record pointing to this. So I'm going to copy it. But as you can see, if your domain name is not here, you can just click on it and it will start. copy it but as you can see if your domain name does not support a name or alias you can just point an a record to this ip and to do this you can just click on a record and then do the settings right from here i'm going to remove those two records so we're starting blank and i'm going to copy this here and add it as alias we can leave this blank and then i'm gonna paste it here into the answer and add as you can see the record has been added in here and now let's have a look at the next step for www.low add cname record for www pointing to this okay we're gonna create a new record cname this can be www and then the answer will be the same as before and add we have both of the domain names here let's go back and verify okay from here my domain name has been verified which is great but i'm getting a certificate error i've googled this and it looks like i just need to wait a little bit and this error will fix itself so i'm not going to do anything else wait a little bit and then come back okay i didn't do anything but refresh the page and we are now a certificate pending so it is about just waiting a little bit and then hopefully the certificates will work okay this took a while i think i waited around four five minutes and now after a refresh you can see that we're getting certificate issued which means that our custom domain name is set as you can see right below let's open in the browser and it doesn't seem to be working yet so i might wait a little bit longer okay i waited a little bit longer and now if i refresh as you can see the website is now working which is great and now i can do the same for the back end let's go back to render.com dashboard and then go to book server from here scroll down click on settings and scroll down to the custom domain name settings from here i'm gonna add custom domain name and let's do server dot ruddy dot low and then save so i need to create a cname record for server pointing to this URL so i'm gonna copy this URL go back to my domain name register and then from here i'm gonna click on cname the host will be server and then the answer will be the URL that they gave me and i'm going to click add okay here we have all the records and now if i go back to render here and verify this it broke the page so i'm gonna refresh scroll down and here we are as you can see the server dot ruddy dot low is verified and i believe that this is going to take again a couple of minutes and it's just going to work while this is happening you can potentially copy this you can go to your react application here where you have environment and potentially you can have your fetch URL as this URL here of course with htdps and this will just look more professional and once they create the ssl for you it's all going to work and that's pretty much it i'm not going to wait for this one because i'm pretty confident that it's just going to work but it will take some time maybe five to ten minutes