 Hey, what is going on everybody, my name is Roddy and you're watching my channel Roddy The Brand. Today we're going to set up a very basic Node.js Express and MySQL project and we'll learn how to deploy it on Heroku and ClearDB. This video will be timestamped so you can quickly skip to any of the sections that interest you. I hope that you find the video useful, I would appreciate it if you liked the video. Consider subscribing for more content like this and share the video with your friends, family and pets. Now let's jump on the computer and get started. If you want to follow along, first of all, go ahead and create an account at Heroku.com. And the first thing that I want to mention is that unfortunately if you want to install add-ons you're going to have to have your account verified. Now the unfortunate bit is that you're going to have to insert credit card or debit card depending on where you are in the world and this is how they can verify you and allow you to install add-ons. I mean everything that we're doing today will be free and technically speaking when you use your free dino, your project shouldn't cost anything, it would just stop running but obviously check this with the documentation as well. And now if you want to follow along as you can see I've zoomed in quite a bit so you can see I am at the dashboard.heroku.com slash apps. Now let's create a new application by clicking new, create new app and then we need to give it an update. So node js-clear db-adraheroku, something like this and then let's give it and then for the region I'm going to go Europe because this is closest to me and then I click create app. This should take a second. Later on we'll have a look at how to deploy this as well so it's going to be a fully working website and the first thing that we need to do is install all database. To do this we can go to resources here on the top and then look for MySQL databases, MySQL. Now clear db has a free tier and also this one has a free tier as well. I'm going to use clear db today. I think the free tier allows you to have roughly five megabytes for your MySQL database but obviously check that at the marketplace and they will give you a lot more information. So I'm going to choose the free tier here and then submit all the form. This should take a second. And now before we get the database username, host and password we can actually let's click on this and quickly explore it. Now this website will give you a couple of things. It will give you your database name and if you click on it, this will give you some statistics here of your database and also you can have a look at backups and jobs system information is where you can find your username and password and you can reset it if you wish. The last thing that I wanted to show you was that if you go to the dashboard actually and then how to connect here, you can see a different ways of connecting. But today we're going to be using my SQL workbench. Let me close this because we won't need it anymore, but we do need to go to the correct website, go to settings and if you scroll down you'll see this config vast. We need to click on reveal config vast and this will give you the username, the password, the hosting and the database name. So I need to copy this and paste it somewhere so we can use it a little bit later on. I'm going to go in Visual Studio Code and just create info.exe. It doesn't really matter. I'm just going to paste it here and use it a little bit later. I'm going to save this. And now the first thing that I want to do is connect this database that we just created with my SQL workbench. To do this, let's open my SQL workbench. It's a little bit small, but I'm going to try to zoom in in prediction. And the first thing that we need to do is create a connection. So let's do that. And then we need to give it a name. So mode JS and then add an clear DB. Let's do it like this. The host name will be the host name we can copy from the bit that we just copied from Heroku. So the host name will be from here from the ad symbol to the dot com as the host name. So let's copy that and paste it inside here. The username will be the front bit here. So from the slash to the column as your username, copy and paste. And now we need the password, which is here from the column to the ad symbol, copy and paste store in in vote here. So we can paste it in here. And the first thing that you want to do, the port number, by the way, is going to be the same 3, 3, 0, 6. And the first thing that you might want to do is to test the connection. So I'm going to click test connection. And as you can see, successfully made the MySQL connection, which means that everything we just done is working and we can continue. Press OK, OK. And now we have all new connection here. I can click on this and this will open the whole editor. Usually, if you just installed MySQL Workbench, you might just get it to look, it might look like this. But what we need in here is the schema. Now, you could definitely import some data if you have an existing database. But what I'm going to do is I'm going to create a table quickly and just do a very simple table that we can use today. So this is our database here. And we need to expand a little bit and click on tables. Actually, that's wrong. If we double click on the table, sorry, and then click on this plus sign here, create a new table, this should allow us to create a new table. I'm going to keep this super simple and just call it user. And then for this table, I'm going to leave everything as default. But we need to give it a few columns. And then let's give it an ID. So we need a unique ID. This will be an integer. This will be an integer. It will be a primary key and it's not going to be. And not know will be selected because this cannot be known. We always need the value there. And then let's do something else. Maybe like, let's do name. And then for the name, I'm going to keep a simple voucher 45. Everything is fine here. Let's add one more column. And I'm going to call this a simple job. And then this can be voucher 45 as well. And that would do. Now that we have this completed, let's click on apply because we need to create this table. And this is going to show us the SQL script that you could have done manually as well if you are familiar with SQL. But this is just a little bit easier. And I can just apply. And this should take a second. Click finish. And now if you want to see your table, we can actually remove all this, go to tables, expand there. And you should see the user table here, which is good. If you want to see the data in the user table, you can click on this little icon here and this should open it. At the moment, we don't have anything. So it will be nice to have something. So let's put on the ID. Let's put one. Let's put rad and let's put for job web developer like so. And that will do. I'm going to expand them a little bit so you can see. Okay, that's pretty good. Of course, you can add more, but we really don't need them. We're just testing here. So let's apply this as well. We need to insert this into the database like you should finish. And that's it. We have our first row. Now we can try to create a quick app and connect to the database. Then we can display the results and we can deploy to Oracle. Let's have a look at how we can do that. As you can see, I've already got a project folder created here. It's blank, it's empty. So what I'm going to have to do is create a new project. To do this, I'm going to open the terminal inside here. If you're not using Visual Studio Code, of course you can use something else like PowerShell terminal or whatever. And to initialize a new project, I'm going to do MP, M, I init. And then I'm going to use the Wifelike, which will just save me a few seconds of pressing enter. And this is just basically going to populate name, version, description and so on super quickly. But if you wish, you can always change them. I want to make an express server, so we definitely need to install express. I'm going to install EJS for our view engine and I'm going to install my SQL. So to do this, let's do all of them at once. NPM, install express. And then we need EJS and then we need my SQL and press enter. This should take a couple of seconds. And then if we go to the package.json file, you should see everything, all the dependencies in here. And we might as well set up our project. So we're ready to deploy to Heracu when our app is finished. So I'm going to change the main file here to be app.js, just because I prefer it like this. And then I'm going to remove this test line here and convert it to start column and then inside double vote, I can do node and then app.js. So I'm going to be starting the application manually, but that's okay. Hopefully we won't have too many changes. That's all looking good so far. I can save this and close it. Now we need to create our app file. So let's do a new file app.js. And inside here is where we can start building our application. Now the couple of things that we need to do, let's start by creating a very simple server and let's quickly test them before we do anything else. So to do this, let's include express const express equals require and then we require express. We need to initialize the express for server by doing const app equals express like so. And we need to initialize the express server by doing const app equals express like so. The next thing that we need to do is set a port number. So I can do const port and this will be because process.env.port. So we are either going to use the environment port number or if there is nothing there, we're going to do port 3000 and that should do the job. And by the way, feel free to close everything with semicolons. I think I'm just going to leave it as it is now. The next bit that we need to do is app.listen and then we need to put the port number. So we want to listen on this port number that we just created. And the last thing that we can do is let's just console log something, console.log and then we can just console log something like server is listening on port and then we can bring the port number by doing dollar sign and then curly brackets port like so. And now technically speaking, this is how easy it is to create an express server. And if you run this project, hopefully everything should run smoothly. So we can do that by doing in the command line we can do node app.js. And as you can see, server is listening on port 3000, which is what we want. Okay, this is great. I can do control and C to stop this or command and see if you are on Mac. And now we can start bringing in EJS and then the database. So to set up or view engine to be EJS, it's actually fairly simple. We can, let's do it around here. So view engine and we can do this by the app.set and then view engine and then the view engine will be EJS. Of course, feel free to use perk, handlebars or whatever you like. This is just easy to do. And then in order to render a page, we can do render home, render home page and let's do app.get. And then inside here is we need to put slash because this is our home page. If we had about, maybe we'll put about, but this is our home page. And now we need to put this, this is going to be a function and this function will have the request and the response like so. And then we open curly brackets and inside the curly brackets, we usually put our logic. So this time we're just gonna do rest.render to testing. So I'm gonna just render, let's say, let's just do index and I'm gonna have to create this file and I'm gonna have to create this file in a second. But you know what? Just to make it a little bit more clear, this is a page. So let's do pages slash index and you don't have to specify the extension here, but it will be EJS. So this is all good. Technically speaking, if we say this, if we create a folder called views and inside here, let's create another folder called pages and inside here is where we're gonna be creating all pages. We're only gonna have one, but index.EJS like so and then we can do something here. So let's do a blank HTML file and I'm just gonna say, I don't know, let's do something big, H1, hello world, save this and this should be fine. Okay, everything is looking good. The next thing that we need to do is test before we do any of the MySQL step. To do this, we can do node.js and as you can see, server is listening on port 3000. So if you go to the browser and we do localhost column 3000, you will see that this is rendering hello world, which means that everything that we've done so far is working. Okay, this means that we can bring the database now. So what I'm gonna do is let's include MySQL somewhere. Okay, let's include somewhere around here. So we can do comes MySQL and this will be equals require and then MySQL. In order to use MySQL, we need to set all connection details. So connection details. And so this is going to be comes connection and this will be equals MySQL and then create connection. Like so on inside here, we have brackets and then curly brackets and inside the curly brackets, we're gonna have a couple of things. So we're gonna have a host column and then in single brackets or double brackets, if you wish, then we're gonna have the hosts. We're gonna have a user, then single brackets, oops, and then in common. And then we're gonna have password, column, single brackets. And one more, we're gonna have the database name. Like so, columns and single brackets, like so. And we don't need to put comment here. It's absolutely fine. So this is all looking good. Now we need to bring the host, the username, the password and the database. So we're gonna have to do exactly the same thing that we've done with the MySQL workbench. All right, now we need to get the data. So if we click on this, I've misspelled this, but yeah, I was gonna do something like this. It doesn't really matter. I'm probably gonna remove this anyway. So info.txt is where we copied this earlier and I need the host first of all. Here it is, just like we've done it earlier. So the host here, the username is this one here. The password is this one here. And the database name is this one here. The database name is up to the question mark, right? And now let's paste it in here. That's pretty much all connection done. And let's do a very simple MySQL query that we can check out in the console and then we'll render the result as well. So to do this, what I'm gonna do, maybe just after the view engine, let's do, let's do in here. Let's make some space. Okay. Inside here, what we can do is connection.query and I'm gonna do something very simple. So let's do, select everything from the user table that we just created earlier, where ID is equals and then in double quotes one. So I just wanna select the first ID, the first user and then after this, after the single quote here, we need to add comma and we're gonna have an error or the data dice going to come back from the database. I'm just gonna call this rows like so because we might have multiple rows. I mean, at the moment, we only have one username, but usually have a lot more. And then this is going to be an arrow function and in curly brackets is where we're gonna add, we're gonna finish the rest of the logic. So if we have an error, we want to throw an error. You can obviously do more stuff here, if you wish. And then if we don't have an error, then we want to do something. So in this case, I'm just thinking of first of all, let's console log some of the data. So I can console log the rows as the console log. And then this will be rows like so. And if we save this, this should be good enough, I think. All right, this should be good enough for a very simple project. What I can do is start the project and hopefully we should see the results in the console here. So I'm gonna clear, let me do control and C and I'm gonna clear everything just so you can see here at the top. So I'm gonna do node app.js. And as you can see, service listening on port 3000 and row data packet ID one, name, write, job, web developer. So if I was to change something on the database, let's say, let's say we go back to workbench and let's say I changed the name from write to ready. Like so, obviously we need to apply this by the changes, update it and that's it. And if I go back, so I'm not here in the in Visual Studio Code and if we restart the server node app.js, you should see that the name just update. So that means that our database is working correctly and all of this is coming from the database. Now, if I wanted to display this on the page, we can use EJS which we've already set up pretty much. So this should be fairly easy. So what are we gonna have to do is move this connection query and move it inside here. Let's do that. Let's paste in here. And what I'm gonna do now, we want to render the page. When there is no error and then we have the database data. So inside here is where we can put our res.render and we can pass this object that comes from the database with a comma and then curly bracket and then rows. Technically speaking, we should be able to now use the rows object in or index.ejs. And to do this, we can go back to index.ejs and instead of hello world, let's just put in here. So to write EJS, we're gonna have to open arrow and then percentage, then dash, and then we can put rows. We can select the first object like this. So I'm just gonna put zero and then we can select the name from the table like so. And then we need to close it with percentage and the backwards arrow like so. And this should now hopefully say hello ready. If we save this and go back to the browser, let's refresh. Actually, that won't work because we didn't start the server. So let's go back and let's do node.js. That should start the server. Obviously console logs are here. And now hopefully, oh, here we go. Now hopefully if everything worked, we should get hello ready. Of course, if we updated this in the database, it will update and so on. And if you want to bring the job title, we can literally copy this EJS and let's do job title and we can do a rows. We're selecting the first object here and we're just doing job. So if we save this, job title, web developer like so. And now the last thing that I wanted to show you is how we can deploy this application. Okay, and the last thing that I wanted to show you is how we can deploy this to Heroku super quickly. So to deploy this to Heroku, all we have to do is go back to Heroku and then under deploy. Okay, basically there are multiple ways of doing it, but today I'm just gonna do it with the Heroku Git. And to do this, it's actually fairly simple. We just need to follow the following steps. So I'm gonna put this on the side and literally just copy them. So if we come back to the command line, let's start by logging into Heroku. So obviously you need your account. Let's do Heroku login. And this should say press any key to open up the browser. So press any key I'm gonna press enter. This just opened the browser for me. So what we have to do is click login and this should take a second. You're logged in. You might ask you to log in if you're not already logged in of course and you can close the browser now. All right, we are done with step one. The next step is to actually CD to your project which I already have as you can see, I'm already CD to my project. So what I'm gonna have to do is get in it and then we can do, and then we have to do Heroku, get remote minus a and then the project name which is node js-clear db-heroku and press enter. This should take a second and it's telling me that there is an update as well which I'll have to do later. And one more thing that I want to do before we upload everything on Heroku to Heroku is I'm gonna remove this info text file first of all. Meet the leader and I'm going to create a git ignore file that will ignore the node modules. So to do this, we can literally create a new file dot git ignore and inside here we can do node let's call modules and then slash. Save this and this will hopefully ignore the node modules and not upload them to Heroku. All right, if we close this now this is the final process of deploying this application and let me quickly clear everything and let's do git add everything dot means everything and then what we have to do is commit the changes. So git commit minus IM and then the example is make it better with double quotes and press enter. So this is going to commit everything. And now all we have to do is push to Heroku. So let's do git push Heroku and then master. So press enter and this should take a couple of seconds to upload the files and build FRS. As you can see we have built successful and hopefully now if we go back to the browser and if we go to what was activity maybe one sec. So you can see here that I just deployed it and then if we go to open app you will see that all website is working from the database and if I was to update any of those values if we open the user one more time actually and if we change this to something else like red and let's just change this to web designer something like this, apply. You should see that everything in the query is looking good, apply. The SQL script was successfully applied to finish and now if we go back to all live version as you can see the URL here and if we refresh you should see red and title change to web designer. That's pretty much it. I hope that you found this video useful. Thank you very much for watching. Consider subscribing, like this video and if you have any questions, please comment below and I will see you in the next video. Thank you very much for watching.