Deploying A React, Express, MySQL Website Tutorial

hey guys how's it going i'm back here with another video and today i will be making a video which was requested by a lot of you guys which is basically a video explaining how to deploy a full stack application using react node and mysql so basically i made one deploying a burn application however it's a bit different for if you have if you're using like an sql database like mysql and we're going to be deploying our backend our server in heroku and our front end in netlify now if i forgot to open up the website here but it's not lo fi this website right here so basically you can see the application we're going to deploy is this application right here i made a tutorial series a long time ago and i taught you guys how to make this apparently it's like a simple application as you can see and it's like a it's a full stack application so you can like like stuff you can see like it is all retrieved from the database if i refresh the page all this information is retrieved from a database and that is a mysql database that currently is running locally and you can see that our project is very similar to what i usually make so i have a folder for the client which is the react part of the project and i have a folder for the server which is the node and express part of the project and you can see right here we are using mysql if i go to config we're using mysql as you can see right here and we're basically going to be deploying everything into heroku so the first thing we got to do is we actually got it got to basically register our application in heroku and if you don't have like all the links for this website will be in the description so basically you need to go to heroku and when you log in when you create your account whatever this will be prompted obviously you won't have all these applications in your in your account however to create a new application you got to click on this and click on create new app and then it's going to prompt for you to write the name of the app i'm going to call this mysql deploy heroku something like this you can put the name this is going to appear in your api url so choose something that like keep that in mind and then you got to choose a region i'm going to choose the united states because it's closer to where i am and i'm going to create the app so when you click on this you'll see a bunch of information will be prompted and the first thing you actually need to do is you need to log into heroku so basically you're going to go here to your application and for now i'll just stop my application from running on my servers and we actually only need this right here i'm going to close this basically this terminal right here is inside of the client folder so it's inside of here this terminal is inside of the server folder you can see it's saying client and server so in the server folder i want to say heroku login and you'll see that a bunch of information like it will say press any key to open up in the browser i'll just press any key i'll press p and you'll see that it will automatically open up here in my browser this will be prompted and i can click on login and you'll see that after i click on this it will say logged in and to check if you're actually logged in you can just go to your terminal again and it will say your email saying like logged in as your email so after this we can basically just um start deploying our application to heroku so how do we do that well first of all we gotta initialize a git repository in our server folder right so we gotta say git init and we'll initialize an empty repository then we have to remote connect to the reroku repository by doing this and you can just press enter you can just copy that press enter you can see it was correctly connected then you have to do the same thing you always do by adding to your repository then committing and then pushing however the only two differences from normal github and heroku github is basically by when you commit you got to put negative am instead of negative m for the command and when you push you got to push to heroku master just like this so i'm just going to copy each one individually so first git add press enter then git commit and i'll just leave it this message right here let's see i'll commit and then we'll push to heroku let's see right here so let's push okay it's going to okay so let's push this to heroku and you can see it will start pushing everything to our app and when it finishes pushing you can just check right here by clicking on this button right here and if it is working obviously we haven't pushed it it will that the application will start running on this url right here and you can see it was rejected for some reason let's take a look um i'm going to take a look to see what happened and i'll come back in a second okay guys so apparently i figure out my error my error was that i had for some reason in this old application i had yarn and npm installed here so now that i raised yarn i'll just come over here and say git add dot then git commit negative am again and say first commit then i want to push heroku master and we'll see that it will start deploying everything and if we are lucky there won't be any errors at the end i hope so after it starts yeah i think i think that it worked so after it finishes deploying to heroku you'll see that if we open up the app i'll see if it yeah it's starting to deploy as you can see right here and it's compressing everything it's building and after we finish that we still need to make some changes to our package.json and yeah finally it was deployed let's refresh our page and there probably should be some errors if it's correct let me take a look it will have a hard time trying to open up again because we're making several requests when we open up our project however as you can see it's waiting for the project to be built so while we're doing that we have to make some changes to our package.json so that it knows that whenever we run our application we want to start with our index.js okay guys so as you can see right now it's saying application error and the reason why it's saying that is because we actually have to make some changes in our application i just made them right now and it is something really important basically remember when you create your simple express api in your index.js or in your server.js whatever you always say something like app.listen and a port right so in order to make it work with the with your heroku application you have to write over here that you wanted to accept the process.nv.port and the reason for that is because uh heroku in itself obviously it has its own port that it wants the server to run and the variable is hided inside of heroku so if we want to access that variable we don't know it specifically we have to write it like this so here it's basically saying that when we try to run our project in heroku it's going to access the env variable that exists in in heroku itself so i just deployed it let's check if it's working now and i'm going to refresh this for some reason it it keeps taking a long time to refresh but i'll come back when i see it okay guys sorry for the error again and i'll be making a bunch of them in this video because it's just such a tedious and long process to deploy an application and i always end up making some mistakes so i think it is nice actually to show you guys all the mistakes i make because you'll definitely encounter them i don't want to basically show say to you guys that i'm following everything perfectly because it's never the case and if i find any errors there's a chance you guys will too so the error i just committed was because we had to put two two lines to basically say or port and i deployed it again by just saying git add git commit and get push and you can see that now our api is actually working if we come here to our url from heroku you can see it's saying cannot get slash if we try to go to our get route it won't work because we currently haven't deployed our our how can i say our database but we're going to do that right now and you can see that our api is fully working another thing that is important to you guys is if you guys want to make sure like if it's not working for you guys check to see if your package.json you have a script over here that says start this is extremely important a lot of people don't and this start script will basically you have to put node and the name of the file you want to start your application in which in this case is index.js however you got to make sure that you put this right here or else it won't work because heroku won't know which file is the one the server starts in so now that that's said and done let's start working with our mysql like setting up and deploying our mysql database so basically this project right here you can see that we configured our mysql database in this file right here and it's a simple connection as you can see right here it's from our localhost our user is our root our password is just password that is set and the database is everything was created locally so how do we put this into the into a server into the cloud and how we actually uh serve our database um publicly right so how do we actually do that well one thing is extremely important i visualize my database using mysql workbench and it doesn't really matter which one you use but i'm going to show you guys how to do it with mysql workbench i recommend using it but it's all it's literally the same thing because what you got to do is you got to create the connection with uh deploy your like create a database online with heroku and you got to connect to it through this right here if you're using sql pro you can do the same thing but if you're using phpmyadmin you can do the same thing it doesn't really matter but we're just going to connect everything in our mysql workbench and that's what we're going to be doing so in order to actually connect you got to come here to your basically to this right here to your heroku and you're going to go to resources why resources because there is an add-on in heroku which allows you to have a mysql database so the add-on is going to be the clear db for mysql and by the way i gotta mention to you guys this is free completely free the access for the database is free there are some premium and paid options however it's not necessary at all the free version is perfect however for some reason heroku asks you to put a credit card i've put my credit card out like a long time ago never got charged and charged because i never pay anything like it's it's for free right so they won't charge you um they won't charge you anything if you choose the free version so don't worry about that i work i i can vouch for them so i wouldn't be scared of putting my credit card over here so we're going to submit order form for the free version and you can see that it's going to automatically create our database online for us here right here so why is that important well with this we now have access to the variables to now our online database mysql database has been created and in order to access the information to connect because we got to find our host our user and our password and then we can create a database inside of it but basically uh this is the idea right we just deployed our mysql database we just need to grab the variables that make it so we can connect to it so in order to check those variables we have many different ways to see it i'll go to settings and you'll see here in config vars you can click on reveal config vars and you can see that after connecting to your my clear db database you'll see that this variable right here will have appeared in config vars and this is basically the information about your mysql database i would click on this right here and i would grab the information and i'll just copy everything for now and we're going to dissect what this means when i show it to you guys so i'm just going to copy them please don't change anything this is perfect so right here and i would come here to my to where i configure my mysql database in my project and i would just paste it down here so what does this means i mean right basically each piece of information here is the root the password the host and the database i'm going to show you guys which one is which basically right here from my sql the first information we get is the username so over here from this to this column right here this is the username for the database so we can just copy this and paste it over here so it's this first part over here then we can grab the password so this right here until the add symbol so until this right here this is the password you can paste it over here and then over here this is the host so this thing over here saying us in my case usc br east until the slash that occurs over here this is our host and finally the database is called heroku and a bunch of strings over here i'm just going to copy until the question mark so we can just copy this we can paste it over here and this is the information for our connection now we have connected to our database and you might be asking well what does that mean well now we are actually connecting and everything everything should be working however there's a difference in our local database so in my project here i created a table that serves this database right here the table looking at my api apparently the table is called posts right i think it's posts but there's a table in my database my local database called posts and in my deployed database there isn't any tables so we actually have to create a table in it you can do it in many different ways now that you have the connection information but the way i like to do it is by using mysql workbench so in order to create a new connection in this you need to click on the plus sign and you can see that this will appear right here you're going to put all the different information you can also put a connection name here so i'm going to call it mysql db no actually mysql deploy uh whatever just mysql deploy you can put a name this is a name for you to remember which project this is and then you're going to copy the information that you just selected over here for example we got to copy the host so i'm just going to copy the host and let's come over here let's go to the host and just paste this over here then we gotta copy the username which is this over here and let's paste it over here then the password is important because we gotta copy this right here and we got us for some reason i'm using i'm using mac so they ask us to to store it in a keychain but you can just store it wherever you want just paste the password that was over there and now that's done and the schema is basically the database like the the default table but we won't be doing anything right now um we'll just leave it blank and we're going to create it later so when you finish this let's test the connection if it works great if it doesn't this will appear if you're using mysql workbench this won't appear if you're using sql pro don't worry just click continue anyway and successfully make the mysql connection meaning it's working so let's click ok and you can see that now mysql deploy will appear over here if you put the correct information it will appear many of you guys might be wondering what about the port there's a port option over there don't care like just put the same like don't don't worry that what i mean that's what i meant don't worry we just put the same as i put over there i think it was 3306 or seven it doesn't really matter just click on this and the same message i think will appear i'm saying that it's a warning let's see yeah now we can just click continue anyway and you can see that now we have access to our publicly deployed database it's over here but obviously there's no tables so what i want to do actually is i want to create a table exactly like the one that i have on my local project and i'm going to access my local project right now so i'm going to come over here and open this local instance just access my my local database you can do the same let me take a look what project is this i remember this product this project was called um let me see blog posts so i think this is that where we have the tables and this is the table we actually have so what i want to do is i want to take a look at this table so when i select rows i just want to take a look this is the project this is the database i had locally so we had an id a title a post text a username a data posted and a likes so what i want you guys to do is to copy this date this table right so what what i like to do is actually i like to come over here and just click on copy to clipboard and create statement what this does is it will basically generate a create statement for this table and you can just come over here to your like the database you deployed you can just paste the create statement and it will create a database just the same way as you had on the locals uh database right so we're going to run this i think there will be some problems because usually there is when you're doing this and i'm going to fix it yeah you can see right here if i when i run this it says okay guys so i finished and i fixed the error and apparently because we had to set up a default schema so what does that mean basically we can come over here if you to do this you can come over here and you can click on set as default schema you'll see that this call this uh like database over here will become like bold and right now but the only thing you gotta do is you gotta delete the first part of the create statement that we had so after like until default you can delete this and just run this query again you'll see that the information will be created you can see right here it's green meaning our query worked and we have created a table exactly like the one we had locally and to check if the table is here we can refresh our schemas and our table should be here i'm going to refresh my tables as well let's take a look if it's working tables fetching it's just grabbing the information from the server and that's like obviously when you make queries and it's on the database that is not locally anymore it's going to take a bit more so my internet isn't that great so this is why it's taking a bit but you can see that now um like an arrow appeared here meaning that we had more than one table and here posts now is a table in our database if i select this you'll see that it is exactly like the the database we had locally the same columns everything the same which means it's great right so now that we have this done we have deployed our database we deployed our api the only thing we gotta do now is we gotta deploy our front end and connect it to our back end so what do i mean by by connected to our back end well if you come over here to your code i'm gonna stop working on my back end over here i'm just going to open up my client folder which is my react my src you'll see that now i have certain parts in my application where i make api requests to my to my old local server but every time i make an api request i i used your the url for localhost and that's not correct because now our api is deployed on a public url so you got to change all of those you got to copy this right here and replace it for the localhost part like every time you called an api request to localhost so i'm just going to copy and paste it over here and remove this so let's paste it over here as well and that's fine let's take a look no more api requests in this file let's take a look at another file this one right here let's paste it over here as well and is there any other api request here no this one over here is also an api request so let me paste it over here that's fine so now this is done we have finished uh changing our basically our urls for our front end the only thing we have to do now is deploy our front end to netlify so a great way to do this is actually going to your github and creating by the way i'm plugging my github follow me on github because i i have a budget repository so you guys want to check it out but basically what you got to do here is you got to create a repository for your front end so what i like to do is uh give it a name like blog client so this project was was a blog website so i'm just going to call it blog client and it's going to be public and that's fine and we're just going to click create repository and you can see all this information appeared so i'm going to basically go to my client folder not my my server folder my server terminal anymore so the client terminal as you can see right here and i'm going to do all the things related to deploying and publishing and like pushing uh get a file into our folder into github so first of all get in it then git add readme i'm going to add a readme to mine so readme dot md and then i'm going to git commit negative m first commit then i'm going to just actually i can just copy and paste this right i'm just going to copy and paste everything here and let's do this just press enter you'll see it will start pushing to our public repository that we just created in github so let's refresh this you'll see that now as you can see okay okay so apparently it just added the readme file but let's take a look and and actually add more stuff so git commit negative m first commit again oh we gotta add everything again so git add dot then git commit negative m and first commit again sorry about that and then git push and that should be fine yeah now it's going to push everything to github and we can see if we refresh the page you'll see that our src our public folder everything appears over here because that is our client folder right our react application is inside of here which is great and everything is working so now that that's done i'm going to we're going to come over here and we're going to make the connection to netlify so in order to deploy to netlify we got to come here to the website netlify.com the link is in the description then we can click on login and if you don't have an account then just create an account is free and you can see right here a bunch of stuff will appear but probably if you're new no websites will appear over here but it doesn't really matter because the only thing you got to do is just click on new site from git so after clicking that it's going to say continuous deployment because there's two ways of deploying a front-end application to her to nullify one of them is just drag and dropping the folder inside of there however every change you make to application you would have to drag and drop the folder again and the other way which is a lot more efficient is just with continuous deployment with github what does that mean well every time we make a change in our application and we push it to github it's going to trigger automatically a change in our website it's going to build again and our whole website will be updated to the new standard so what we got to do is we're going to come here to github and it's going to appear we got to authenticate ourselves i already connected my account my github account to this so it's going to automatically appear here and the only thing we got to do is find our get repository that includes that that we created right now so this one is block client so i'm going to click on blog client and it's going to ask for a bunch of information like branches to deploy we're going to choose main then a bunch of stuff and one thing that is important here right here is where most problems occur and the reason for that is because i don't know why but now if i changed some stuff on their basic build settings and by the way if you're using yarn this will say yarn if you're using npm it will say npm but it doesn't matter because the same thing will be applicable for both your project won't deploy correctly if you don't come over here and say c i equal to yarn build and this is extremely important i actually don't know why but this is what was this literally fixed a bunch of errors that i spent days trying to figure out how to fix and if you're using npm it's just going to be ci equals npn build and that should be fine but we can now click on deploy website so over here deploy site and it's going to start deploying however there's something important it's not going to actually deploy right now correctly because we haven't actually created a build version of our project in our react application and what do i mean by that this is the final thing that we have to do we're gonna come here to our project right over here we're going to open up the react section so let me click on this you'll see the folders will appear here and my computer is super slow because i just have so many things open and you can see right here this is all appearing this is the react part we're going to come here to the terminal where we have our client and we're going to say yarn build and when we say that it's going to start creating a build version of our project and after it finishes creating what a build version is is basically it's going to condense all the information regarding the final version into a single folder and this is actually the folder that uh nfi will try to access and it's going to start building i'm going to come back when it finishes building just to show you guys uh what to do next okay guys so i'm back and actually i made a lot of changes because uh some errors were occurring and like i didn't change anything that we did i just finished up and everything is working so i'll just show you guys exactly how to get to deploying from the point i left off so basically we left off by basically creating the build folder and after it's actually built we can just go to our netlify website and it should be working you should be clicking on this link if it isn't working please leave a comment down below i'll help you i'll answer to every single question so please leave a comment down below and i'll help you but it should be working if i click on this as you can see right here should be opening our website this is our website and right now it's not showing any data but it should be showing data actually because i created some i create i added some data to my database as you can see right here i added one row to my database and it should be displaying but it actually isn't so i'll inspect elements to see what happened and the console as you can see right here there was some problems with course so i'm gonna fix this error and i'll come back in a second okay guys so as you can see right here ignore what i said like the error was something dumb it had nothing to do with the tutorial but you can see that now in our netlify app if i refresh the page we have a full front end i know this project is ugly but it wasn't the point the point was just showing you guys how to deploy react and uh in a node.js and express backend with mysql and you can see clearly we have here our data from our mysql database and one thing that is extremely important is that normally there's a lot of issues when you have multiple pages and nullify however you can see that if i go to create post it actually goes to the create post route and to fix this because it won't work for you if you initially feature if you just deployed it if you try to go to another page and you're using recruiter dom it won't work but to fix it you have to come here to your client folder so i'll just open up my client folder and you have to add this file inside of it so inside of the client folder you have to add a file called nullify.toml and inside of it the only thing you got to put is this right here so redirects from you're basically allowing every single page to have a redirect in your netlify app and this will fix every issue regarding that so if you're using react or dom you have to add this file if you aren't then don't worry you don't have to add anything because your project should be working you can see clearly that our data is being queried from our database and we're actually getting the information so that's basically it you can see our project is running we have everything working in our repository and we have our project working in heroku and our to be mysql database so that's basically it i really hope you guys enjoyed this video i know there were some issues we got like during the video but as i mentioned on my moon video which also had some technical issues i actually like having those issues because i remember watching so many videos on how to do some stuff that are so tedious like deploying and hosting an application and they just did it perfectly and whenever i did it there were so many issues that i just had to spend like hours on stack overflow so i really hope i was able to help one of you guys or multiple of you guys uh by basically addressing those issues that i encountered so yeah i really hope you guys enjoyed this video if you enjoyed it please leave a like down below and comment what you want to see next subscribe because i'm posting every single day and a lot of you guys requested this video so i decided to make it so yeah i really hope you guys enjoyed this video and i see you guys next time

Channel: PedroTech

Views: 41,756

Keywords: crud, javascript, learn reactjs, mysql, nodejs, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js, node js, express js, sequelize node js, sequelize, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, how to deploy a mysql database, deploy tutorial, deploy react app to heroku, deploy react app, netlify, heroku, heroku tutorial, deploy express app to heroku, deploy mysql to heroku, react nodejs mysql, rest api

Id: lwOsI8LtVEQ

Length: 28min 57sec (1737 seconds)

Published: Tue Dec 01 2020