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("*", (req, res) => {

        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.