Deploying A React, Express, MySQL Website Tutorial

In this video I will teach you guys how to Deploy and Host a Fullstack ReactJS, NodeJS, Express, MySQL website in Heroku and Netlify. We will also be using cleardb as the database.
Links:
dashboard.hero...
www.netlify.com/
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
Please leave a comment on what topic you guys want me to cover next!
-
❤️ Support the Channel: / pedrotech
📞 Tutoring Session: www.fiverr.com...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/mac...
Email: [e-mail]
Tags:
- Deploying
- Fetch
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

[@hacza212]

I'm so glad I found this hidden gem, I find deploying so confusing and it's so hard to find such detailed tutorials on it. Thank you Pedro

[@PedroTechnologies]

You're very welcome! I am really glad you liked it!

[@steellegs3270]

3 years later and it still works! Before trying this one I struggled with the Railway db--a similar tutorial suggested that one, but this is the one that I got working. Yay!

[@joehutchinson248]

is cleardb mysql still free? it isnt for me

[@meeee884]

@@joehutchinson248 nah it all paid now

[@joseisraeldiazzapata5179]

aaaaaahhhh this is awesome asdasdasd, a lot of channles only teach deploy with mongoDB, mongoDB all day omg. Finally a tutorial for mysql, thank you so much Pedro, this is perfect

[@PedroTechnologies]

Hahahaha I apreciate the support! If you have any errors/questions please let me know and I will help! Good luck!

[@blops649]

You are my hero, every issue that I ran into you addressed and fixed perfectly. 10/10 thank you

[@PedroTechnologies]

hahaha Great to hear!

[@tegaogheneovo5881]

pedro gang

[@learningcore289]

Hey! I am also getting the same CORS error that you got at 26:27 while deploying my react app I don't know how to fix it. Please help bro !! Thanks😢

[@boogfromopenseason]

Did you get the solution? I am having the same problem. He probably should've went over it in the video.

[@softblood1941]

your videos are charm ! better than many popular coding channels. Iam glad i found your channel, many thanks from greece

[@PedroTechnologies]

Really appreciate ur comment! Makes me happy to see I am being able to help you! I am glad you like my channel!

[@ammarali3589]

Anyone who is facing CORS issue just make sure all the code is pushed to there respective repos server/index.js code as well. and then create netlify.toml file inside the client folder and paste this below code: # The following redirect is intended for use with most SPAs that handle # routing internally. [[redirects]] from = "/*" to = "/index.html" status = 200 [[headers]] # Define which paths this specific [[headers]] block will cover. for = "/*" [headers.values] Access-Control-Allow-Origin = "*"

[@suem5721]

Thanks to your video, i was able to make my college assignment easier! 😆And also back-end developing became interesting;) i’ll cheer for you from South Korea😃

[@PedroTechnologies]

Glad it worked for you! I am glad I was able to help!

[@realhavir1295]

TO ANYONE HAVING THE CORS PROBLEM, The solution is simple and I found it by going through the app logs. Solution: const PORT = process.env.PORT || 3001; app.listen(PORT); Heroku needs to set it's own port, that's why your app was going bonkers.

[@duongnguyenlenhat3058]

Thank you so much Pedro, I am from Vietnam, your work helped me a lot! Keep these tutorials on FIRE! I appreciate a lot

[@MrGhostSniper95]

thanks man, since i found u my life is easier.

[@TheMorrigan]

bro u made my whole tasks in my internship easy, thank u!

[@davidmel9069]

Big Thanks my man. A perfectly explained tutorial. You're my Hero ♥️

[@ThColinPereira]

thanks for this video pedro! this once again helped me a lot! looking forward to seeing more of your amazing content

[@PedroTechnologies]

More to come!

[@x225francx]

Bro if your video didnt exist , i'd never figured out how to deploy a react app even on a test server , +1

[@martinchou1]

I'm so thankful for this awesome tutorial! You helped me a lot. Finally I can public my project.

[@connergoldberg]

Thank you so much for this well put together and well thought out video man. Keep up the good work!

[@PedroTechnologies]

Glad you enjoyed it!

[@lucasjamilpodestaalvarado7463]

Thanks for the tutorial. This helped me a lot for the deployment of a MySQL Server. Now me and my team can work with the free DB!

[@chovbee]

Hey man! Awesome video! I was just wondering, how did you solve the cors problem? I started getting that error but I have the cors package being used in my express app so I'm a little confused. Thank You!

[@jonashafner4656]

I have the same problem, could you solve it?

[@jeanelodie222]

@@jonashafner4656 Do you have found the answer ?

[@dereklofton749]

Pedro the error that you received in this tutorial "blocked by CORS" is exactly hat I'm getting, what did you do to correct this?

[@apeiron4409]

Thank you for this video! It really helps! I have some questions 1. Is there a reason of deploying client and server separately instead of deploying all together in heroku? 2. After making a build in React, do I need to build everytime again when I change the code?

[@PedroTechnologies]

Hey, thank you for watching! The reason why I separate the client from the server when deploying is cause I just prefer this method altogether. Separating them is more able to scale, and will provide me better info regarding errors. For example, whenever there is something wrong that I see in the heroku console, I know its caused by the server. I usually recommend separating, but for small scale projects its not necessary!

[@apeiron4409]

@@PedroTechnologies Thank you!

[@INfoUpgraders]

Great video, glad to see you're doing something between/after the puppeteer series. Although I don't recommend these free ways but rather paid ones!

[@PedroTechnologies]

Thank you! I am still doing the puppeteer series, should probably finish it next week. I will be alternating between posting for that series and other material! I am also preparing some long term videos like a full GraphQL Beginner tutorial, and some videos on Sockets using React!

[@INfoUpgraders]

@@PedroTechnologies very nice, can't wait!

[@margaridalopes5810]

Hey Pedro! Great tutorial, as always! I'm having that cors problem :( How did you fix it? thanks in advance :)

[@nearmint8350]

any solution?

[@reggireggie]

what was your cors problem?

[@peterkerr9685]

Hi, I've got my server and client directories separate with a Git repository in the parent directory containing them both. Is there a way for me to host the whole thing on Heroku without needing to have separate repositories for both the client and server?

[@stephanpaul8954]

Hmm so I all seems to be working, but Its not getting any data on the pages where I have my axios calls. My network tab gives me a 503. But I don't seem to have errors anywhere.

[@devongrey1237]

youre awesome man, this was insanely helpful!

[@muhammadhaiqal531]

Nice thank you for showing all of the mistakes, and error! it really helped me to avoid the same problems!

[@abirhal2391]

Is you use an paid plan on heroku? because I did get that interce like him on my case?

[@Vishantrastogipr]

I can't get the data from database, API is being hitting and frontend works too but can you please tell if we need to change something more in node app to get/post the data from db?? Error Code: ECONNREFUSED, ErrorNo : -111

[@nearmint8350]

same error! did you solve it?? please :)

[@benrogers5736]

Thanks so much man, this tutorial was really helpful

[@PedroTechnologies]

Glad to hear it!

[@ilhamadiputra4745]

bookmarked! because my little project haven't completed yet

[@PedroTechnologies]

Awesome! See you then!

[@user-lm9ve2js2t]

Hi, I've problems, I tested with postman and my heroku server seems to be working. However, My Netlify React App cannot send request to Heroku. It says 404. I set proxy in React package.json to be the URL of Heroku server. Is there anything wrong?

[@abirhal2391]

any solution ?

[@user-lm9ve2js2t]

Oh ha ha it was long time ago I already forgot how I solved it ~~~ I think maybe I set some configurations in one file?? and later it worked@@abirhal2391

[@andrewr4908]

There's something I don't understand. You run 'npm build' to create the build directory. However, this change was 1. not pushed to github, and 2. the .gitignore file ignores this build directory anyway. So how does Netlify have any idea that the build folder exists?

[@TheLucioGamePlay]

It's when you're creating your netflify site, you're adding a build command that runs the build on your repository files

[@tmvideos3470]

Thank you so much! This video is a masterpiece :D

[@PedroTechnologies]

Glad you liked it!

[@Vir7uaLGameplays]

Hi Pedro first of all I love your tutorials. Do you think you can make a tutorial similar to this one but using only Cpanel? No Heroku, no Netlify because I already own a domain and I wanted to make my app work intirely on my hosting service

[@barakm25]

thank you so much for uploading this great tutorial!!!

[@harisvasilakis6166]

I get the error you get at 26:29 , how did you fix it??

[@alvaroambiorixmarcelinotav6536]

How can I do it in firebase hosting?

[@Mor3311]

Great tutorial, helped me a lot!! thanks so much! :-)

[@jlopezz310]

I am glad I am making progress. I was able to setup the Heroku and Netlify. I have the build already deployed on Netlify. But why does the website load the page for 1 second, then goes to blank white screen after?

[@PedroTechnologies]

Hey, I have never seen this. Can you send the link here?

[@arikmosfor4907]

best video and explained well in youtube.

[@AnthonyTurtlesDude]

Hi Pedro, I'm working with something similar but with phpmyadmin. When I go in to change the axios calls from localhost what should I paste there instead? Would appreciate the help if you can!

[@joaomendes6802]

Hey, thank you so much for sharing it! Congratulations!

[@brunosoltoo]

is it a better idea to start developping directely in the database in the heroku, instead of locally?

[@tika8134]

Hi Pedro! I'm also facing the same CORS problem at the end. It says Access to XMLHttpRequest at 'myherokuurl' from origin 'mynetlifyurl' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Could you share how did you solve this. Thanks a lot!

[@ammarali3589]

Did you push the server/index.js file into the repo again after mentioning db creds? I was also facing this cors issue and now its fixed because I forgot to push the code after making changes to db creds.

[@ajitroy1966]

Thank you so much for this tutorial ❣️

[@p0mf47]

$ git add . error: open("e tell me who you are."): No such file or directory error: unable to index file 'e tell me who you are.' fatal: adding files failed

[@37375297]

Hi man, can I ask a question unrelated to the video? In your video where you teach how to deploya full stack project 'Deploying A React, Express, MySQL Website Tutorial', I managed to do everything correctly. But after a while the heroku connection with mysql drops. When I do git push heroku it works, but if I spend a few minutes without using the PC, it seems that the heroku url no longer connects to my sql. Do you know what it could be? Thank you very much, I'm a big fan of yours

[@mahdibackar7015]

youtube pay this guy

[@krystalcanfield9492]

Awesome video! I had to change it to git push heroku main to get it to work.

[@hk_driving3178]

Good work 👍 Keep it up 💪

[@PedroTechnologies]

Thank you!

[@him99ful]

Amazing. You explained very well. One doubt . After creating npm build, we need to push it again right?

[@robertcampos7902]

I really appreciate bro this video, so helpfull

[@PedroTechnologies]

Glad it helped!

[@tegaogheneovo5881]

ohh shiit morty pedro got it ..deploy finally lets go

[@iwayanbagus2271]

thanks for sharing! helpful!

[@PedroTechnologies]

Glad it was helpful!

[@bhargavgopallanke9145]

Hi Pedro, I'm getting errors while deploying the client (Front-End) in netlify. In the post.js page, I'm getting an error ("React Hook useEffect has a missing dependency: 'postId'. Either include it or remove the dependency array react-hooks/exhaustive-dep "). Please help me to resolve this issue. Thanks in advance.

[@PedroTechnologies]

Hey, apperently u have a useEffrct with a dependency called postId which is undefined. Can u send here the code for that useeffect?

[@muazzakaria6390]

I got an error when trying to create table because i got a json in the column. It says "JSON IS NOT VALID IN THIS POSITION, EXPECTING BIGINT, BINARY ..." Do you know how to resolve this issue

[@nearmint8350]

Hey Pedro! I am having some errors with deploying the node project! Do you have a link to the project? So i can follow your structure and adapt it? Thanks a lot :)

[@DanielFernandez-eo2ry]

Thanks a lot this was really helpful

[@csbraves2459]

Hey, Awesome work man!! I love your videos.... Please make a complete MERN stack playlist with any simple responsive mobile friendly web app, Kindly include registration/Login (authentication using JWT). Thanks!!! your tutorials are easy and highly knowledgeable at the same time..

[@PedroTechnologies]

Hey, thank you I am glad you are enjoying my videos! I plan on making a full Registration Login tutorial with a lot of stuff like email confirmation, changing passwords, jwt auth, and much more. I have 3 videos on the topic in my channel, I use mysql in them but the code for mongo should be very similar. Here is the playlist: kzbin.info/aero/PLpPqplz6dKxVC1RlVMH_LcZz2vUheC1-i

[@csbraves2459]

@@PedroTechnologies Thank you.. Now I am eagerly waiting for the course.

[@michellepark4294]

Hey Pedro, thanks so much for this tutorial! Extremely helpful - do you know if we can use the data export/import function in MySQL Workbench to copy over the tables instead?

[@darsek285]

I wanna know too!

[@webdev8457]

Bravooo bruhhhhh>>>>>

[@genisyys_5710]

when deploying, what do you use instead of the LOCALHOST as the URL in the axios.post request on your frontend?

[@aqsbaticos]

Is there any other way to copy your local database structure and data to the new database? I tried your method but I just thought it would be too taxing on my time to copy->paste the existing schemas, procedures, etc. I tried using dump files, but I unfortunately couldn't import it to the new database because of security reasons.

[@PedroTechnologies]

You can migrate by exporting the old database. Not sure how to bypass the cleardb security issues though

[@pavithra9049]

Damn! , this is what all I need , I have been searching for solutions literally for more than a week , Thank you so much pedro , but I do have a small doubt , is there any other way to connect the db publicly without the add-ons since I don't have a credit card . Please help me out!

[@manuelpineda924]

Niiiiiceeeee. Thank you a lot :)

[@PedroTechnologies]

Glad you like it!

[@javswbstudios458]

What is the difference between doing api calls the way you did it and putting a files on a web hosting server? is there a difference?

[@romimaximus]

Awesome ..!!! thank you very much..!!! 👍

[@PedroTechnologies]

Thank you for watching!

[@junjietan2668]

Hi Pedro, Just wondering why my backend api from Heroku site has turn to application error after second/third time refreshing. Is the server not robust enough or if have several issues during my api? I did checked for my API as well... Thank you very much.

[@user-px7gt7ig6t]

Great video! Is there an efficient way to change all the calls to the server instead of going through one by one and changing the Url?

[@PedroTechnologies]

Yes, you can just create an env variable that represents the server url

[@manojmenon5020]

Can you please help me with my question: i have base64 value in node js..but it gets stored as null in mysql...even i tried using blob as datatype but its not working.please help me

[@Sedent333]

hello, im trying to deploy a chat app with socket.io, not sql and in the minute 3:18 when i do heroku git:remote -a chat-app--socket-io it shows a message that says Error: Git must be installed to use the Heroku CLI , however git is installed and i can do git init without a problem, how can i solve this ?

[@PedroTechnologies]

Wow this is a weird error! Never seen this before, I will search it. If I find a solution I will let you know. I have deployed a chat app with sockets before and didn't encounter this, but I will look at it!

[@Sedent333]

@@PedroTechnologies hey everyone i finally found how to solve this but its a strange solution and i´ll share it in case it help someone, so when i go to github/settings/applications i have installed heroku and in autorized github apps and autorized oauth apps is all authorized but that was not enought to break the github security, i found that i have to create an organization, enter the organization menu, enter in "installed github apps" and allow the app in there, i dont remember if i did something in the security menu too, now why does that worked and why do i have to do that, no idea.

[@PedroTechnologies]

@@Sedent333 Hahaha "why does that worked ... no idea" every programmer relate to that! Thank you so much! This video showed me how many bugs and problems people can encounter while deploying. Ive been through many of those, but some of them I had never seen, so I couldn't help! Thank you for sharing the solution!

[@danielthefox2187]

Okay, now I've come across a new problem. I got the [remote rejected] error as in your video but I don't have yarn installed so I don't know what's causing the error

[@jasonmoldovan1551]

Hey Pedro, I finished the video and everything works great. expect for the fact that if I use my application just once, the backend from heroku shows that error that said, "Application error An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command heroku logs --tail". Again. It works fine after I push into the heroku repo but only for one use. If I refresh the page or try using a different device to test my project, the backend disconnects. please help.

[@PedroTechnologies]

Hmm this can happen because of many things. Can you link ur project here?

[@jasonmoldovan1551]

@@PedroTechnologies It's very odd. it turns off and on whenever it feels like.

[@asifrasheed4078]

@@jasonmoldovan1551 Did you find the solution of this? I am facing the same issue :(

[@jasonmoldovan1551]

@@asifrasheed4078 i honestly don't remember, sorry.

[@nathanfenoglio8699]

Everything is working except if I leave the website alone for more than a minute I have to heroku restart in order to fetch info from the backend again. Does anyone know of a way to fix?

[@PedroTechnologies]

Hey, since Heroku is free, they recently implemented a feature where if you arent constantly pushing changes or users are constantly not in the website, they shutdown the server. When someone enters again, there is a cold start and heroku waits a bit to restart, but the best way is to do heroku restart to immediately start it again

[@anonymoussaif7361]

Ur just amazing bro

[@Chow2323]

Se eu coloco o comando de build no Netlify, não é pq o próprio Netlify vai fazer a build antes do deploy? Sendo assim, era realmente necessário vc rodar o comando de build no local, se depois nem foi feito nem o push pro github? (Desculpa pergunts em portugues, assim foi mais facil hehe)

[@grmedia6892]

Great tutorial! Would you be able to do the same tutorial, except deploy to AWS?

[@rprokopiak95]

it's jusing Heroku mySQL extension. What if I have my own mySQL on the hosting? How to connect it to the react app? I am looking and looking and have no idea how to do it

[@rayvincentdelacruz8251]

Great man! If you have a chance to create a PERN Application (E-Commerce). It would be cool.

[@PedroTechnologies]

Hey, thanks for watching! I plan on making videos on larger projects like an E-Commerce website. However I am currently in UNI and I have a Job as a backend dev, so I found little time to focus on filming big projects. Since I usually do everything before hand and then record the video, it would consume a long time to make the series work. However when my winter break start I will try to post as much as possible!

[@PedroTechnologies]

I can make some Postgres videos if you want too!

[@rayvincentdelacruz8251]

@@PedroTechnologies Sure man! Appreciate it

[@utkarshaabhang8716]

Thank you so much for this video

[@PedroTechnologies]

Most welcome 😊 If u have any questions let me know!

[@utkarshaabhang8716]

@@PedroTechnologies ya ofcourse

[@nick-ui]

I LOVE U!

[@JonnyPerez-zr6lq]

How did you fix the CORS issue? i'm getting that error but i'm alreading using cors as a middleware in my server.

[@gauravkumarsharma5904]

Which is most popular ORM/ODM for SQL Databases based on Node.js?

[@audioaestheticinc4107]

asking, if i deploy medium enterprise site.. what database should i use.. or i keep using free version from heroku?

[@kenaida22]

I gave up, back to manual deploys..lol, i think it is because i did a git init at the base folder that holds the client and server folders. I think if you do the git init command in the client folder it will b e fine, but I already spent too much time on this..lol

[@PedroTechnologies]

Yeah hahaha The way I show in this video only works if you create 2 different github repos. One in the client and one in the server! Manual deploys work too!

[@abhishekrawat8579]

26:27 bro help me...there I'm getting same error even after adding origin to cors() 🙏🙏

[@navyaraga6504]

Even me too... I'm facing the same issue. Did you resolve it?@coder-abhk

[@emmanueldenis1063]

Bro, I followed everything to the T twice; the build and deployment was successful; however, the screen is blank. I build an app only for the front-end.

[@rohansingamsetty9636]

Thank you very much bro

[@PedroTechnologies]

Your welcome! Thank you for watching! If you have any questions please let me know!

[@ikrammaududi6205]

Hi pedro, thanks for your tutorial i follow your tutorial, but the problem is netlify can't connect to heroku, it keeps giving 400 error I think the problem is in the database. BTW, the main difference is that i use postgreSQL in the heroku, not clearDB

[@PedroTechnologies]

Interesting! I never tried uploading with Postgres so maybe that is the issue

[@ikrammaududi6205]

@@PedroTechnologies yeah, gonna do some more debugging with netlify and heroku My project works perfectly in local machine The concept is similar to your social media tutorial, it's just I add more features: two simple games, editing and showing profile The first time I watched your tutorial, several months ago , it was still around 2 thousands subscribers, now you hit 10k. Great work

[@Sedent333]

hello people, just in case i will share that in the minute 2:38 when is required to write heroku login an error may happen that says "the execution of scripts is disabled in this system" ,if that happens what worked for me was, to write in the searcher of windows "windows powersheel" inside write: Get-ExecutionPolicy -list if local machine says "undefined" write: Set-ExecutionPolicy RemoteSigned -Force then again write: Get-ExecutionPolicy -list , local machine should say now "RemoteSigned" now i whent to gpedit.msc from windows searcher again, to do that i download gpedit from internet, inside gpedit.msc i when to administrative templates/windows components/windows powershell/activate the execution of scripts, there press double click and inside change the "no configured" to "activated" and change "directived of execution" to "allow only signed scripts", then apply, accept and restart visual studio, that´s it

[@PedroTechnologies]

Amazing! That never happened to me, I think it might be a windows specific error. But thank you for sharing how to fix it, I really appreciate it!

[@yujingyao2862]

hi can i ask why cant we deploy front end and backend together on heroku instead of deploy frontend and backend seperately

[@u.tassinari2916]

Oi vc tem um canal em português ? Talvez vc deveria fazer um vídeo só com os erros frecuentes que aparecem na comunicação cliente servidor. Eu tenho um Mac OS 10 e não posso usar o MySQL workbench. Aí usei o myphpadmin e VSCode para o BDD. Tenho bastante erros quando eu quero mandar datos do front end até o servidor... Averiguei o password e não era isso... Será q é porque usei myphpadmin ao lugar do workbench ?

[@baldie7266]

Nice video! Thanks for the info! I have a question: there is a way to change that ugly domain name from Netlify to a custom paid domain that I already own? (Idk why I'm asking in english, your accent is clearly brazilian) valeu mano kkk

[@jlopezz310]

Pedro I really need your help, could I get some one-on-one assistance from you somehow? I just cannot setup my database to Heroku. I am getting multiple errors, its confusing me and hopefully you could help me out please. Thanks.

[@PedroTechnologies]

Hey, I actually have one-to-one sessions on Fiver. However heroku is a free service so it usually causes a lot fo errors, so I wouldn't feel comfortable charging for this. When it is a big application I usually deploy to aws or digital ocean. Let me know the errors u are getting and I will help you here!

[@ivandavidarangolizarazo2768]

WHEN I DEPLOY THE FRONTEND I GET THIS ERROR IN THE CONSOLE AND THE PAGE DOES NOT LOAD. Uncaught TypeError: Object(...) is not a function

[@aussy_mo]

{console.log(object)} you need to console.log the object you are trying to call for instance he used val. you arent pulling any data from that variable.

[@louisefrylinck3859]

Hi, what was the error you thought was a CORS error? I have the same issue. How did you solve it?

[@user-ir2vf2nw6d]

I have problem, my post request in netlify can not working , it just return 503 error, how can i solve this question? 😣😣

[@Keegan-T]

still helpful thank you

[@danielthefox2187]

when I typed git init, it gave me this error. "The term 'git' is not recognized". why?

[@PedroTechnologies]

That is weird! Do you have git installed?

[@danielthefox2187]

@@PedroTechnologies don't worry, I fixed it. I just simply restarted Visual Studio 🤦‍♂️

[@stevestef6613]

just subbed

[@PedroTechnologies]

Thank you!