Learn The MERN Stack [8] - Prepare & Deploy

Learn The MERN Stack [8] – Prepare & Deploy


docker on shared hosting

In this video we will prepare our application for deployment to Heroku. We will create a heroku post build script so that we do not have to manually run “npm run build” for React. It will happen on the server once we push to it.

Code:

MERN Stack Front To Back Udemy Course:

💖 Become a Patron: Show support & get perks!

Website & Udemy Courses

Follow Traversy Media:

The Developer Hangout: Public Discord Server

45 thoughts on “Learn The MERN Stack [8] – Prepare & Deploy

  1. Oh come ooooon…. I've watched all previous videos from this playlist, looking at it like it was my last hope. I can't deploy my MERN app for almost one week now! And right at the end… I've done everything exactly the same, i mean exactly the same! And here again… push failed, pre-receive hook declined. Can somebody tell me what's up with the universe?

  2. For anyone getting a page with just "Cannot GET /", adding the following to server.js worked for me:

    var distDir = __dirname + "/dist/";
    app.use(express.static(distDir));

  3. Hey there !

    Many thanks for this lovely tutorial !

    Got a question, the app is deployed on Heroku, but it still relies on our localhost server (because we make our requests to http://localhost:5000/api/items
    If I stop the server running on my 5000 port, the data doesn't load on the app hosted on Heroku (which is totally normal).

    My question then : how do we change so that our requests go to (example) https://<your-heroku-app-name&gt;.herokuapp.com/api/items ? Or am I totally wrong here ?

    Thanks

  4. For people who got errno 126:
    1. Create a new file named .gitignore in root folder and client folder
    2. Write
    .gitignore
    /node_modules
    3. Run "git rm -r –cached . " in the root folder
    4. Run "git add . " in the root folder
    5. Run "git commit -am 'commit' " in the root folder
    6. Run "git push heroku master" in the root folder

  5. If you fail in heroku-postbuild. make sure remove .git folder in client. After that remove git init in root folder, then do git init again in root folder and push again

  6. If you get an error when deploying, see if the error comes after: NPM_CONFIG_PRODUCTION=false npm install –prefix client && npm run build –prefix client
    If it's the case then check if there is an existing git repository in the ./client/ folder.
    If so, remove it (rm -rf ./client/.git/) and attempt to deploy again.
    This solved the issue for me. Cheers! 🙂

  7. Do not create the app through Heroku CLI if you want better name for the app.

    Create the app through the Heroku website and it gives you option to name it.

    (I think it is available as a command line option flag in CLI too, though).

  8. Great series!
    I kept running into issues when trying to deploy:

    remote: ! Push failed due to an unrecognized error, and we've been notified.

    remote:

    remote: ! Please try pushing again.

    remote: ! If the problem persists, see http://help.heroku.com/ and provide Request ID xxx.

    remote:

    remote:

    remote: Verifying deploy…

    remote:

    remote: ! Push rejected to xxx.

    remote:

    To https://git.heroku.com/xxx.git

    ! [remote rejected] master -> master (pre-receive hook declined)

    error: failed to push some refs to 'https://git.heroku.com/xxx.git&#39;

    Ended up deleting the .git file which was auto generated in the client folder and that alone helped.
    Solution link: https://stackoverflow.com/a/54390339/8005781

  9. Can someone tell me how to the same thing but with cors my express node server is deployed on aws ec2 which gives http and the frontend with react is deployed on netlify which gives https and I keeping getting cors errors even though I have set the cors middleware installed in the express server. Can someone help me. New to JS

  10. Hello, I keep having this problem:

    > [email protected] build /tmp/build_830cdc4d/client

    remote: > react-scripts build

    remote:

    remote: sh: 1: react-scripts: Permission denied

    remote: npm ERR! code ELIFECYCLE

    remote: npm ERR! errno 126

    remote: npm ERR! [email protected] build: `react-scripts build`

    remote: npm ERR! Exit status 126

    remote: npm ERR!

    remote: npm ERR! Failed at the [email protected] build script.

    remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    Does anyone know how to solve it? it looks like heroku does not have permission to run the scripts. (it works locally)

  11. Hi , I hope someone helps me 🙂
    so i completed the app from episode 1 till here and i was able to build it successfully.
    Though when i tried to open the application the backend isnt working correctly.
    When i try going : https://nameless-forest-48934.herokuapp.com/api/items , i am getting application error.
    https://nameless-forest-48934.herokuapp.com/
    github project link : https://github.com/muzeke/mern_shopping_list
    Note: I did make the app using functional components and hooks.
    I did get an error /warning on load : Legacy context API has been detected within a strict-mode tree.
    But the app works fine and per my research this error is because of reactstrap, and should not be an issue on production (not very sure with this though)
    Thank YOu

  12. Thanks for the help.. was struggling for the whole day.. and now i am finally able to host my express sever to heroku.. thanks to you.. was able to figure things out.. please keep up the good work…

  13. Amazing tutorials! Thank you. I followed your guide and was able to deploy the app to heroku, only issue is that the backend seems to no longer be connected to React. When i try to login or register a user, nothing happens and i get a 503 error. I saw online so post about a procfile but did not see you talk about it in the video. Any idea what i did wrong? My settings are basically identical to yours, also implemented JWT.

    Here's my app on github:

    https://github.com/onidemon/wh-evcharge

Leave a Reply

Your email address will not be published. Required fields are marked *