How to Deploy MERN Projects on Heroku
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.
