Deploying MERN Stack App to Heroku - MERN Stack Tutorial with Redux #15
Вставка
- Опубліковано 20 лип 2024
- #MernStack #mern #MernTutorial #MernStackProject
MERN Stack Tutorial Series with Redux where we will learn to build an Awesome Full Stack Notes Taking Web App Project.
In this video we will Deploy and Host our MERN app to Heroku.
If you wanna support me - www.buymeacoffee.com/roadside...
Source Code - github.com/piyush-eon/notezipper
Live Site - notezipper.herokuapp.com/
Full Playlist -
• MERN Stack Project Tut...
User Authentication Video - • Complete User Authenti...
Movie App in React JS and Material UI -
• Movies and TV Series S...
Quiz App in React JS and Material UI -
• Quiz App in React JS w...
Dictionary App in React JS and Material UI -
• 12 Language Dictionary...
00:00 Intro
00:22 Deployment Preparations
06:00 Heroku Setup
07:55 Proc File
08:48 Post Build Script
10:04 Pushing to heroku Repo
11:58 Setting Environment Variables
12:45 Deploy without post build script
13:10 Congrats!
13:21 Support the channel !
Man I never write comments on UA-cam videos but this video definitely deserves it. You helped me a lot and I want to thank you for that. Good luck and just keep going. Greetings from Croatia
Glad that I could help man!
Bro, you are God of MERN stack tutorials. What a fantastic tutorial series. Wow. You are doing great job by making such tutorials and helping many beginners and learners. Thanks a lot.
It's my pleasure
I just jumped into this video because I was looking for some video about deploying to Heroku. Thank you very much, it took me sometime to understand but I could fit it in my project and make it work. Thanks's again.
Awesome ❤️
Very helpful and informative video. Thank you so much!
First of all thank you for sharing some wonderful Content here on YT. To be honest, it's not what you built(since many people can do it) but how you built it. I would say that it is a very clean code and hence I have took out time to actually appreciate your work. The use of proper middlewares, components ,screens, models and connection files all being modularized was exceptional. Though this is the first playlist I have gone through of yours, I have become a great fan of your because of the clean code approach you take and would highly recommend you to continue to do so. Now there were certain areas, which kind of put be back was , that I could not find the section or whether I missed out on part where we needed to delete the package.json file from the frontend to actually be able to deploy our app properly. Also certain things that I personally would have really liked was you using the cookies approach rather than the local storage and also, the use of json refresh token along with the use of the expiry token. But these are suggestions that I would really want some information on, other than that the course was 10/10 and I would say Kudos and recommend others as well to your course being a part of many communities.
Wow.. This is certainly the best comment I've ever recieved on this channel ❤️❤️ Thank you so much brother. I'm glad that I'm able to use this platform to provide valuable information to individuals like you.. Glad to have you as my subscriber🙏
@@RoadsideCoder you have earned it brother
Hi, Based on this video I deployed my app to heroku. But now heroku site is not working. Can you please post a new video on how to deploy the MERN app?
Hey!! Did you find the solution?
Thanks a lot buddy; I learned a lot in this tutorial series.
Awesome dude! 🤘
This tutorial was very great and I have consumed a lot of knowledge thank to you for making this,
ans I would love to see a video of your journey how you become pro mern stack dev
Very easy to understand, Thanks Bro! Your tutorial's very useful
Really? Thanks so much!
Great playlist! :)
Brilliant Tutorial . Thank You Very much
🙏🙏
I hope you make more playlists like this.
I have learned a lot from U.
i especially like your reactjs project.
I am a big fan of U, thank you very much.
🥰🥰🥰🥰🥰😘😘😘😘
Yes for sure brother, please share with others who need it!
@@RoadsideCoder yep I did
Thanks Bro, I am very thankful to you. I learn lot's of stuff from this tutorial.
That's awesome man! Do share it with others who need it!
how is the course did it deploy correctly?
Yes it's deployed!
Thank you so much.
top, thank you!
Thanku for teaching us , Pls do one more video on how to create admin panel to upload files which user can download
Thank You Brother ❤️❤️❤️
🙏🙏
hello, I have completed this tutorial list. You are a great person in explaining each video, but I have a question. how do we dockerize mern note this project? can you help me, I'm having a little trouble here.
1 ) I have completely followed the same thing, added env variables in env config in heroku also still showing application error.
2) Also other doubt after npm run build for every change in the project we have to use run "npm run build" then the changes will take place on local host and live???
Does anyone know why axios returns instead of JSON?
thanks!
I had a doubt should i deploy whole web website on heruko or only backend and frontend on netlify please help
When I publish on heroku, I can't get the data from the backend, can you help me please?
Hi bro, after deploy on heroku, my app is wroking fine in laptop but when i open on mobie, it shows white blank page:-(.....Can you help me??
Const express in videos but import express in GitHub code....!!!! This creating error to me with all imports ???? Solution?
please make new deployment video of this project sir
I deployed web app using render but i am getting problem my app is not fetching data but it fetches data if my localhost is on
Still giving me application error after adding env variables. Please advise.
Hello, I'm getting a 'network error' when I try to login, does anyone know the solution to this? thank you to anyone that will answer
Is there any other platforms than heroku... because I have problem with creating an account
Hey, hi
This is really great series, I have watched it from video 1 till now
can you please write description of this project on your github readme in bullet points so that we can put that on resume, you have made good readme containing all screenshots but it would be very helpful if you could write description point wise as we write on resume by making some important words bold under project section!!
Thanks so much. I will update it soon!
@@RoadsideCoder hey, can you please do it today itself, please!!
@@RoadsideCoder please let us know when you are done with it
Hey sorry guys, I've been a bit busy lately. You cam have a look at the first video of this series. I have told all the features, u cam arrange them in bullets
@@RoadsideCoder okay
Can we deploy/ hosting this app on firebase??? if yes please help me
Please make multilanguage website with redux or socket io
When I am deploying mern project in heroku I am getting error like "Push rejected, failed to compile Node.js app heroku"
Must have missed some step, try to carefully follow the video
Hi @Roadside coder!
I deployed my application referring your tutorial, but the application is not displaying data stored in mongoDB atlas. Can you help me ?
In localhost is it working?
@@RoadsideCoder yes it's working in localhost.
Contact me on instagram @RoadsideCoder
@@RoadsideCoder Sure. Thank you for your quick response
hello @Roadside coder
my deployed website is giving me below error:
{"message":"ENOENT: no such file or directory, stat '/app/frontend/build/index.html'","stack":null}
can anyone help me how to fix it?
You might have not built frontend before pushing to heroku
@@RoadsideCoder I also remove frontend/build from gitignore file
Yes now try to push again
@@RoadsideCoder still give me same error!!!
Bro try to watch video again, I have explained 2 ways to do it
Bro help me!
When I execute the command: "git push heroku master". I got this error:" ! [remote rejected] master -> master (pre-receive hook declined) "
Try to compare your code with mine, link in description
@@RoadsideCoder I captured the build-log on heroku.
img link here: i.ibb.co/BPnfpDH/bug.png
Please help me to fix this error.. i think it happened because of heroku-postbuild command in package.json file.
I really need you to help me. Thanks so much🙏🙏🙏
Yeah so you can try the other way that I mentioned in the video
@@RoadsideCoder I got it
This means that when building in a build-script way, every time there is a change to the code, it will automatically deploy... and the other way will not.
Really thanks bro😘
Welcome 🤘
Hello RoadSideCoder ! Can we make changes after deployment??
Ofcourse
Which command we have to use to make changes
Thank you for your wokr, heroku platforn doesn`t free. I will find someone else.
Please save us, heruku is no more free,give us an alternative way to deploy plz plz
bro, it showing Not Found when I open it
Did you try the other method?
@@RoadsideCoder
which method ?
In video I've shown 2 ways to deploy it!
Hi bro. It's giving me 500 error while login. Can you please help me
Can u compare your code with mine. Link in description
Plus, is it working in postman?
@@RoadsideCoder it was resolved for those who are getting the same. Save jwt_secret inside same file and not in .env
Bro for some reason is not working even locally.
Try to compare your code with mine. Link to repo is in description
it does not work men your solution does not work
after I deploy the app, it shows an error on the browser
{"message":"ENOENT: no such file or directory, stat '/app/frontend/build/index.html'","stack":null}
How can i solve it? thanks!
Have you pushed the build folder in guthub? If not, remove the build from your '.gitignore' file if its there, must be because of that.. I've told this in tutorial as well
I wound up with the same error.
In my case, the problem stemmed way back to my GitHub repository creation, back in part #5. I prematurely created a repo within the /frontend/ directory. Moments later, you cautioned to change to the root directory, but by then it was too late. So I switched to the root and made a repo, oblivious that I now had 2 separate repositories.
Subsequently, with the frontend in its own repository, none of the files in my /frontend/ directory were getting deployed.
The simplest way to solve the problem was to:
1) Create another frontend directory (I called mine "frontend2")
2) Move all the frontend files into the new directory (Except any .git files or folders! By default, those should be hidden by your operating system. The safe bet is to drag-and-drop the files and folders into the new directory. That way you can ensure you didn't accidentally grab any hidden files.)
3) Delete the old /frontend/. Commit the deletion (and the new /frontend2/) into your repository.
4) Rename /frontend2/ to /frontend/.
5) Commit that into your repository.
no backend you forgot that!!!
Doesn't work for me not matter what I try. Did everything correctly
What's the error?
@@RoadsideCoder the build succeeds and it deploys but I still get the 'application error' screen when I open the app. Heroku logs show "error code=H10 desc="App crashed" method=GET path="/" "
@@mmbower1 have u tried both deployment ways that I've shown in video?
@@RoadsideCoder yes
@@mmbower1 did you got the solutions?
Duud in the video description you mentioned it is a App but you showed in web browser how it works..
bro i am getting this error - 2022-01-09T15:25:52.755943+00:00 heroku[web.1]: Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch
no issues i fixed it, i was listening to 5000 instead of PORT
I dont understand. You have "process.env.PORT || 5000" and your env PORT is 5000. WHere did you get localhost 3000 from?