Deploying your app to Heroku is stressful enough. If you have a subdirectory that you want to deploy by trying to push the whole repo you're gonna have a bad time.
Well why can't I deploy the whole repo?
Well, for starters, Heroku doesn't like that, and it'll let you know exactly why by showing you the following errors.
My first instinct was to (cry) manually set the appropriate buildpack for a node.js server as mentioned by Heroku's Dev Center. However, Heroku states that...
By default, these buildpacks will be searched in this order until a match is detected and used to compile your app.
So there really isn't any need for me to manually set the buildpack (I did it anyways bc I'm paranoid like that).
heroku buildpacks:set heroku/nodejs
So now I've manually set the buildpack to Node.js and tried pushing this bad boy to Heroku (After committing of course). Fingers crossed
Luckily, the errors give us a clue as to what the problem is. In this case, it looks like I'm trying to deploy a repo with multiple directories. If you look at Heroku's Dev Center once again you'll see that:
Heroku Node.js support will only be applied when the application has a package.json
file in the root directory.
So in my case, I want to deploy one specific subdirectory that has a package.json
file. But instead I'm trying to deploy the entire repo which doesn't have a package.json
file in it and in effect making Heroku bug out.
The Fix
Can you just tell me what to do pls?
Sure! Let's start by assuming you've completed all the Heroku prerequisites:
npm install -g heroku
heroku login
heroku create
heroku git:remote -a my-app
I was given a random name for my app by Heroku so I decided to change it.
heroku apps:rename my-new-app-name
Once renamed I make sure to update my git remotes.
heroku git:remote -a my-new-app-name
Now for the haymaker.
git subtree push --prefix path/to/subdirectory heroku main
Well this is embarrassing. Looks like I need to run this command from the top level of the working tree. A couple of cd ..
's later and...
You have now successfully deployed your subdirectory to Heroku! Thanks for reading!
Extra Credit: npm-scripts
Kudos if you're still reading. Let's say that I want to make changes to my app's frontend and backend and deploy to Heroku. Writing...
git subtree push --prefix path/to/subdirectory heroku main
...is too verbose for my taste so I'm going to add some npm-scripts to the package.json
of my backend repo.
{
"scripts": {
//...
"build:ui": "rm -rf build && cd ../../part2/phonebook-frontend && npm run build --prod && cp -r build ../../part3/phonebook-backend",
"deploy": "git subtree push --prefix part3/phonebook-backend heroku main",
"deploy:full": "npm run build:ui && git add . && git commit -m uibuild && git push && npm run deploy",
"logs:prod": "heroku logs --tail"
}
}
- The script
npm run build:ui
builds the frontend, then copies the production version under the backend repository. -
npm run deploy
pushes the current backend to Heroku. -
npm run deploy:full
combines the two and has the necessary git commands to update the backend repository. -
npm run logs:prod
shows the heroku logs which comes in handy for debugging.
Please note that the paths in the script build:ui
& deploy
depend on the location of repositories in your file system!
Top comments (2)
Useful and entertaining !
This was very helpful, thanks