Thanks man for this amazing tutorial.....I was recently working on a MERN Stack application and while the entire development process I was just worried about one thing which was deployment....Your tutorial helped me a lot and made the deployment process pretty simple which I used to earlier consider as a nightmare due to a lot of steps involved in it. You really deserve a lot of appreciation 👍👍👍
Hey bro! I don't usually leave comments on videos much. However for this one I have to. I have been facing issues with understanding and deploying (I would say especially deploying) mern apps . And this series you posted was super helpful. You kept it crisp and to the point. Not much beating around the bush or over explaining things. Thanks for uploading such good content. Keep up the good work bro!
Thank you again! I finally did what i wanted to, your tutorial is great in explaining things to beginners, in comparison to others tutorials where people just say do this and then do that, not explaining why
Love it man, worked perfectly, I had taken the whole day troubleshooting, looking for different tutorials without success but yours made the difference 😂
Dude. for the longest time I thought you had to deploy the server and client together. I've mostly focused on front end stuff and I use Vercel which I love. Thanks for this, I will continue using Vercel but now I know how to use Heroku for my servers :D
Thank you soo much pedro! Your videos always fixes the problem also you does the things that no other youtuber does that is tech like beginnner! I always recomend your channel to all my friends! always be like that brother
Hey Pedro , I want to deploy my MERN project but now the heroku was not free anymore ,and for frontend its easy to deploy on Netlify but what about backend can you give some suggestion.
Amazing tutorial, thank you. If you're app crashes and you are using environment variables in the .env file, create them first in Heroku under your app settings in Config Vars. This can also be the reason why your app crashes during deployment.
thank you pedro. Heroku deployment errors is moslty caused by forgeting the script :{"start":"node index.js"} and also using bcrypt for password hashing. so if you are using bcrypt delete it and replace it cryptojs which is another tool for password hashing
Here both back and front are deployed in different domain , i also did that , but the problem is with authentication , how to set cookies in client-side and how to pass it to back end
Thank you so much for a great video tutorial. This deployment process was really irritating me as I kept getting errors and finally with this video, I was able to successfully deploy my MERN stack.
bro i really appreciate this video, it was clear and easy to understand. i want you to plz make a tutorial on how to deploy mern app on servers and how to configure whole server
Hi,mate. Can we talk about the error at 7:02 in more detail instead of I will come back when fixing this error? Many people get stuck by error H10 when trying to deploying their first app to heroku
Hello pedro, thank you again for the tutorials, could you please cover more on the deployment + buying domain and add the custom domain to the app? like fully deliverable to the users
Thanks a lot man! it really help. I just wont to add that for me it does not work on heroku until I added a "procfile". which is text file that contain only this: web:node
this worked for me too. in the same folder as server.js, I added a file called Procfile (make sure it has no file extension) inside Procfile, I only had this text :web:node where server.js is the name of my file. then I did the git commands again, and the build worked!
Thanks for nice tutorial! Is it possible though to deploy the whole fullstack app to Netlify without using heroku? I mean making express app serve the /build folder
Im used to deploying my MERN app all on Heroku. Is it advantageous to have your client and server hosted seperately e.g. Netlify - Heroku or Heroku only. Is that best practice? What about price implications if you seperate them, do you end up paying more. I'm also wondering what is generally the cheaper option for a production environment, AWS Beanstalk? Netlify?
Hey Pedro, I am a beginner in React. Your tutorials are life-saver for me. Thank You so much. Does this tutorial works if I am using MySQL instead of MongoDB?
man that was an amazing tutorial .... u just nailed it , very helpful and to the point content .. thank you , thanks a lot, u just kept it simple and precise it was very easy to follow for a beginner to pro ,liked ur presentation style. subscription ++
Hey, so it does work without netlify if you deploy both the client and the server to heroku. However I prefer separating the servers that host my client from the one that hosts my server due to many reason. Mainly, most large scale projects have this separation due to performance reasons. I also find it easier to catch errors and know immediately if they are being caused by the frontend or the backend!
Oww, thanks! But do you happen to know how to host the client side with npm? I mean I have really easy application with server and ejs files. I don't know whether there's client and server side. It's all plain js, ejs
I have some question! I just deployed my react to netlify, and server to heroku. But the problem is that heroku seems to sleep. And I think it doesn’t wake up by accessing to the netlify, but only when accessing to heroku. Is there anyway to fix that? Thank you!
Hey, so the free tier in Heroku sleeps when there is no one actively in it or if no changes are being pushed. This is something unfortunate about it but its cheap to upgrade!
hey @Pedro Tech i am not able to make account on heroku beacuse it is asking for credit card and i dont have any credit card.is there any way to do it without credit card
Thanks for the tutorial. I made the same exact step but get error ''You should enable JavaScript '' dont really understand why... If you already had this issue it would be awesome if you could explain how to fix it
@@PedroTechnologies honestly, I can't really understand from where this error coming... But I can see my data from server using dev tolls in client side so I think it's from Netlify🤷🏾♂️
@@PedroTechnologies I saw it in Dev Tools Network and then Response. It's from my React App because if you look in index.html from a create-react-app there is an element You need to enable JavaScript . I check if JavaScript was enable on Firefox and it is so like you said, That's weird 😂
@@PedroTechnologies I solved It !!! The issue was in package.json. I set "homepage": "." in it and it worked after pushing it to Github. It's an unofficial way to do it by the way...
@@PedroTechnologies First, thank you for your helping and nice video :) When I uploaded just the server part, everything was fine, but when I try to upload the full project, this error appears "fatal: the remote end hung up unexpectedly"
Hey this method works very well , i just cant seem to get the connection to the backend right from the frontend , proxy doesn't work and i get cors error when i try something else, can you help?
Hey Pedro, I successfully deployed my mern app to heroku but the problem is for some reason, it takes long time to load everytime i reopen my deployed app. How to speed it up?
in heroku if i attach my credit card can i access free service of my simple projects??? bcz i am scared of automatic charges of the card soo please tell me.....!!
@@PedroTechnologies Sure why not first let me try that socket chat app to deploy.....i told yoy in instagram that if i want to deploy that how can i do.... but here my problem will be solve let see what happen....
i have a quick question ?..on my node js backend -> should i create ".env" file to put my Mongo Atlas username, password and link to database process variables ? do you think nobody would be able to access my username and password info..?
Yes! Put that information in the .env file. I didn't in the video cause I wanted to keep it as simple as possible, but always put sensitive stuff on the .env and put the .env in the gitignore
There's correct start in scripts, and I connected my app to mongoDB when developing, but I still got the h10 error when deploying. I tried to fix it following some other instructions, such as create a Procfile not set a hard port. All didn't work. Is there any other possible way to save me from deploying my first web? It's a ecommerce web with quite a lot of functions. Everything works fine locally.
I want to build a website for a company using mern , it's a portfolio website which has 2 forms of which data should go to the email as soon as submitted , I don't need expensive hosting but a decent one , suggest me what should I use Pedro?
Hey pedro nice work. I tried to do this in a from tag and i left blank. But on local server it is working but on netlify it is not working, neither it is updating the backend mongo. The actual issue happens to be the values from state is not updating the database, it is an issue with forms on netlify. With button it works cool. Kindly explain this issue.
} export default App; If I run this on localhost it works. On netlify it doesn't. But with button onClick it works both on localhost and netlify. On netlify there is some attribute like .
@@nijojoseph Hey, so on all projects that I deploy to netlify I never actually use the tag so if there is some issue with that I wouldn't know. But I always recommend 2 things, when passing name and age in the addFriend post request, write the keys and values: ex -> name: name, age: age. Also, instead of having an to add friend, have an
is there a problem if i deploy both the server and client to heroku and then deploy again the client on netlify because i didnt create a server folder for my project
Thanks man for this amazing tutorial.....I was recently working on a MERN Stack application and while the entire development process I was just worried about one thing which was deployment....Your tutorial helped me a lot and made the deployment process pretty simple which I used to earlier consider as a nightmare due to a lot of steps involved in it. You really deserve a lot of appreciation 👍👍👍
Great to hear! I am glad you liked the video!
It's not boring, so much stuff to learn from this series, simplicity is key!
Not all heroes wear cap, you are the one man!
Keep doing the great work!
Thank you very much for making these helpful tutorials!!!
Hey bro!
I don't usually leave comments on videos much. However for this one I have to. I have been facing issues with understanding and deploying (I would say especially deploying) mern apps . And this series you posted was super helpful. You kept it crisp and to the point. Not much beating around the bush or over explaining things. Thanks for uploading such good content. Keep up the good work bro!
Thank you so much!
I've been lookin' for this tutorial everywhere but you are the one who explained it completely :)
Thanks sooo much. It took me more than a week to deploy my MERN stack app. Thanks a million.
Glad I was able to help!
Thank you so much I didn't understand before and I was so frustrated 😭
I get the frustration, I am happy I was able to help! Thank you!
Deployed my first MERN project! Thanks Pedro!
Thank you again! I finally did what i wanted to, your tutorial is great in explaining things to beginners, in comparison to others tutorials where people just say do this and then do that, not explaining why
Great to hear!
Thanks.. I was facing the H10 error and searched different resources on internet but only this video helped me to get my app deployed.😃
my new favorite youtuber, you literally saved me on many occasions. thank you so much.
Hahaha thank you! Really appreciate it!
After searching for lots of video finally found video which is actually helpful. Thanks for video.
Glad it was helpful!
Bro u r lifesaver ,all other videos showed use of MLabs which was discontinued,but thanks to u I connected my mongodb to heroku
Glad I could help! I went through the same thing a year ago hahaha I know the struggle!
Bro, you are God! I tried deploying a simple app using only heroku and watched about 5 6 videos but none of them worked, until now. Thanks * 100000❤
Love it man, worked perfectly, I had taken the whole day troubleshooting, looking for different tutorials without success but yours made the difference 😂
Thank you man, finally got this thing to work, this my first site ever deployed
Awesome! Glad you were able to get it to work!
Thanks Pedro. I always come back to your tutorials for clarity. Oh and the music!
This is the best tutorial on yt for hosting
This is great dude especially how to deal with errors!
Thank you so much brother. You explained very well. The best part is you showing the errors that occoured.
Dude. for the longest time I thought you had to deploy the server and client together. I've mostly focused on front end stuff and I use Vercel which I love. Thanks for this, I will continue using Vercel but now I know how to use Heroku for my servers :D
this is so good, thank you Pedro!
Glad you like it!
Thank you soo much pedro! Your videos always fixes the problem also you does the things that no other youtuber does that is tech like beginnner! I always recomend your channel to all my friends! always be like that brother
Hey Pedro ,
I want to deploy my MERN project but now the heroku was not free anymore ,and for frontend its easy to deploy on Netlify but what about backend can you give some suggestion.
Me searching for the right video for 2 days. (fails)
UA-cam: Ok, I'll do it my self.
Thank you youtube. 😍
Hahaha happy to see the youtube algorithm brought you to the video!
Do you have a video building the project you are deploying? Thanks!
Thank you for also showing your Problems helped soo much
Thank you so much man..... This was not at all boring.... You taught me a lot of things in just 30 min..
You are fantastic pedro my boy.............................................
you freaking made my day man, eternally grateful
Hey, can you make a video on how to host the front end and back end on heroku in the same app? can't find any current videos on this
By far the best tutorial on deployment. Thank you so much for this. Subscribed!
Amazing tutorial, thank you. If you're app crashes and you are using environment variables in the .env file, create them first in Heroku under your app settings in Config Vars. This can also be the reason why your app crashes during deployment.
Thank you So much man😀😀😀😀I was successfully able to deploy after reading ur comment . It was giving error in previously . Thanks .
thank you pedro.
Heroku deployment errors is moslty caused by forgeting the script :{"start":"node index.js"} and also using bcrypt for password hashing. so if you are using bcrypt delete it and replace it cryptojs which is another tool for password hashing
Here both back and front are deployed in different domain , i also did that , but the problem is with authentication , how to set cookies in client-side and how to pass it to back end
Great video. I needed to run this after I switched from local mongo to online cluster: heroku restart
Thank you so much for a great video tutorial. This deployment process was really irritating me as I kept getting errors and finally with this video, I was able to successfully deploy my MERN stack.
Great to hear! Deploying is annoying!
You are great man. Thanks a lot from the bottom of my heart
Very clear explanation. I'm looking forward for the next tutorial.
Thank you soon! More videos come every monday, wednesday, and friday!
bro i really appreciate this video, it was clear and easy to understand. i want you to plz make a tutorial on how to deploy mern app on servers and how to configure whole server
18:43 is that a pic KSI on your desktop folder? LOL
Hi,mate. Can we talk about the error at 7:02 in more detail instead of I will come back when fixing this error? Many people get stuck by error H10 when trying to deploying their first app to heroku
Great Video for the deployment of full stack application. As well as well Explained Video
Which theme of Vscode you are using?
you helped me a lot appreciate your effort
Glad to hear that!
Hello pedro, thank you again for the tutorials, could you please cover more on the deployment + buying domain and add the custom domain to the app? like fully deliverable to the users
Hey Pedroo. You got everything I need 😁
Thank you!
Thanks a lot man! it really help. I just wont to add that for me it does not work on heroku until I added a "procfile". which is text file that contain only this: web:node
this worked for me too.
in the same folder as server.js, I added a file called Procfile (make sure it has no file extension)
inside Procfile, I only had this text :web:node
where server.js is the name of my file.
then I did the git commands again, and the build worked!
You the man Pedro, thank you
Nice Tutorial, thank you very much. Just one question, how come you are not getting any CORS error since you have not set that up? Thanks
Thank you. it works. Great video. You explain things. PS: Your Patreon seems to be off...
Awesome as always 👍😀
Thanks again!
which is better google cloud, aws or netlify??? for hosting a full stack webapp
If it is a business then AWS for sure! Netlify can't host a fullstack app, only frontend!
U Rocked Man! Thank You
Hey great content thanks. Do we need to upload node_modules also to heroku?
Thanks for nice tutorial! Is it possible though to deploy the whole fullstack app to Netlify without using heroku? I mean making express app serve the /build folder
It is not advised since I don't think netlify has an option to deploy an api! If they do then it's probably new
Thank you. It really helped me
Glad it helped!
Im used to deploying my MERN app all on Heroku. Is it advantageous to have your client and server hosted seperately e.g. Netlify - Heroku or Heroku only. Is that best practice? What about price implications if you seperate them, do you end up paying more.
I'm also wondering what is generally the cheaper option for a production environment, AWS Beanstalk? Netlify?
Hey Pedro, I am a beginner in React. Your tutorials are life-saver for me. Thank You so much.
Does this tutorial works if I am using MySQL instead of MongoDB?
Thank you! Yes it works but you would have to deploy the mysql db elsewhere, I have a video on doing it with mysql!
thank you so much sir 💖💖💖💖💖💖💖💖💖💖💖💖 you are a life saver
4:18 nice choice
The video I was looking for because of the folder structure. Thank you. P.S. The video is not that clear.
did it worked for you?
Listen man YOU ARE A FUCKING LEGEND
Noice! Which Mcbook you using ? any recommendations
I use the macbook pro 2019! I really like it, but the macbook air is good enough if it has a lot of RAM!
man that was an amazing tutorial .... u just nailed it , very helpful and to the point content .. thank you , thanks a lot, u just kept it simple and precise it was very easy to follow for a beginner to pro ,liked ur presentation style.
subscription ++
Thank you! I am glad I could help! I have been through the same struggle so I am just trying to help those in the same situation I have been in!
Hey! Can you say why did you uploaded it on heroku AND netlify ? For me it works even without netlify. Thanks in advance
Hey, so it does work without netlify if you deploy both the client and the server to heroku. However I prefer separating the servers that host my client from the one that hosts my server due to many reason. Mainly, most large scale projects have this separation due to performance reasons. I also find it easier to catch errors and know immediately if they are being caused by the frontend or the backend!
Oww, thanks!
But do you happen to know how to host the client side with npm?
I mean I have really easy application with server and ejs files. I don't know whether there's client and server side. It's all plain js, ejs
I have some question! I just deployed my react to netlify, and server to heroku. But the problem is that heroku seems to sleep. And I think it doesn’t wake up by accessing to the netlify, but only when accessing to heroku. Is there anyway to fix that? Thank you!
Hey, so the free tier in Heroku sleeps when there is no one actively in it or if no changes are being pushed. This is something unfortunate about it but its cheap to upgrade!
@@PedroTechnologies Thank you for the answer!
That was awesome..thankx fro sharing...
Thank you!
Hey Pedro I need a help can you please make a tutorial on MERN stack project for Tutor Finder website.
hey @Pedro Tech
i am not able to make account on heroku beacuse it is asking for credit card and i dont have any credit card.is there any way to do it without credit card
Thanks for the tutorial. I made the same exact step but get error ''You should enable JavaScript '' dont really understand why... If you already had this issue it would be awesome if you could explain how to fix it
Hi, where does it give this error? Is it netlify that gives this error or heroku?
@@PedroTechnologies honestly, I can't really understand from where this error coming... But I can see my data from server using dev tolls in client side so I think it's from Netlify🤷🏾♂️
Thats weird! But where did the error appear? Like, where is the error being displayed?
@@PedroTechnologies I saw it in Dev Tools Network and then Response. It's from my React App because if you look in index.html from a create-react-app there is an element You need to enable JavaScript . I check if JavaScript was enable on Firefox and it is so like you said, That's weird 😂
@@PedroTechnologies I solved It !!! The issue was in package.json. I set "homepage": "." in it and it worked after pushing it to Github. It's an unofficial way to do it by the way...
Thank you so much!. Great video indeed!
Hey will this be scalable? Or we should use AWS for big apps with many users?
I recommend AWS for big apps 100% of the time!
That was great tutorial you really explained in detail. But I think that you should add database url in dotenv file
you are great my teacher. Thx
Should we do the same thing if we deal with EJS and our project wasn't
build using React?
So with ejs you can just upload to heroku directly! No need for netlify!
@@PedroTechnologies
First, thank you for your helping and nice video :)
When I uploaded just the server part, everything was fine, but when I try to upload the full project, this error appears
"fatal: the remote end hung up unexpectedly"
thanks for this video,,,
but, you don't need to build manually Netlify will build the app for you. Then you don't need to add CI= ...
Hey this method works very well , i just cant seem to get the connection to the backend right from the frontend , proxy doesn't work and i get cors error when i try something else, can you help?
Hey, interesting! Did you try applying cors? Doing somehting like app.use(cors())?
@@PedroTechnologies I actually went through and saw when you did this and apploed it and it worked
I have a problem with the first heroku command in the command line, they say "the term heroku is not recognised", what should i do?
Hey Pedro, I successfully deployed my mern app to heroku but the problem is for some reason, it takes long time to load everytime i reopen my deployed app. How to speed it up?
Interesting! I believe this happens sometimes with heroku because it is free! It depends on the region as well!
in heroku if i attach my credit card can i access free service of my simple projects??? bcz i am scared of automatic charges of the card soo please tell me.....!!
Yes, don't worry they won't charge you if you don't use a paid service. I've been using heroku addons for about 1 year and I was never charged
Is there a reason you didn’t do full stack on Heroku? Heroku will do the front end too
There is no reason for it, however i prefer to put my frontend on netlify because i love the service. For that reason I divide them
Getting not found error after deploying server code to heroku. Do I need to change anything on package.json or adding pro file inside server?
Ohhh yeahhhhh....i am very excited for this video
Lets gooo 🔥 Lmk if u have any questions!
@@PedroTechnologies Sure why not first let me try that socket chat app to deploy.....i told yoy in instagram that if i want to deploy that how can i do.... but here my problem will be solve let see what happen....
@@gauravmavani1413 Awesome! I followed this same path to deploy a separate socket app I made and it worked!
I have used localstorage for auth in react , and localstorage is not working on the netlify hosted website. Any suggestions??
i have a quick question ?..on my node js backend -> should i create ".env" file to put my Mongo Atlas username, password and link to database process variables ? do you think nobody would be able to access my username and password info..?
Yes! Put that information in the .env file. I didn't in the video cause I wanted to keep it as simple as possible, but always put sensitive stuff on the .env and put the .env in the gitignore
Please make video about the pricing of heroku and netlify
tutorial on deployinga MySqli, Reactjs and Node to a ubuntu server would be nice.
Hey, I am planning on a video on deploying using MySQL!
Thanks a lot for an awesome video.Could you please make videos on how to host same application using docker.
There's correct start in scripts, and I connected my app to mongoDB when developing, but I still got the h10 error when deploying. I tried to fix it following some other instructions, such as create a Procfile not set a hard port. All didn't work. Is there any other possible way to save me from deploying my first web? It's a ecommerce web with quite a lot of functions. Everything works fine locally.
This helped a lot thank you
Will it take our project from local host to live on internet ??
Yep
@@PedroTechnologies thanks bro it’s very helpful
Thanks bro.. Exact deployment details I need
Thank you! If u have any questions lmk!
I want to build a website for a company using mern , it's a portfolio website which has 2 forms of which data should go to the email as soon as submitted , I don't need expensive hosting but a decent one , suggest me what should I use Pedro?
Hey pedro nice work. I tried to do this in a from tag and i left blank. But on local server it is working but on netlify it is not working, neither it is updating the backend mongo. The actual issue happens to be the values from state is not updating the database, it is an issue with forms on netlify. With button it works cool. Kindly explain this issue.
I never experienced any issues like this. Can you paste your form code here? Also, are u sure you added the heroku api url in your post/get requests?
@@PedroTechnologies
import './App.css';
import React, {useState, useEffect} from 'react';
import Axios from 'axios'
function App() {
const [ name, setName] = useState('')
const [age, setAge] = useState(0)
const [friends, setFriends] = useState([])
const addFriend = () => {
Axios.post('mern-pedro.herokuapp.com/addfriend', {
name, age
}).then((response)=> {
setFriends([...friends, { _id: response.data._id,
name: response.data.name, age: response.data.age}])
}).catch(()=> {
alert("it didn't work")
})
}
useEffect(()=> {
Axios.get('mern-pedro.herokuapp.com/read')
.then((response)=> {
setFriends(response.data)
}).catch(()=> {
console.log("error");
})
}, [])
const updateFriend = (id) => {
const newAge = prompt("Enter new age: ")
Axios.put('mern-pedro.herokuapp.com/update', {
newAge, id
})
.then((response)=> {
setFriends(friends.map((friend)=> {
return (friend._id === id)? {...friend, age:newAge} : friend
}))
})
.catch(()=> {
alert("it didn't work")
})
}
const deleteFriend =(id)=> {
Axios.delete(`mern-pedro.herokuapp.com/delete/${id}`)
.then(()=>{
setFriends(friends.filter((friend)=> friend._id !== id))
})
.catch(()=> {
alert("it didn't work")
})
}
return
Name:
setName(event.target.value)} />
Age:
setAge(event.target.value)} />
Add a friend
{friends.map((friend)=> {
const {_id, name, age} = friend
return (
Name: {name}
Age: {age}
updateFriend(_id)}>Update
deleteFriend(_id)}>
X
)
})}
}
export default App;
If I run this on localhost it works. On netlify it doesn't. But with button onClick it works both on localhost and netlify. On netlify there is some attribute like .
@@nijojoseph Hey, so on all projects that I deploy to netlify I never actually use the tag so if there is some issue with that I wouldn't know. But I always recommend 2 things, when passing name and age in the addFriend post request, write the keys and values: ex -> name: name, age: age. Also, instead of having an to add friend, have an
Thank you so much man
can you please help me how to deploy an application that built with react, Express, MongoDB in Cpanel
is there a problem if i deploy both the server and client to heroku and then deploy again the client on netlify
because i didnt create a server folder for my project
I think there might be issues because both the client and server should have different nodemodules folders and different packages.json
what if you need to upgrade mongoDB storage, is it required to pay extra for upgrading mongoDB storage?
Thanks Brother🤜🤛