 In this video I will show you a way of deploying a simple mode application on AWS LightSale. The video will cover setting up a new AWS LightSale instance, domain name setup for both client and server, setting up a simple mode application, fix for single page apps, that's when you get 404 error on page reloads, how to SSH to the project and how to connect MongoDB compass. Hey, welcome everybody and let's get started. I've already logged into my Amazon LightSale account and from here we need to create a new instance. Choose your instance location from here, I'm going to leave it as London as this is the closest to me and then we need to pick our instance image. In this case we're going to have Linux and under apps and operating system we're going to have Mern. Scroll down a little bit more, you will see that this Bitnami package provides a complete production environment for MongoDB and Node.js applications. It includes the latest table release of MongoDB Express, Angular and Node.js. We will be replacing Angular with a React project, but the front end library is pretty much up to you. If you scroll down a little bit more from here you can enable automatic snapshots, scroll down a little bit more. Here we have the plan and today I'm going to be using the $5 plan because if we click on the cheapest option here it says that you might notice performance issues. So let's go with $5 and then let's give our instance a name. So I'm going to call this one ready and then mine. Let's create the instance and while this is pending we can create a static IP. So under networking create a static IP and this static IP can be quite helpful if you ever need to change your instance. You can just change your static IP to a new instance and you won't have to update your domain name details. So from here again choose your location and then give your static IP a name. This one is going to be called ready and mine static IP free create. And now once all instance is created you should pop up here. Here we go. He actually done it straight away and now I can select the instance. Here it is ready man and attach it. Perfect. Now our instance is attached under this IP here and we can potentially visit this in the browser once all services are started. So let's copy this super quickly and paste in the browser. And as you can see this side cannot be reached. So try this in a couple of seconds. I'm going to go back, click on Amazon light cell and select the instance here that we created. And let's go back and try a couple of more times. So refresh. Okay. It did take around 30 seconds to get started. And as you can see we're getting congratulations. You're now using mean packaged by bitnami. From here you get some useful links. If you click on get started, you will see the documentation here, which can be quite helpful. Let me close this, close this as well. And now we can use this static IP to point or domain name. If you open your domain name register website. In this case, I'm going to be using one, two, three rich because I found a no domain name that are no longer using. So from here, manage domain names, ready.co.uk. I'm only using this for redirects to my new domain name. So this can be a good one for the tutorial and click manage. The, the process will be pretty much the same for, for all places that sell domain name, whether using Google domain names, one, two, three rich or whatever, the process will be more or less the same. All we need to look for is manage DNS. So here it is under advanced domain settings, select manage DNS, where you can manage your A records. And inside here, we need to click advanced DNS. So basically you want to find where your records are. In this case, I have some redirects in here, which I'm going to quickly delete. Okay. And these are some MX records for a mailbox that I have. So just ignore them. I might need them. So I'm not going to be deleting them from here. We need to add our first record. And this is going to be at, and then we can put this as a record. And then the IP from here. So we're using the static IP, click add. Also, I'm going to do the same thing for the www subdomain name. And I'm going to put dot a record and then the same IP. So I need to remove the dot from here and then add. And the last one that I'm going to do for the server, I'm going to create a subdomain called server. This is going to be on Node.js stuff, API in this case. And then a record. And then inside here, we put the same IP. All right. Normally the DNS propagates fairly quickly. But if you want to check it out, you can go to a DNS checker like this one here. And just type your domain names. All right. That could be okay. And check the air record. So from here, we're looking to get the new IP address. Which ends on 2113. And here it is. It's pretty much done everywhere, which is great. And now technically speaking, if I was to, for example, use the server. So let's say server, server dot ready.co.uk, press enter. You will see that we're getting the same page as if we were to put the IP. And the same will be if I will remove the server, we'll get the same page. So the next thing that we can do is to set up all SSL certificates. In order to do this, let's go back to light cell and open the SSH from here. So we can use the browser one, click on connect to SSH. And from here, we can use the Bitnami tool to generate an SSL. We can start by typing sudo and then OPT slash Bitnami slash BN third dash tool. By the way, if your domain name is not pointing to the server, you won't be able to install a certificate. So press enter. And in this case, we have ready.co.uk. And with a space, you can put more domain names. So we need server dot ready.co.uk and press enter. So the WWW domains, we're not going to do want to add them. In this case, it's up to you. I'm going to put no disabled. Okay, press enter. Enable HTTP to HTTPS redirection. I'm going to press yes for this one. Do you agree with these changes? Yes. And then I need to put my email address. And press enter. Do you agree to the let's encrypt subscriber agreement? Yes. And press enter to continue. And we're done with the SSL. So let's close this. Now let's connect to the instance using FileZilla. So we can create files and create the directories that we need. So in this case, what you need to do is if you go to your instance, scroll down here where we have the SSH key and download this SSH key somewhere locally. And now open FileZilla, go to edit settings. And from the SFTP tab here, we need to add the key. So add key and select it. Then all you need to do is press OK. And now we can create a new project by going File, Site Manager. I've created a tutorial folder here where I'm going to create a new site. And this site is going to be called ready. Mon AWS like so. So here on the right side, where we have general. Let's start with protocol. This needs to be set to SFTP. And we need to put the host IP, which is this one here, the static IP that we have. So I'm going to paste that super quickly. Put the port number of 22. That already set as default. So you might not have to add that. And then for username, we need to put Bitnami. Because we're using our SSH key, we don't need to put password. And now we should be able to click OK. This will be saved. And then if you go File, Site Manager, you'll have your project saved in here. And you can click connect. Always stress this host and add key to cache and then press OK. And as you can see, we are now connected to our instance in here. And we're currently in the home and Bitnami. Inside here, we need to create two folders. So right click on the first one is going to be server. And this is going to be where we're going to be adding or Node.js files. And then we need one more. And the other one is going to be client. The client in this case is going to be React.js. And the reason that you might want to add an insight here is if you need to compile your React app on the server, then you can add it in here. Otherwise, you can compile your project locally and just drop the files inside HD docs. This is where we're getting the Bitnami page. This one, this page here is coming from the HD docs, basically. Now we need to set up the virtual host for the main domain name and the subdomain name. And in order to do this, let's go under OPT, Bitnami, and then Apache, Conf, and then vhost. Press Enter. And inside here, we need to create a new file. I'm going to open Visual Studio code super quickly. OK. And inside here, and it doesn't matter where you create this file. So let's create a new file. And this file is going to have the name of vhost.config, Conf like so, and press Enter. So inside this file, we're going to have two virtual hosts. So the first one here, if you put 443, this will be with the SSL. But if you don't want SSL for some reason, that will be the default of port 80. So in this case, we want 443. The server name is going to be your domain name. And I need to change this to ready.co.uk. We need SSL engine on. And from here, we need to locate our certificate that we created earlier. So let's do that. I'm going to grab this and let's see if we can find the certificate super quickly. And if you go to OPT, Bitnami, Apache, Conf, from here, you will see the certificate key and the certificate. So all we need to do is copy this name. Copy ready.co.uk dot cert and this location. So from here, I'm going to replace this and I need to remove the cert. And I believe that the key was exactly the same. So right click, rename, copy, and then paste the inside here. So make sure that your SSL cert and key are in this directory. And then you should be good to go. We need to do another one for subdomain name. So if I copy one more virtual hosting here, this is going to be again, 443. The server name this time is going to be server dot ready dot co.uk. The proxy pass is going to be set to localhost of 8,000 proxy pass reserve, localhost of 8,000. And then the same as above, we have the certificate file here. So I need to copy this button here. And I need to copy this one is worm and paste it. All right, save this. And now we need to check this inside the previous folder. This is going to be under OPT, bitnami, Apache, config, vhost. So inside here is where we need to check this file. I'm going to grab it from here and drag it in. For some reason, it didn't let me drag it from here, but you can grab it from your folder and just drag it inside. Now that we have the vhost added inside here, in order for this to work, we need to restart Apache. So if we go back to the light cell account and open SSH from here, we can do sudo slash OPT slash bitnami slash CTL script dot sh and then restart Apache. Press enter and you should see restarted Apache. And now this should take a change and we should have SSL. If I go to the browser and I had to go into incognito mode because I think my website was already cached and it was redirecting. But as you can see, if I go to the browser now, we have HTTPS, we have the SSL installed and we have ready.co.uk. The other thing that we can try is the server dot ready.co.uk. And we're going to get service unavailable. And this is because we don't have anything inside the server folder yet. And that's the next thing that we need to do. If we go back to the file explorer, let's navigate to home slash bitnami. And here where we have the server, we can add all Node.js files. So I'm going to go back to my project folder here, find the server. And from here, we can drag all of those files, accept the Node modules and install them on the server. So I'm going to grab everything, accept this and check it inside the file zilla here. This should take a second and we're good to go. The same, we can do the same with the client. So I'm going to go inside client here and I can drag the client files without the Node.js folder. Let's track that in. And we should be good to go. Let's go back to our instance in here and open the terminal. And let's do LS. LS will list your current directory files. So for example, we have created the client and the server. Let's CD to the server. So CD server. And from here, we can do NPM, I to install all the Node.js packages. Okay. As you can see, all of the packages were installed and we can run this command here if you wish to update NPM globally. So I'm going to copy this super quickly. Paste in here and press enter. Okay. That didn't seem to work. Maybe I can press up and do sudo. So super user do and then NPM install globally. I think that seems to work now. So if we do LS, you will see that this added the Node modules to a project. And if I go back to the file zilla and if I refresh the server here, refresh, here we go. We're getting the node modules. And now we can start to Node.js project. In order to do this, I'm going to be using an NPM package called MP2. And in order to use them, we need to install it. So let's do sudo NPM install and then MP2 at latest dash G. The other options as well, but this one is pretty cool. And I'll show you why. Okay. Now that we have everything installed, the packages installed. So if we go back super quickly to my application here, this is the server. And if I click on index.js, you will see that I have a very basic application with a couple of routes. For example, the book route, the get route here, which is this place. Hello. And that's pretty much it. So we need to start this index.js file. If I close this, let's clear this. And if you do, as long as you are inside the server folder here, we can do PM2 start. And then we can start the index.js file, press enter. And as you can see, I don't know if it's going to open. Well, I think I broke it. But as you can see, we have index.js online. So or index is running. I think I broke it by moving the window. But if I do clear, and if I do, okay, so script is already launched. If I do stop super quickly, here it is. That looks a lot better. And now if we do start index.js, you will see that you will see that the index status is online. What we're going to do now is go back to the browser. And here where we have server.righty.co.uk, press enter. Okay, so my main route is just saying hello. And if I go to the project super quickly, this is what we get. Now the next thing I wanted to show you super quickly is that if you wanted to change this to hello mate, for example, save it and re-upload it. Well, our server will not restart automatically. And in order to do this, we can go back to our console here and we can stop the services. So press up, up and then mp2 stop index.js. And instead we can do mp2 start index.js and then dash dash watch. Press enter. And as you can see, watching is now enabled, which means that if I check in, you file inside here. So I'm going to, we've already updated this. I'm going to check it in. Here we go. And the server will restart automatically. And now if I go to the browser and refresh, you'll see that we're getting hello mate. And that's pretty cool. The other things that you can do, which I suggest you to explore on your own is things such as PM2 LS. For example, for clear this, we can also do something pretty cool, which is PM2 Monit. And then if you press enter, you will get this really cool user interface. And there is a lot more that you can do. But the rest requires registration. So I'm not going to be doing that. And as you can see in here, we're getting some of the server logs, which is pretty neat. And you can always exit from this. All right. Now that we have the server running, we can do the same with the client. So CD backwards and LS. And we are here in the main directory and we need to go to the client. So CD client. And here we go. From here, we can do MPM I for install. And we should be good to go. And we can also build a project from here by doing MPM run build. And now Vite is going to build the project. And if we go to the files again, one more time, go back, go to client. You will see that we're getting the node modules and we're getting this distribution folder. So technically speaking, if I go to this distribution folder and if I grab the files, I don't know if I will be able to copy them from here to, to the HD docs. Here we go. Client distribution. I want to grab them and copy them inside the HD docs. You can do this through the command line or you can do it locally and drag them in. But let me put them inside here. Okay, we couldn't overwrite the index. And this is because we money to delete it from here because of permissions. So let's delete everything. Sorry about that. And let's go back to the client. Let's rebuild the project super quickly run rebuild. I think there was some permission errors. And now if you go back here, we can go to this, in my case, grab this and put it inside the HD docs. Here we go. That worked. I think it was just permission issues, technically speaking. Now, if we go back to the browser, you will see that our website just refreshed and we're getting this react up, which I've created, which means that our front end is working and all backend is working. Now, the next thing that I wanted to show you is that if you have a single page application, sometimes let's say we go to the above route here and sometimes if you refresh the server is looking for about page, which we don't have on the server. This is a single page application and that breaks. Let me show you how we can fix that super quickly. Go back to firezilla and navigate to the folder OPT, bitnami Apache config. And from here, we need to find a file called Httpd config. Let's drag that out. I'm going to put it inside here. Okay. And now let's open this file inside Visual Studio Code and we're going to be looking for this. So directory slash OPT, bitnami Apache, HD docs. This is what we're looking for and we need to allow overwrite of the HD access file. So instead of allow overwrite none, we need to set this to all. Save. And we need to put this back. So I'm going to drag it inside here. There we go. And now we need to go to another folder, which is OPT, bitnami Apache, HD docs. And inside here, we need to create all HD access files. So in Visual Studio Code, I'm going to create around here. So dot HD access. And then inside this HD access, we need to paste this. This code in here, save it. And let's just drag it super quickly. So HD access. I'm going to drag it inside here. And this is our main directory. By the way, if you refresh, you will see the files. And we need to restart Apache one more time. So if I go back to the console, do right click, paste, see the OPT, bitnami, control script dot SH restart Apache. Restart it Apache. And now hopefully where we have not found and about if I refresh, you will see that this is also working. And now for single page application is fully working. Okay. The next thing that I want to show you is how we can use the local MongoDB database. All right. Let's connect using the SSH from here. And we need to grab the instance password just like we have before. So from here, I'm going to paste cut bitnami underscore application and score password. This is going to give me the password. So let's copy copy. And now we need to log in as the root of MongoDB. So mongosh admin dash dash username root and then dash P from here. This is going to ask you for the password, which we have here. So paste it and as you can see, we are in from here. You can do pretty much anything to the database from creating databases, creating users, adding data, removing data and so on. You have full access. In this case, let me show you, for example, we can do show the bees. And this is going to show the databases that we currently have. So I'm going to create a new database and assign a user to it. So let's collect database just to be generic. So use database. And then as you can see, we have switched to DB database. So from here, I can create a username that we can use for all connection. So database create user. And from here, we need the username. So user, I'm going to call mine ready. And then we can have the password. And for this, I'm going to put something like password 123. Obviously put a strong password here and then for rows, I'm going to put DB owner like so. Close curly brackets, close everything and press enter. As you can see, we have okay one. So now if I do show users, you will see that I have database and then ready. The user is ready and the database is called database. We are the owner of the database and so on. If I do show the bees, we don't get the database inside here yet, but we can create. All right. Now let's have a look at how we can connect. So first of all, let's minimize this and let's go to our project. Here where we have our Pemki. And what we need to do is left, right, click open in terminal. And this, all this does is it CDs to the folder where my Pemki is. You don't have to do that, but then you do need to find where the location of your Pemki is. This is a little bit easier. That's why I'm doing it. And I've already done the code as I was trying earlier. So I'm going to do this. So SSH dash I then we select the file inside here. You can put your directory as well if you wish to. But since we're directly inside here, I can just put the file name, Pem dash N dash F dash L 8000 column 127.0.0.1 column 27017. And then the username is Bitnami. And then we have the IP of the server. You can also do dash V. And this will show you pretty much what's going on. So if I look at this somewhere here, your connection established, this means that we are SSH to the server. Okay. I just wanted to pose the video super quickly and say that sometimes when you SSH using this Pemki, you might get permission errors. Now for Linux and potentially Mac, I'm not so sure. It's actually very easy to fix. All you need to do is CHMOD 400. And then you put the name of the key here, which is light cell default key. Here we go on one line. You can have it like that. And this will change the permissions of the file on Linux. And it should work. Now, I'm not so sure how you do on Mac. It's potentially the same. But on Windows, it's a little bit more work. What you have to do on Windows is right click on the light cell default key. Properties. And then under security, you need to click advanced. Then click on disable inheritance and remove all the inheritance permissions from this object. Now we need to do select add here. Select a principle. And from here, we can copy the desktop name. And I believe it will check it's slash and then the username. Now, in order to find your username of your PC, you can go to control panel from here. It's going to be use accounts, user account one more time. And from here, you can I believe that you can either use the email or the other name here. So in my case, it's going to be administrator. And then you can click check name. And if this doesn't work, it's potentially the other backslash. Oops, it's potentially backslash. Check names. And as you can see, it highlights it and then you press okay. From here, all you need is the read permissions. Earlier, I just gave a full control and pretty much okay on everything. So apply, okay, okay, okay. There'll be a few messages, I believe. And then you can try again by opening the power shell. Where is it? Open power shell, press up and then add the following code with your IP instead and press enter. Now, what we can do is open MongoDB Compass. And from here, we can create a new connection. We can paste MongoDB column slash slash and then ready. And then the password is going to be password 123. And then we have the IP of 127.0.01 and then 8000 slash database. And click connect. As you can see, we're in. And from here, we can create a collection, collect books. And I can add a couple of books super quickly. So insert document. I'm going to paste one in here. And let's add the other ones. I don't know if I can add them all together like this. Let's have a look. It doesn't matter. So here we go. We have a couple of books. Perfect. All right. The other thing that I wanted to show you as we're here is that you can use MongoDB slash column slash root and then your root password based in here. And now we can visit all of the databases. As you can see, the one that we just created with books. So that's another way of doing it. Cool. Now that we have this, let's close everything. Close everything. I'm going to comment this. I'm going to look for my dot EMV. And inside here, I need to change my connection string to use the locker one. So in this case, we're going to have MongoDB column slash slash ready. And then password one, two, three localhost two, seven, zero, one, seven and then database. Save this. And let's re-upload the project super quickly. So I'm in Vietnamese server. And I just want to make sure that we exit this. So PM2 status, everything is running, but also to make changes to an EMV file, we need to do PM2 dash dash update dash EMV, I believe, and that should update it. Let's have a look if I visit the website now. Okay. If I visit the API now, you will see that we're getting the data. It doesn't seem to be formatted for some reason, but as you can see, we're getting the data, which is great. And now I can use this in my React app. So for example, we can go back to my client and then source routes, books, books. And then here at the top, I can just do this server dot ready to code the UK slash API books, save this. Obviously we can build it. So what I'm going to do is go back to the client, new terminal, MPM run, build, or we can upload the project. And now I'm just going to re-upload the disk folder here inside. So home, bitnami, and then client. Sorry. It's the HD docs in this case. I'm going to grab that for an HD docs. And now, and now if I go back to the browser and if we do ruddy.co.uk, we go to books. As you can see, we're getting the great Gatsby and the Hobbit. And for some reason the other heading didn't work, but that's absolutely fine. Use the last connection from here. See the database. Oh, and it's because I have name here. So this needs to be title. And then I can say local AWS database, update pages. So you can see, I can close this, go back to the browser, refresh. And as you can see, the great Gatsby local AWS DB. And this is fixed as well. And that's going to be pretty much everything from this tutorial. I hope that you find it useful. Consider subscribing to my channel, like this video, share it and comment below. See you in the next one.