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.
Bhai website ki theme change karo yaar
ReplyDeleteBahut odd lagti hai
New style try karo
Bhai website ki theme change karo yaar
ReplyDeleteBahut odd lagti hai
New style try karo
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
ReplyDeletethat the path is correct and try again.
At line:1 char:1
+ git status
+ ~~~
Bro just enter the path name in environment variables...I think you have not installed git bash
Deleteopen cmd as an administrator and run the command
DeleteOk
ReplyDeleteremote: npm ERR! code ENOENT
ReplyDeleteremote: 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
Delete the .GIT file from your server folder also watch the ssh key video if you get any more error contact me
DeleteMy mail id is amatishridhar@gmail.com
DeleteGuys I getting error.... failed to compile node.js app.......not able to resolve since a week... help me out 🙂
Deletegetting same error
Delete6565
Deletesdffdegf
ReplyDeletenothing happened
ReplyDeleteEnumerating objects: 207, done.
ReplyDeleteCounting objects: 100% (207/207), done.
Delta compression using up to 8 threads
Compressing objects: 100% (178/178), done.
Writing objects: 100% (207/207), 166.70 KiB | 3.47 MiB/s, done.
Total 207 (delta 36), reused 0 (delta 0), pack-reused 0
remote: Compressing source files... done.
remote: Building source:
remote:
remote: -----> Building on the Heroku-20 stack
remote: -----> Determining which buildpack to use for this app
remote: ! No default language could be detected for this app.
remote: HINT: This occurs when Heroku cannot detect the buildpack to use for this application automatically.
remote: See https://devcenter.heroku.com/articles/buildpacks
remote:
remote: ! Push failed
remote: !
remote: ! ## Warning - The same version of this code has already been built: d70d82ff21c866aac46ca6b166bfb84ba9d660ab
remote: ! We have detected that you have triggered a build from source code with version d70d82ff21c866aac46ca6b166bfb84ba9d660ab
remote: ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
remote: !
remote: ! If you are developing on a branch and deploying via git you must run:
remote: !
remote: ! git push heroku :main
remote: !
remote: ! This article goes into details on the behavior:
remote: ! https://devcenter.heroku.com/articles/duplicate-build-version
remote:
remote: Verifying deploy...
remote:
remote: ! Push rejected to ai-utube-tool.
remote:
To https://git.heroku.com/ai-utube-tool.git
! [remote rejected] master -> master (pre-receive hook declined)
I'm facing the above error. Could anyone please help me ? Thank you!
ReplyDeleteclient or server dono foalder se .git file delete karke fir se try karo
DeleteHo jayega
it is good
DeleteI have facing build failed and heroku postbuiled failed problem. Please Help me out :)
ReplyDeleteApp works completly fine until i deploy..then this happens
ReplyDeletehttps://mern-prashant.herokuapp.com
please help
hey, do u mind sharing source code with me
DeleteRemoving proxy
ReplyDeleteHow will we be able to run the application on Development Environment.
Even without removing proxy it works fine on Both Prod and Dev Environment.
hint: You've added another git repository inside your current repository.
ReplyDeletehint: Clones of the outer repository will not contain the contents of
hint: the embedded repository and will not know how to obtain it.
hint: If you meant to add a submodule, use:
hint:
hint: git submodule add server
hint:
hint: If you added this path by mistake, you can remove it from the
hint: index with:
hint:
hint: git rm --cached server
hint:
hint: See "git help submodule" for more information.
sir g i face this problem
It is good website
ReplyDelete