All-In-One: Build and Deploy MERN App to Heroku | Free and Easy | MERN Tutorial
Вставка
- Опубліковано 18 лис 2020
- #mern #heroku #webdev
All in one video - we will build and deploy MERN App to Heroku for free and in an easy way. Thanks for the great MERN tutorial idea by the way!
Prerequisites:
I assume you know how to connect your app to MongoDB Atlas using mongoose. Here's the link to the tutorial where i explain how to do that ( • HOW TO: Connect Your A... ).
I also assume you have Heroku CLI, git and node installed on your machine sooo....
Also for convenience, here is the link to my git repo: github.com/marinamuse/my-mern...
For more, please:
Follow me on instagram: / marina_webdev
Visit my website which is under continuous improvement: musedesigns.tech/hi-im-marina
Shop for my programmers merch designs: teespring.com/stores/techmuse
Equipment used:
- MacBook Pro 2019 (amzn.to/31keIsC)
- iPhone 6s Plus (amzn.to/2FJdy1k)
- Phone holder with lamp (bit.ly/2Eju08g)
- Keepword Blogger microphone (bit.ly/3aP3mQB)
Software used:
- Viddyoze video making software (bit.ly/3l6wwPT)
- iMovie (video editing)
- Canva (UA-cam thumbnail)
- CloudApp (video recording)
Background music/Copyright: Moby - Extreme Ways
See you in the next video! - Наука та технологія
watching my own tutorial to deploy again the site lol
bwahhahahaha XD
Pretty sure evolution didn't have Heroku app development and deployment in the cards for us, right? Hehe
@@mekesiabrown625 nobody saw it coming 😄
After countless articles and guides, your tutorial has helped me to finally accomplish this task.
No other tutorial established the fact that the proxy must be changed before deploying the app.
Your attention to detail has saved me, and I thank you sincerely.
Joshua, thanks so much for your feedback, I’m so happy it helped 😃🥰
OH MY GOD! IT WORKED THIS IS LITERALLY THE BEST UA-cam CHANEL IN THE WORLD I HAVE BEEN STRUGGLING WITH THIS FOR SO LONG!
Oh heeey thank you so much 😃glad it worked!! And happy new year!! 😋🎄
I started my full stack journey last month and already created some apps with it in a month. Learnt so much from your tutorials. They are very instructive. Thanks
This is a great video that covers all the MERN parts that I was looking for. Thanks. Look forward to more great content.
Wow. You really do have a knack for teaching. This was by far the best tutorial on this topic that I have seen. I finally have a full understanding of the concepts due to your incredible teaching style. Thank you kindly.
Thank you so much for feedback) please let me know which topics you’d like me to cover 😃☺️
I have spent 2-3 days in deploying my app but It haven't deployed. Then I came to your video and it all went up in just 40 minutes. You have done a great job. I like the part where you had changed the proxy into application url. No other tutorials as well as articles has shown or had talked about it. I hope that if there are any other problem related to MERN stack I will definitely search here as well as recommend others.
Thank you so much, I really appreciate it 😃
Bravo from BCN! That's the way I feel confortable!! Thank you!!
That was excellent! wow clean, clear and fast, very good job!
Oh wow thank you so much 😃I was hoping for clean and clear 🥰
your teaching style is very easy to understand. great work :)
Finally, my app deployed!!! Can't believe that it works!!! Thank you soooo much!!!
Subscription))
Finally, i have a full idea of the process for building an app within a server. Very beautifully clear,
Now i have to adapt all that to my own project...
Thanks a lot Marina! you are awesome !.
So happy to hear that)) you're welcome🥰
Your voice is the best music for every tutorial! 🤗❤️
WOW, you are the best. I really enjoyed your video!!
Thank You So Very Much!!! This was really useful!
Thank you so much! I really like the way you explain and your videos have helped me a lot
Thank you too for feedback 😃☺️
Thank you so much!😁😁😁😁😁😁😁
Marina Marina Marina i will not forget the name now in my career.....Thanks mam your tutorial really helped me and u deserve a Millions of subs . God give you highest achievements. Once more Thankyou very much
Ah you’re so sweet)) thank you so much for the feedback
Your r the best. You jus saved me one year of college fee. Please 🙏 post more videos
Loving your feedback 🥰I will definitely do more, thanks so much
It was a nice explanation with clean and orderly code..
Thank you a lot, you're doing greate job here
Круто сделано. Просто и лаконично . Все работает. Спасибо большое
Thank you so much. I was trying to deploy my mern app for so many days but it was not working. Finally after following your steps its working. God Bless You.
Aaaw thank you so much for the feedback 🥰
just subscribed!
i like your shirt haha gonba make one ❤️
Thank you for this video.Can u make a video explaining login/sign-up user as continued part of this app..
I have watched so many MERN tutorials but i wasn't able to understand. Now everything is clear... this one is the best... THANK YOU SOO MUCH
Thank you so much for your feedback, aw I’m so happy))
Hello Marina,
Hope this will find you well, I don't know how to explain the teaching power you have must say very enjoying while watching your videos and doing coding.
I have implemented this project with your overview but I have stuck in somewhere between deleting the document from deletemovie/:id api .
The error occured due to the Object_id type in mongodb and we have sending only string type may be this was an error ,So If you have idea how to deal with it let me know.
Thanks
Expert deployer..
Thank you 😁😊
What is the best platform to learn React and React Native ?
Haha you were laughing and teaching like"how to explain in normal words at 20:35", it was just like one of our friends is teaching. You're doing amazing, I'm already loving the style of your teaching, I'm from India so even english is not my native language, so i guess found a relatable teacher, haha.
Can you build some basic CRUD Mern application with deployment video within the week it will be helpful, coz interview season is going and wannna learn it. TIA
Heeey)) wow thank you so much for your feedback, this one is going to my wall)))) yes I will do, I just started new job so not much time for videos but will do this weekend 🥰
@@marinakim2929 Appreciated, i have dm you on insta as well for the video do check.
@@Sky-yy ooh sorry I haven’t been active for two months but will reply this weekend))
thank you marina, your videos helps me complete my project. however i encountered a problem when posting when posting data mongodb. no errors in heroku logs but data not appearing in mongodb atlas (database).
Hello) thank you so much for feedback, I’d need to look at the code but maybe you don’t call .save or smth..
wow
is it work for android app where you are showing in web browser??
Does it get /movies because it is the only option? For example if there was another get for /albums how would it know what to make the homepage?
Hello) the routing is up to you, you can make get(‘/movies’) or get(‘/albums’) and the homepage is usually just the root ‘/‘… in the server side, if you go to localhost homepage there will be simply nothing rendered. Maybe I’ve not understood your question correctly 😄
Hi Marina y make the upload of you project and works fine but y create a project with express generator and the server didnt work do you hace a video lo look how can i do it ??? thanks
Thank you, I know I will figure it out soon! For my project I had to put my server.js file inside the client or it wouldn't work locally, because I am using routes and models folders. I got it all setup on Heroku but it is just showing a blank page. Using inspect I see it is the html page with the root id. If you have no ideas I may try to recode things and change the file structures.
I think it should work, but double check the proxy address, or better send me the link to your git 😁
@@marinakim2929 I made a basic app and got it working so now I will investigate mine and let you know if I figure out what the problem was.
@@jackmiddleton2080 great news 😃
@@marinakim2929 I think the problem probably had something to do with proxies like you said. I just rebuilt everything. The new problem was the fetch wouldn't connect to the server (even with proxy setup) and would default to sending your public/index.html page back as a json instead. I figured out you just have to type the server URL before the path. For example fetch("tranquil-garden-27529.herokuapp.com/movies").
From start to finish? You're amazing!! Does this app include MongoDB ?
Lol, I should have paid attention. It's MERN. Thank you so much for figuring this out 💖
@@OliviaMmmm yesss since you’ve asked me I couldn’t sleep ahaha and no other tutoria worked for me 😄 and I hope this one works for you
@@marinakim2929 right? I couldn't find one either. How crazy is that? It was driving me batty. Now I can get my app up and running again hopefully this weekend. Thank you Marina!! I hope you catch up on sleep now 😂
@@OliviaMmmm it was driving me crazy too ahaha I thought it’s impossible to be so difficult 😄yesss I’ll sleep like a baby today. Thank you 😊
Cannot GET / when deploying someone help me
on app.js file I'm getting TypeError: Cannot read property "map" of undefined even when I cross-reference from your the GitHub repository anyone else has a fix for this or ran to this problem?
hi Fernando! You forget/fail to connect to your MongoDB server. Use a second terminal to connect to your MongoDB by nodemon server.js let me know if it doesn't work ;)
Hello maam, how to reset the form after submitting
Hello) i think you can reset the state of values in the handle submit function🙃
you should be a professor in University, all students would love your teaching
Thank you so so much ☺️
no actually quiet is too better to digest the tutorial :D
Agreed 😄
Which country are you sister
Kazakhstan 🇰🇿 😊
@@marinakim2929 👍, u are doing good job, will u make simple project using react js and node js please
@@venkatesh2788 thank you so much) sure i’d like too. Any particular project in mind?)
@@marinakim2929 I am beginner in node js, but i know react, I don't know how to combine react js and node js, will u make the combining process of react and node and any simple project using that
@@venkatesh2788 oh I actually have a video on that)) pls check it out I hope it helps you
Great video y will put it on practice but please dont put music
Thank you)) I’ll try not to put music 😄
How can i reset the form fields after adding to mongo ?? i am trying to add edit
@@dardoschuster6070 you can set the state back to all fields null, e.g. setState({field1: “”, field2: “”})
Вы казашка?
Наполовину 😁
Do you like andrew garfield or tom holland ?
I think Tom Holland is funnier so 😊
wow