Deploying A React, Express, MySQL Website Tutorial

[@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

[@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!

[@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!

[@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

[@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!

[@MrGhostSniper95]

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

[@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 ?

[@TheMorrigan]

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

[@dharunanand9441]

Thanks!

[@PedroTechnologies]

Thank you so much for the support Dharun! Happy I could help :)

[@dharunanand9441]

@@PedroTechnologies been following your React CRUD tutorials and for a beginner I’m doing much better than I hoped

[@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!

[@martinchou1]

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

[@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.

[@davidmel9069]

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

[@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!

[@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?

[@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!

[@harisvasilakis6166]

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

[@devongrey1237]

youre awesome man, this was insanely helpful!

[@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!

[@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?

[@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?

[@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

[@x225francx]

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

[@benrogers5736]

Thanks so much man, this tutorial was really helpful

[@PedroTechnologies]

Glad to hear it!

[@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?

[@tmvideos3470]

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

[@PedroTechnologies]

Glad you liked it!

[@brunosoltoo]

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

[@aneeshbhattacharjee1197]

18:28 the schema has been imported, but where is the data? is there a way we can import the data as well?

[@anirbanchakraborty4175]

I wonder how 🤨

[@arikmosfor4907]

best video and explained well in youtube.

[@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!

[@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

[@ilhamadiputra4745]

bookmarked! because my little project haven't completed yet

[@PedroTechnologies]

Awesome! See you then!

[@barakm25]

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

[@krystalcanfield9492]

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

[@tegaogheneovo5881]

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

[@alvaroambiorixmarcelinotav6536]

How can I do it in firebase hosting?

[@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?

[@joaomendes6802]

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

[@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!

[@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!

[@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 :)

[@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

[@him99ful]

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

[@Mor3311]

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

[@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.

[@ryhorecords]

My friend you stopped the video right when I started having issuess ...when you finished building did the project start right away? I wish I saw what kind of configurations you did

[@גלמלאך]

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

[@ajitroy1966]

Thank you so much for this tutorial ❣️

[@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 :)

[@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

[@robertcampos7902]

I really appreciate bro this video, so helpfull

[@PedroTechnologies]

Glad it helped!

[@hk_driving3178]

Good work 👍 Keep it up 💪

[@PedroTechnologies]

Thank you!

[@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!

[@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)

[@genisyys_5710]

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

[@AIO2005]

which sever you used for my sql i am using xampp plase let me know

[@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?

[@iwayanbagus2271]

thanks for sharing! helpful!

[@PedroTechnologies]

Glad it was helpful!

[@一脸滑稽-k5v]

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 ?

[@一脸滑稽-k5v]

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

[@yujingyao2862]

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

[@DanielFernandez-eo2ry]

Thanks a lot this was really helpful

[@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.

[@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.

[@guillaumedrolet9486]

what did you do with the core error i've got this thks

[@PedroTechnologies]

You need to apply the cors middleware (app.use(cors)) and make sure u dont have yarn and npm in the same project

[@makombekepha]

@@PedroTechnologies I still have the CORS error please help, two weeks now

[@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.

[@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

[@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

[@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.

[@anonymoussaif7361]

Ur just amazing bro

[@alexandreborges7296]

Opa bem legal o tutorial Pedro, mas tenho uma dúvida de noob: Eu fiz o build do client e subi pro meu servidor e funcionou o client, agora não sei como faço o build do server??? Meu servidor é um vps da HostGator, eu cheguei ate criar o usuario do banco criei o banco de dados em MYSQL e adicionei meu Usuario, mas não consigo fazer o backend no caso meu server ficar startado, para meu website(frtont) conversar com os dados. teria como fazer um turotial desse estilo fazendo um crud e subindo num host pago, estilo hostgator, bluehost, hostdime e etc......???

[@ismaelkf]

can you do it for hostinger?

[@grmedia6892]

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

[@LuisHernandez-so8vu]

Hello Pedro, did you find any solutions for the cors error ?

[@rockycalo2608]

Pedro required the credit card if you make a heroku account?, or is it okay that I don't have a credit card.

[@PedroTechnologies]

Hey, they require a credit card if you want to use their mysql database service. Despite it being free, they still require it for some reason. They won't charge the card if you choose the free option.

[@rockycalo2608]

@@PedroTechnologies alright! Pedro...thanks for that.

[@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.

[@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

[@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!

[@oceanryan9660]

Hello, can you teach me how to fix the cors problem?

[@PedroTechnologies]

Many problems can cause issues! Maybe you need to apply the cors module (app.use(cors())). Or maybe its cause you have yarn and npm on the same project.

[@louisefrylinck3859]

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

[@gauravkumarsharma5904]

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

[@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.

[@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

[@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?

[@manuxgp]

Niiiiiceeeee. Thank you a lot :)

[@PedroTechnologies]

Glad you like it!

[@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

[@nicknameis]

I am wondering what should I do if I have 30 tables with different relations.

[@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

[@GeistDev]

How did you fix the error at 26:30 ?

[@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.

[@romimaximus]

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

[@PedroTechnologies]

Thank you for watching!

[@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 ?

[@audioaestheticinc4107]

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

[@teddy3387]

hi pedro i'm having a problem it seems like my heroku keep showing "Application Error" stuff, at first it was working perfectly but the next day it isn't, why i wonder?

[@PedroTechnologies]

Hey, so heroku has some problems which is pretty annoying, basically they don't provide any help with catching and handling errors. So this might be happening if you have some part of ur code which u are not handlind errors. For now you can run "heroku restart" and it should restart the server!

[@teddy3387]

@@PedroTechnologies Hello, it is just as you said heroku have several problem with handling errors, i tried to restart it and it works! thanks!!!

[@romimaximus]

what´s the flag " - a " on the git commit , i know the flag " - m ", but the flag " - a ", i never used it...thankx !!

[@PedroTechnologies]

When u are using Heroku u commit with the -am flag

[@PedroTechnologies]

So its like: commit -am “message”

[@romimaximus]

@@PedroTechnologies Ok...thankx Pedro...👍

[@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!

[@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

[@mahdibackar7015]

youtube pay this guy