Deploying a Git Subdirectory to Heroku

Not in Heroku’s house

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, …

Mutombo No Image

Not in Heroku’s house

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.

Buildpack Error

It’s not you it’s your buildpack

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

Push rejected error

Feelsbadman

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.

Directory errors

That’s a lot of red…

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

Heroku rename

What’s in a name?

Once renamed I make sure to update my git remotes.

heroku git:remote -a my-new-app-name

Update git remote

Now for the haymaker.

git subtree push --prefix path/to/subdirectory heroku main

Git subtree error

sigh

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…

Heroku enumerating

Looking good so far…

Node.js detected

Heroku you so smart bb

Heroku success

Success!

You have now successfully deployed your subdirectory to Heroku! Thanks for reading!
Jim Carey beautiful



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!



Resources and Shoutouts


Print Share Comment Cite Upload Translate
APA
Rodrigo Rojas | Sciencx (2024-03-29T02:10:54+00:00) » Deploying a Git Subdirectory to Heroku. Retrieved from https://www.scien.cx/2022/01/11/deploying-a-git-subdirectory-to-heroku/.
MLA
" » Deploying a Git Subdirectory to Heroku." Rodrigo Rojas | Sciencx - Tuesday January 11, 2022, https://www.scien.cx/2022/01/11/deploying-a-git-subdirectory-to-heroku/
HARVARD
Rodrigo Rojas | Sciencx Tuesday January 11, 2022 » Deploying a Git Subdirectory to Heroku., viewed 2024-03-29T02:10:54+00:00,<https://www.scien.cx/2022/01/11/deploying-a-git-subdirectory-to-heroku/>
VANCOUVER
Rodrigo Rojas | Sciencx - » Deploying a Git Subdirectory to Heroku. [Internet]. [Accessed 2024-03-29T02:10:54+00:00]. Available from: https://www.scien.cx/2022/01/11/deploying-a-git-subdirectory-to-heroku/
CHICAGO
" » Deploying a Git Subdirectory to Heroku." Rodrigo Rojas | Sciencx - Accessed 2024-03-29T02:10:54+00:00. https://www.scien.cx/2022/01/11/deploying-a-git-subdirectory-to-heroku/
IEEE
" » Deploying a Git Subdirectory to Heroku." Rodrigo Rojas | Sciencx [Online]. Available: https://www.scien.cx/2022/01/11/deploying-a-git-subdirectory-to-heroku/. [Accessed: 2024-03-29T02:10:54+00:00]
rf:citation
» Deploying a Git Subdirectory to Heroku | Rodrigo Rojas | Sciencx | https://www.scien.cx/2022/01/11/deploying-a-git-subdirectory-to-heroku/ | 2024-03-29T02:10:54+00:00
https://github.com/addpipe/simple-recorderjs-demo