How to Deploy Node.JS, Express, EJS, MySQL website on Heroku & ClearDB

hey what is going on everybody my name is roddy and you're watching my channel riley 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 cleardv for free 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 a 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 gonna have to have your account verified now the unfortunate bit is that you're gonna 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 dyno uh your project shouldn't cost anything it will 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 dot hierarchy dot com slash apps now let's create a new application by clicking new create new app and then we need to give it an app name so node js dash clear db dash 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 our database to do this we can go to resources here on the tab and then look for mysql databases mysql now cleardb has a free tier and also this one has a 3t as well i'm going to use cleardv today i think the three tier allows you to have roughly five megabytes for your mysql database but obviously check that at the marketplace and they'll 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 mysql 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 vars we need to click on reveal config vas 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.dxd it doesn't really matter i'm just going to paste it here and unuse 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 mysql 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 node j s and then i don't know clear db let's do it like this the host name will be the host name we can copy from the bid that we just copied from heroku so the host name will be from here from the ad symbol to the com that's the hostname 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 that's your username copy and paste and now we need the password which is here from the column to the add symbol copy and paste store in involved 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 3306 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 uh editor usually if you just installed mysql workbench you might just get it to look uh 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 like i don't know 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 just cool 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 new 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 i don't know something like job and then this can be varchar45 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 would be nice to have something so let's put on the idea let's put one let's put rad and let's put for job web developer like so and that would do i'm gonna i'm gonna 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 result and we can deploy to rocket 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 gonna have to do is create a new project to do this i'm gonna 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 gonna do a pm i init and then i'm gonna use the y flag 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 to or 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 ajs and then we need mysql 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 hiraku when our app is finished so i'm gonna change the main file here to be app.js just because i prefer it like this and then i'm gonna remove this test line here and convert it to start column and then inside double quote 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 cons express equals require and then we require express we need to initialize the express server by the const app equals express like so and we need to initialize the express server by doing cons tap equals express like so the next thing that we need to do is set a port number so i can do constant and this will because process dot e and v dot so we are either gonna use the environment port number or if there is nothing there we're gonna 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 part number that we just created and the last thing that we can do is just let's just cancel log something console.log and then we can just console.log something like server is listening on board and then we can bring the port number by doing a dollar sign and then curly brackets port like so and now technically speaking this is how easy it is to create an express 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 controversy 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 setup or view engine to be ejs it's actually fairly simple we can i don't know let's do it around here so view engine and we can do this by the app dot set and then view engine and then the view engine will be ejs of course feel free to use bug hanabus or whatever you like this is just easy to do and then in order to render a page we can do render from the home page and let's do after get and then inside here is we need to put slash because this is our homepage 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 the 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 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 going to be creating our pages we're only going to 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 app.js and as you can see server is listed 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 const 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 cons connection and this will be equals mysql and then create connection like so and inside here we have brackets and then curly brackets and inside the curly brackets we're going to have a couple of things so we're going to have a host column and then in single brackets or double brackets if you wish then we're gonna have the host we're gonna have a user then single brackets oops and then an comma 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 right now we need to get the data so if we click on this oh i misspelled this but yeah i was going to do something like this it doesn't really matter i'm probably going to 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 and now let's paste it in here that's pretty much all connection then 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 uh 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 want to select the first id the first user and then after this after the single quote here we need to add comma and we we're going to have an error or the data that's going to come back from the database and i'm just going to call this rows like so because we might have multiple rows i mean at the moment we only have one username we usually have a lot more and then this is going to be an arrow function and in curly brackets is where we're going to add we're going to 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 cancel out 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 going to clear let me do ctrl and c and i'm going to clear everything just so you can see here at the top so i'm going to do node app dot js and as you can see server is listening on pause 3000 and raw data packet id1 name right 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 change the name from write to rudy like so obviously we need to apply this by the changes update and that t and if i go back sorry not here in the in visual studio code and if we restart the server node.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 we 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 let's grab that when there is no error and then we have the database data so inside here is where we can put our rest.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 uh 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 error 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 and 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 we 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 i don't know let's just do job title and we can do it 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 hiroku 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 with with the heraku git and to do this it's actually fairly simple we just need to follow the following steps so i'm going to 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 going to press enter this just open the browser for me so all you 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 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 git remote minus a and then the project name which is node js clear db dash 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 going to remove this info text file first of all let me delete it 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 underscore modules and then slash save this and this will hopefully ignore the node modules and not upload them to broker 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 that means everything and then what we have to do is commit the changes so git commit minus i am and then uh the example is make it better we double quote and press enter so this is going to commit everything and now all we have to do is push to a record 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 it for us alright 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 it 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 rad and let's just change this to web web designer something like this apply uh you should see that everything in the query is looking good apply the sql script was successfully applied finish and now if we go back to all live version as you can see the euro here and if we refresh you should see rat and title change to one designer that's pretty much it um 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

Channel: RaddyTheBrand

Views: 4,109

Keywords: deploy on heroku, heroku tutorial, express js, heroku tutorial for beginners, create a website using heroku, free web app heroku, free hosting nodejs, how to upload to heroku, ejs, express, mysql, mysql workbench, create database, ejs view engine, nodejs express server tutorial, how to create server in nodejs using express, cleardb for free, raddy, raddythebrand, raddy the brand, rad

Id: ZZp0VIjTsbM

Length: 24min 20sec (1460 seconds)

Published: Wed Jul 21 2021