How to deploy a MERN Stack App to Heroku
Вставка
- Опубліковано 17 лис 2019
- Building a MERN stack app is thing, deploying it can be a nightmare. In this video, we're going to show you exactly step by step on how to deploy a MERN Stack App to Heroku
🔔 Don't forget to subscribe 🔔
ua-cam.com/users/EsterlingAc...
Interested in supporting this channel? Please use this link bit.ly/2Lfuf46
📚Resources 📚:
Playlist: • Build a MERN stack app...
Github Repo: github.com/accimeesterlin/mer...
Other Related Videos :
✅ Set up the Reactjs and Nodejs structure: • Set up the Reactjs and...
✅ Run Reactjs and Nodejs in same terminal - Concurrently: • Run ReactJS and Nodejs...
✅ Connect to MongoDB Atlas cluster with Mongoose: • Connect to MongoDB Atl...
✅ Robot 3t demo, models and routes refactor (code move in separate files): • Robot 3T demo, models ...
✅ Create & submit a form in Reactjs and resolved cors policy: • Create & submit a form...
✅ Save data to MongoDB with Mongoose: • Save data to MongoDB w...
✅ Get/fetch data from MongoDB and display them in Reactjs application: • Get/fetch data from Mo...
✅ Apply css styles to a Reactjs application: • Apply css styles to a ...
✅ How to deploya MERN stack App to Heroku: • How to deploy a MERN S...
✅ Connect MongoDB Atlas to your Heroku application: • Connect MongoDB Atlas ...
✅ Enable automatic deployment to Heroku: • Enable automatic deplo...
🤗Let's connect 🤗:
👉 LinkedIn: / esterling-accime-324a4181
👉Twitter: / accimeesterlin
👉Facebook: / accimeesterlin1
👉Instagram: / accimeesterlin - Наука та технологія
Couldn't find either the add-on service or the add-on plan of
▸ "mongolab:sandbox".
Guys, don't forget. The terminology of "master" changed last year for git and other big tech companies. It means, 'master' is changed to 'main', so you have to type "git push heroku main" as I experienced, Heroku isn't giving a note for that.
I noticed that just this morning wow
I get this error when doing git heroku push main.......error: src refspec main does not match any
error: failed to push some refs to
@@Array_of_objects same .. did you figure this out?
Just rename the main branch in your git to master
This tut was a life saver. Ive been learning Node and React but I was having trouble figuring out how to put the two together. Was able to push a test to heroku today and it works!
I absolutely love how clearly you explain everything step-by-step. This was so helpful. Thank you!
This is the most comprehensive video tutorial on this topic I've come across so far.
Hope this will work for me. Thank you, Esterling! Subscribed!
This video is a game-changer in my career. Deployment is one of the biggest dragons I need to slay.
i spent one full day on a wrong tutorial. your 15 minute video did the job. Thanks a lot brother.
I struggled to do this until I followed your videos. It worked perfectly!
Thank you so much, following you tutorial was of great help in solving a build bug while deploying to heroku.
Thank you so much for such a clear, in-depth tutorial for a MERN stack app! I'm currently in a React course for a CS degree, and I was completely lost and in over my head until I found these tutorials. I finally feel like I understand, and after following these videos, my app works great!!
Hope your react journey is going well, Its a great language, useMemo is lifesaver
Thanks for sharing Duck. Glad I was able to help
and by the way, you have a great content and the intro is crazy bro i like it. keep going
Thanks, I'll definitely keep going :)
Thank you Esterling! Super helpful and clear
Couldn't find either the add-on service or the add-on plan of
! "mongolab:sandbox".
Any Solution plz ????
This is one of the greatest help i ever got in my life
Thank you! This is the best tutorial on this subject!!
Thank you! Great explanation, finally it works!
hi Ester, great video series! i follow it through the end...!
please continue to build register and login system! :D
I've implemented the concepts to my project and it worked...
Simple and to the point.
Thanks Sr.
Thank you sir. Worked perfectly!
Thank you so much! I just deployed my first mern app.
🙌🙌
Great explanation! Thank you!
If anyone is having issues with a 404 error when running 'heroku local'...
Make sure the following code snippet is ABOVE your routes in server.js-
if (process.env.NODE_ENV === 'production') {
app.use(express.static('client/build'));
}
//// PUT ROUTES HERE ////
app.use('/api', routes);
Hope this helped someone, thanks for the great video!
impressive teaching style. Really nice. I like it.
Yes! Yes! Yes! Finally got it working thanks to you. Esterling, you da man! 🙌
Another thing that had me tearing my hair out for a while was that I had a default "homepage" property in my root package.json. You don't need that but if you do want to include it, make sure you set the value to the URL of your actual heroku app. Hope that helps someone out there :)
What's the benefits please explain
Thank you so much for clear explanation using Heroku platform.. It helped and saved a lot of time
Thank you so much. I tried so much hard to host mern app by hosting frontend on netlify and backend on Heroku. But unfortunately, I was blocked by cors. I tried StackOverflow but it was not also working. But I got you like a god and you saved my life. Thank you soooo ssooooo much.
keep going you are uploading next level things
This was very helpful and concise, thank you! Rad intro btw love its energy
I appreciate that!
Thank you! It is very good content! Keep going!!!
Great tutorial bro! Nice voice--Good mic quality 🤣
really well explained, thanks!
Thank you, new subscriber this is awesome!
thankss a lot man i was wasting more days now finally this vedio was sooo helpful
Whats up folks 😁😁 the way u explained this was awsom
Very helpful!
thank you for this video!
Awesome, thank you!
That’s really well explained. Thanks! Would you have a tuto explaining the same but with typescript on top of it? I am so confused about where to put tsc - w and whether I need one or multiple typescript confit file for front and backend .
wow this really helped me a lot!!!
BEST TUTORIAL ON DEPLOYMENT thank u
Wow, thanks!
Super usefull, thanks!
Thank you so much for video
thank u very much dude.... it helps me alot...
Nice and straight to the point tutorial, how do you do this with yarn?
You are the best, I couldn't find this easly. Btw i would remove the intro for this kind of tutorial. Thanks!
!!!!THANK YOU SO MUCH
thanks...learnt alot
You’re welcome!
excellent!
Question: I am also using express cors where I have hard coded that the request will come from localhost:3000 and in Reactjs I am using axios in that I have defined that the backend is running on localhost:3001 and if port is allocated dynamically how should I change that in react and express
Excelente! Thanks!
thank you good sir ^.^
Thank you so much, really helpful .
I have a question ,I applied all of these steps but when heroku opened I found that only the backend part is deployed but not my frontend app so what thing causes this problem ? I appreciate your help!
Thanks alot :)
what about the the api request in the front? we need to adjust them as well
Second time here, best video. Orrrrrr my memory sucks)))
Hi, how are the dependencies in client folder getting installed? I coundt see you mentioning about npm intall inside the client folder
Hi, How Do I add that fire cursor to my vs code??
thank you .fantastic
Our pleasure!
watching this video on March 2020 and got a question....around minute 6:00, when you talk about the deploy process and the build scripts to run post-deploy....i think this days, when you deploy to heroku, it runs build of your application automatically, so, is all that process with the "build" + "install-client" still needed?. Thanks!
Amazing sir
Muhammad, thank you :)
thank you so much
hi ester, nice video
is the folder name "client" is the standard name, or name it for my project name?
believe it or not ladies and gentlemen, this is a great tutorial
Hahahhaa
That's when I know I've just completed something big.
I am getting 404 Not Found on all paths when trying to run with heroku local. What could be the reason ?
what if my client-side only contains index.html and some javascript and not react?
then how should I change my scripts?
what should i set my PORT to ?? in the config folder..??
hello, as per your instruction i created gitignore file in my base folder, but node modules in my client are not getting ignored.. is it meant to be that way?? should i just upload it with node modules folder?
there is no words discover the greatness of this content , thank you .
-----
here a question please, I got "Invalid Host Header" ?
Works!!!
I downloaded the mernapp_youtube-master, cd into client dir, and ran npm run build and could not find a /build subdir in the /client area ?
My file stack has “node server.js” in the start script that is inside package.json
Do I need a procfile, what information needs to be in that file in the root directory?
What happens if I use ejs instead of react for my front end, then how to do it
thank you
how do i fix an NGINX 404 error post deploy (is react router an issue) ?
the flames tho lol!!
I have one problem, when a deploy the APP all works fine, but when a make a request the APP still making the request from localhost, how can i fix this?
what is the extension for the flam?
thanks macha
Awesome content!
Question - when I uploaded my app to heroku, my reactApp is still trying to go to my localhost routes(localhost/5000) and hence can't get the data from my mongoDB dbase. Should I reroute all my reactJS axios routes? I though static.JSON would have solved this but it didnt.
Looking forward to your reply and thanks!
Hey Yonni, do you have a link to your source code on GitHub that I can take a look at it?
So you put both frontend React and backend Express Server into Heroku? You can't put the whole stack with Netlify right? Is Heroku free?
hey I have followed the tut . but running the Heroku local runs my. backend server I am not seeing the react app , can someone help
do I have to upload .env file to Heroku?
Couldn't find either the add-on
! service or the add-on plan of
! "mongolab:sandbox".
Hey. Related to heroku deployment, does heroku keeps images after is deployed or it have to be paid so we can keep images. What is price for deployment mern app?
What is the port number in PORT in .env?
Heroku only displaying the backend of MERN app. How can I fix this?
I always see my backend json file even though I have front end app for it. What would be the reason?
Super :)
I followed every step of this tutorial but my deployed app which has the frontent says 505 service unavailable when trying to call /api. When I do heroku local then nothing appeaears. Do you have any advice? I've been through so many MERN stack tutorial series on youtube and I think I'm just never going to get it
This worked For Heroku and now my backend servers the frontend, however when I try to run npm run dev locally, I am getting a:
Could not Proxy request from localhost to localhost to localhost5000,
Also for the (If process.Node.ENV ===production) statement, do we need to add a configuration variable in the DOTENV?
Please help ive been stuck
Thanks a lot. I have a quick doubt
Can we use the Mongo Atlas URI we used in the first as the URI without using the addons?
Yeah this is my question, as when I tried the Heroku Addon for MongoDB:Sandbox it asked me to verify card.
You can check the next video in this playlist, he explains it there. It's easy. 😅
@@iamkiddilam ye i'm all set now.
thanks again for the great video
Hi, I deployed my app to heroku, it's working locally when I run heroku local but when I push to heroku and open it's show application error
Hi, I already deployed my server with frontend connected to the server. But I also have another frontend that needs the server how can I connect my another frontend?
2 frontend 1 server
Great tutorial!
I have a question. When my app gets deploy the connection with the database does non get establish. I belive this happens because the command "node server.js" does not run. With heroku local works because as in the video the connection gets established. Is there a way to run node server.js once so that the connection stays open as it deploys?
Thank you very much :)
Make sure you add “node server.js” in the start script that is inside package.json
@@accimeesterlin It is but still does not work. I belive the problem is that the script npm start never runs when I push it to heroku. The connection with the database never establishes. I have tried npm concurrently to run npm start and the rest of the scripts but it does not work, the heroku build never ends and I get an exit code 0.
github.com/Einar-Lop/test2100original?files=1
Here is my code.
I would appreciate your help.
Thank you very much :)
sir, on runing heroku local it is only showing the backend !! can you please help me
what if you don have a addons in your heroku ?
How to deploy mern stack if i have 2 separate folders: server and client? These 2 folders are inside another folder with app_name?
Did you find a way?
They removed mLab and Object Rocker do not have a free version so now what to do?
Thanks for the tutorial i am running my heroku local and its connects with data base and also runs on server but i do not see my app when i visit localhost:500 and instead only see api routes for root i.e. Api is running. I am attaching my github code kindly take a look
can you please tell us what is the extension for that fire effect when writing
It’s called PowerMode
@@accimeesterlin thanks bro
when i enter the addons command it says no addons for your app
I cloned your repository and as i did heroku local it shows server starting at 5000..but when i go there i get message "cannot GET /"
if heroku i get this problem by hands on at the end. Npm run dev work but not heroku local (test fail)
I am getting the same issue... is there any solution for this.