THAPA TECHNICAL

HOUSE OF WEB DEVELOPERS AND TECHNOLOGY.

How to Deploy MERN Projects on Heroku

 How to Deploy MERN Projects on Heroku


Before Starting with the deployment of MERN project on Heroku, I will highly recommend you to watch this video first on SSH





Also, I want you to watch the video too. Here I already show about how to do registration and login in Heroku app.




I will tell you the steps to follow, And there are many different ways to do it, So what we are looking is one of the best way to do it ok.


1: Copy and Paste the Client folder inside the Server folder and then delete the client folder outside the server folder.





2: We need to change the PORT number from Static to Dynamic for Heroku

Now, first delete the PORT from the .env file and simply write


const PORT = process.env.PORT || 5000;


on the server app.js file.


3: We need to tell the Heroku to serve the statics files of the client.

ð  We need to go to client folder and then run npm build. It will create a build folder and that is the folder which we want to serve on Heroku as a frontend.

C:\xampp\htdocs\SourceCode\MERNThapaYoutube\server\client>npm run build


// step 3: Heroku 

 

if ( process.env.NODE_ENV == "production"){

    app.use(express.static("client/build"));

    const path = require("path");

    app.get("*", (reqres=> {

        res.sendFile(path.resolve(__dirname'client''build''index.html'));

    })

}



4: Remove the proxy from the package.json file, if you have any


 "proxy""http://localhost:5000/",




5: We need to add few scripts on the Server package.json files in order to tell Heroku, what to do and what not to.

 

 "scripts": {

    "test""echo \"Error: no test specified\" && exit 1",

    "start""node app.js",

    "heroku-postbuild""NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"

  },



6: Remove the git file from the Client side, if there is any

Code = rm -rf .git




7: Once all above steps completed, then we will create an application on Heroku

So we need to write

Heroku login

Then simply login on it.

This is how we do..


C:\xampp\htdocs\SourceCode\MERNThapaYoutube\server>heroku login

heroku: Press any key to open up the browser to login or q to exit:

Opening browser to https://cli-auth.heroku.com/auth/cli/browser/f7ff9856-c673-438b-8960-6898cd7c51c6?requestor=SFMyNTY.g2gDbQAAAA0xMDMuODYuMTgzLjczbgYAHMoE5HgBYgABUYA.2U4FuHH1Jkmd0OWD4RsRTRSdDTFRGQyPgCGy3CQKICQ

Logging in... done

Logged in as *************@gmail.com


8: Once login then go to Heroku website to create an Heroku app to host our project

Click on New button on the top right corner. Then give the name of the project, make sure the name of the project must be unique. Then click on create app button to complete the process. 








9: Once you create simply open the Heroku app and that’s it everything was already written there just follow the steps.

=> We need to initialize git to the main MERN folder not individually on each client or server. Before initialize git make sure if there are any git repo already present delete it.

 


10: At last make sure the add the Config Vars for these we need to go to settings of our app and then fill the database and secret key value that’s it. 


11: At bottom we have our Website APP link and it’s done. 

9 comments:

  1. Bhai website ki theme change karo yaar
    Bahut odd lagti hai
    New style try karo

    ReplyDelete
  2. Bhai website ki theme change karo yaar
    Bahut odd lagti hai
    New style try karo

    ReplyDelete
  3. git : The term 'git' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify
    that the path is correct and try again.
    At line:1 char:1
    + git status
    + ~~~

    ReplyDelete
    Replies
    1. Bro just enter the path name in environment variables...I think you have not installed git bash

      Delete
  4. remote: npm ERR! code ENOENT
    remote: npm ERR! syscall open
    remote: npm ERR! path /tmp/build_7a94f6e5/client/package.json
    remote: npm ERR! errno -2
    remote: npm ERR! enoent ENOENT: no such file or directory, open '/tmp/build_7a94f6e5/client/package.json'
    remote: npm ERR! enoent This is related to npm not being able to find a file.
    remote: npm ERR! enoent
    remote:
    remote: npm ERR! A complete log of this run can be found in:
    remote: npm ERR! /tmp/npmcache.BpuoX/_logs/2021-06-20T06_09_48_057Z-debug.log
    remote: npm ERR! code ELIFECYCLE
    remote: npm ERR! errno 254
    remote: npm ERR! MERN_PROJECT@1.0.0 heroku-postbuild: `NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client`
    remote: npm ERR! Exit status 254
    remote: npm ERR!
    remote: npm ERR! Failed at the MERN_PROJECT@1.0.0 heroku-postbuild script.
    remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    remote:
    remote: npm ERR! A complete log of this run can be found in:
    remote: npm ERR! /tmp/npmcache.BpuoX/_logs/2021-06-20T06_09_48_081Z-debug.log
    remote:
    remote: -----> Build failed
    remote:
    remote: We're sorry this build is failing! You can troubleshoot common issues here:
    remote: https://devcenter.heroku.com/articles/troubleshooting-node-deploys
    remote:
    remote: If you're stuck, please submit a ticket so we can help:
    remote: https://help.heroku.com/
    remote:
    remote: Love,
    remote: Heroku


    Facing this error please solve

    ReplyDelete
    Replies
    1. Delete the .GIT file from your server folder also watch the ssh key video if you get any more error contact me

      Delete
    2. My mail id is amatishridhar@gmail.com

      Delete
    3. Guys I getting error.... failed to compile node.js app.......not able to resolve since a week... help me out 🙂

      Delete