Deploy and Host a Fullstack MERN Application Tutorial In Heroku and Netlify

Поділитися
Вставка
  • Опубліковано 3 жов 2024
  • In this video I will teach you guys how to deploy and host a MERN application using Heroku and Netlify. I also show you guys how to deploy your MongoDB database in MongoDB Atlas.
    Heroku: dashboard.hero...
    Netlify: www.netlify.com/
    MongoDB Atlas: www.mongodb.co...
    My App: unruffled-lich...
    -
    🚀 Learn ReactJS By Building 6 Projects: codedamn.com/l...
    Please leave a comment on what topic you guys want me to cover next!
    -
    ❤️ Support the Channel: / pedrotech
    📞 Tutoring Session: www.fiverr.com...
    💻 PedroTech Discord: / discord
    -
    Social
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    Website: machadopedro.com
    Twitter: / pedrotech_
    Linkedin: / machadop1407
    Instagram: / _pedro.machado_
    Github: github.com/mac...
    Email: machadop1407@gmail.com
    Tags:
    Deployment
    Heroku and Netlify
    ReactJS Tutorial
    ReactJS and MySQL
    NodeJS Tutorial
    API Tutorial

КОМЕНТАРІ • 265

  • @vijayjoshi4071
    @vijayjoshi4071 3 роки тому +29

    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 👍👍👍

  • @lle5159
    @lle5159 2 роки тому +2

    Not all heroes wear cap, you are the one man!
    Keep doing the great work!
    Thank you very much for making these helpful tutorials!!!

  • @madeyeatreides4055
    @madeyeatreides4055 3 роки тому +13

    Thank you so much I didn't understand before and I was so frustrated 😭

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +3

      I get the frustration, I am happy I was able to help! Thank you!

  • @mounishrajkumar7430
    @mounishrajkumar7430 2 роки тому +2

    Thank you so much!
    I've been lookin' for this tutorial everywhere but you are the one who explained it completely :)

  • @jamjam3448
    @jamjam3448 3 роки тому +2

    Thanks sooo much. It took me more than a week to deploy my MERN stack app. Thanks a million.

  • @evanoshea9506
    @evanoshea9506 Рік тому +1

    this is so good, thank you Pedro!

  • @stanislaustankevich5445
    @stanislaustankevich5445 3 роки тому +4

    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

  • @adabus8779
    @adabus8779 2 роки тому +3

    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!

  • @ParthDhamija
    @ParthDhamija Рік тому

    This is great dude especially how to deal with errors!

  • @ronananderson
    @ronananderson Рік тому

    Thanks Pedro. I always come back to your tutorials for clarity. Oh and the music!

  • @pranitabhagat5496
    @pranitabhagat5496 3 роки тому +1

    After searching for lots of video finally found video which is actually helpful. Thanks for video.

  • @roynicksonjacques8700
    @roynicksonjacques8700 3 роки тому +2

    Thank you man, finally got this thing to work, this my first site ever deployed

  • @yogeshwaran9781
    @yogeshwaran9781 2 роки тому

    Thank you so much brother. You explained very well. The best part is you showing the errors that occoured.

  • @KCODivyanshuKatyan
    @KCODivyanshuKatyan 2 роки тому

    This is the best tutorial on yt for hosting

  • @silentxcure
    @silentxcure 3 роки тому +2

    my new favorite youtuber, you literally saved me on many occasions. thank you so much.

  • @arpitj07_
    @arpitj07_ 2 роки тому

    Thanks.. I was facing the H10 error and searched different resources on internet but only this video helped me to get my app deployed.😃

  • @STUPIDYOUTUBE_HIDINGMSGS
    @STUPIDYOUTUBE_HIDINGMSGS 2 роки тому +1

    It's not boring, so much stuff to learn from this series, simplicity is key!

  • @dr.kenedy-oltitia
    @dr.kenedy-oltitia 2 роки тому

    Love it man, worked perfectly, I had taken the whole day troubleshooting, looking for different tutorials without success but yours made the difference 😂

  • @MehediHassan-pn5uc
    @MehediHassan-pn5uc 2 роки тому

    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

  • @c-damocles
    @c-damocles 2 роки тому

    Deployed my first MERN project! Thanks Pedro!

  • @dhananjaikumar8304
    @dhananjaikumar8304 3 роки тому +1

    Bro u r lifesaver ,all other videos showed use of MLabs which was discontinued,but thanks to u I connected my mongodb to heroku

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      Glad I could help! I went through the same thing a year ago hahaha I know the struggle!

  • @Peter-cc7to
    @Peter-cc7to Рік тому

    Thank you for also showing your Problems helped soo much

  • @noelcovarrubias7490
    @noelcovarrubias7490 3 роки тому +2

    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

  • @isacvarghesek7010
    @isacvarghesek7010 2 роки тому

    Thank you so much man..... This was not at all boring.... You taught me a lot of things in just 30 min..

  • @thriller718
    @thriller718 2 роки тому

    By far the best tutorial on deployment. Thank you so much for this. Subscribed!

  • @casafurix
    @casafurix 2 роки тому

    you freaking made my day man, eternally grateful

  • @PraSarYT
    @PraSarYT 2 роки тому

    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❤

  • @sadanalasailendra
    @sadanalasailendra Рік тому +2

    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.

  • @LofiCoder
    @LofiCoder 3 роки тому +1

    Very clear explanation. I'm looking forward for the next tutorial.

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      Thank you soon! More videos come every monday, wednesday, and friday!

  • @rogin8265
    @rogin8265 2 роки тому

    You are great man. Thanks a lot from the bottom of my heart

  • @jayanthsaikiran6624
    @jayanthsaikiran6624 3 роки тому +7

    Me searching for the right video for 2 days. (fails)
    UA-cam: Ok, I'll do it my self.
    Thank you youtube. 😍

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +1

      Hahaha happy to see the youtube algorithm brought you to the video!

  • @joekeesick2298
    @joekeesick2298 Рік тому

    You the man Pedro, thank you

  • @theanandppatel
    @theanandppatel 2 роки тому

    Great Video for the deployment of full stack application. As well as well Explained Video

  • @sundarsundar6721
    @sundarsundar6721 3 роки тому

    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.

  • @alirajgarah2336
    @alirajgarah2336 Рік тому

    Thank you so much, it worked for me.

  • @SandunC320
    @SandunC320 7 місяців тому

    You are fantastic pedro my boy.............................................

  • @rangabharath4253
    @rangabharath4253 3 роки тому +2

    Awesome as always 👍😀

  • @pjguitar15
    @pjguitar15 3 роки тому +2

    Hey Pedroo. You got everything I need 😁

  • @FirstnameLastname-cl4op
    @FirstnameLastname-cl4op 2 роки тому

    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

  • @evamagdy627
    @evamagdy627 3 роки тому +1

    you helped me a lot appreciate your effort

  • @findritesh
    @findritesh 2 роки тому

    Great video. I needed to run this after I switched from local mongo to online cluster: heroku restart

  • @puneethj9920
    @puneethj9920 3 роки тому +1

    U Rocked Man! Thank You

  • @sanjaypaul6651
    @sanjaypaul6651 2 роки тому

    thank you so much sir 💖💖💖💖💖💖💖💖💖💖💖💖 you are a life saver

  • @gauravmavani1413
    @gauravmavani1413 3 роки тому +1

    Ohhh yeahhhhh....i am very excited for this video

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +1

      Lets gooo 🔥 Lmk if u have any questions!

    • @gauravmavani1413
      @gauravmavani1413 3 роки тому +1

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

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      @@gauravmavani1413 Awesome! I followed this same path to deploy a separate socket app I made and it worked!

  • @kiranbenny1240
    @kiranbenny1240 3 роки тому +2

    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 ++

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +1

      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!

  • @DmitryDaren
    @DmitryDaren 2 роки тому

    Thank you. it works. Great video. You explain things. PS: Your Patreon seems to be off...

  • @astronautonmars
    @astronautonmars 3 роки тому

    Thank you so much!. Great video indeed!

  • @zoroXgamings
    @zoroXgamings 3 роки тому +1

    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

  • @newsdaily9825
    @newsdaily9825 2 роки тому

    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.

    • @noobCoder26
      @noobCoder26 2 роки тому

      Thank you So much man😀😀😀😀I was successfully able to deploy after reading ur comment . It was giving error in previously . Thanks .

  • @fredianriko5648
    @fredianriko5648 2 роки тому +1

    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

  • @terrytech4725
    @terrytech4725 3 роки тому +1

    Do you have a video building the project you are deploying? Thanks!

  • @podSnippets_10
    @podSnippets_10 2 роки тому

    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

  • @romimaximus
    @romimaximus 3 роки тому +1

    That was awesome..thankx fro sharing...

  • @harisrama1
    @harisrama1 2 роки тому

    Listen man YOU ARE A FUCKING LEGEND

  • @itumo2645
    @itumo2645 Рік тому +1

    18:43 is that a pic KSI on your desktop folder? LOL

  • @you3667
    @you3667 3 роки тому

    you are great my teacher. Thx

  • @hummingbird2913
    @hummingbird2913 2 роки тому

    LOVE ! Thanks

  • @vladalexandrucristian3303
    @vladalexandrucristian3303 2 роки тому

    Great Video!

  • @justanaverageguy4739
    @justanaverageguy4739 3 роки тому

    4:18 nice choice

  • @marsiyaissah5133
    @marsiyaissah5133 3 роки тому +2

    Thank you thank you thank you sooo muchhhhh!!!..lol

  • @quasarkid4256
    @quasarkid4256 2 роки тому

    This helped a lot thank you

  • @rasulakhundov500
    @rasulakhundov500 2 роки тому

    Thank you so much man

  • @TheNamesJT
    @TheNamesJT 3 роки тому +1

    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

  • @davidzim2824
    @davidzim2824 Рік тому +1

    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

    • @shawn.builds
      @shawn.builds Рік тому

      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!

  • @akks6988
    @akks6988 Рік тому

    Thanks Brother🤜🤛

  • @paraspatil1375
    @paraspatil1375 2 роки тому

    That was great tutorial you really explained in detail. But I think that you should add database url in dotenv file

  • @easytutorialdarija
    @easytutorialdarija 2 роки тому

    thank you very much bro

  • @digvijaysinghthakur2903
    @digvijaysinghthakur2903 3 роки тому

    Thanks a lot for an awesome video.Could you please make videos on how to host same application using docker.

  • @robbinluo2810
    @robbinluo2810 2 роки тому +1

    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

  • @homeofbtsarmy8113
    @homeofbtsarmy8113 3 роки тому +2

    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?

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому +3

      Thank you! Yes it works but you would have to deploy the mysql db elsewhere, I have a video on doing it with mysql!

  • @raba650
    @raba650 3 роки тому +2

    The video I was looking for because of the folder structure. Thank you. P.S. The video is not that clear.

  • @mle3638
    @mle3638 2 роки тому

    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

  • @sidyka6568
    @sidyka6568 3 роки тому +1

    super tuto think you so much

  • @nethmindulsara8800
    @nethmindulsara8800 3 роки тому

    thank you man ❤️

  • @vinothkumars7421
    @vinothkumars7421 3 роки тому +1

    Thanks bro.. Exact deployment details I need

  • @urbn838
    @urbn838 2 роки тому

    Good video !

  • @ewolz
    @ewolz 2 роки тому

    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?

  • @shaheen-e-iqbal744
    @shaheen-e-iqbal744 Рік тому +1

    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

  • @gulay3203
    @gulay3203 3 роки тому

    thank you so much

  • @Nkhugkvivnihy
    @Nkhugkvivnihy Рік тому +1

    Which theme of Vscode you are using?

  • @shahadathimel8629
    @shahadathimel8629 3 роки тому +1

    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= ...

  • @pedroerios1
    @pedroerios1 2 роки тому

    master!

  • @thunderstack5365
    @thunderstack5365 3 роки тому +1

    Useful content

  • @umairahmed9827
    @umairahmed9827 2 роки тому

    Thanks

  • @ieatcrayons3322
    @ieatcrayons3322 2 роки тому

    ty bro

  • @jonathanadel3831
    @jonathanadel3831 2 роки тому

    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?

  • @stanislaustankevich5445
    @stanislaustankevich5445 3 роки тому +1

    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

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      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

  • @showbikshowmma3520
    @showbikshowmma3520 3 роки тому +1

    which is better google cloud, aws or netlify??? for hosting a full stack webapp

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      If it is a business then AWS for sure! Netlify can't host a fullstack app, only frontend!

  • @pmmreddynitw
    @pmmreddynitw 2 роки тому

    Hey great content thanks. Do we need to upload node_modules also to heroku?

  • @justlaugh6234
    @justlaugh6234 Рік тому

    thanks a lot

  • @apeiron4409
    @apeiron4409 3 роки тому +2

    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!

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      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!

    • @apeiron4409
      @apeiron4409 3 роки тому

      @@PedroTechnologies Thank you for the answer!

  • @zimmyyoutube7910
    @zimmyyoutube7910 Рік тому

    Hey Pedro I need a help can you please make a tutorial on MERN stack project for Tutor Finder website.

  • @srijandasbiswas4864
    @srijandasbiswas4864 2 роки тому

    I have used localstorage for auth in react , and localstorage is not working on the netlify hosted website. Any suggestions??

  • @aaronroyan4021
    @aaronroyan4021 2 роки тому

    yarn build isn't running for me
    'npm ERR! missing script: build'

  • @mathewsjoby6455
    @mathewsjoby6455 2 роки тому

    For instance, I host my MERN App and incase I turn my system off, will the Application have access to the server?

  • @mithunpillay4428
    @mithunpillay4428 3 роки тому +1

    Noice! Which Mcbook you using ? any recommendations

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      I use the macbook pro 2019! I really like it, but the macbook air is good enough if it has a lot of RAM!

  • @camillesylla3359
    @camillesylla3359 3 роки тому +1

    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
      @PedroTechnologies  3 роки тому

      Hi, where does it give this error? Is it netlify that gives this error or heroku?

    • @camillesylla3359
      @camillesylla3359 3 роки тому +1

      @@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
      @PedroTechnologies  3 роки тому

      Thats weird! But where did the error appear? Like, where is the error being displayed?

    • @camillesylla3359
      @camillesylla3359 3 роки тому +1

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

    • @camillesylla3359
      @camillesylla3359 3 роки тому +1

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

  • @manuelpineda924
    @manuelpineda924 3 роки тому +1

    tutorial on deployinga MySqli, Reactjs and Node to a ubuntu server would be nice.

    • @PedroTechnologies
      @PedroTechnologies  3 роки тому

      Hey, I am planning on a video on deploying using MySQL!

  • @prakashblaster4962
    @prakashblaster4962 3 роки тому

    Please make video about the pricing of heroku and netlify

  • @webcoder293
    @webcoder293 2 роки тому

    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?