DEV Community

Cover image for Deploying a Git Subdirectory to Heroku
Rodrigo Rojas
Rodrigo Rojas

Posted on

Deploying a Git Subdirectory to Heroku

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

I was given a random name for my app by Heroku so I decided to change it.

heroku apps:rename my-new-app-name
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Update git remote

Now for the haymaker.

git subtree push --prefix path/to/subdirectory heroku main
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

...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"
  }
}
Enter fullscreen mode Exit fullscreen mode
  • 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

Top comments (2)

Collapse
 
phennique profile image
pablohennique

Useful and entertaining !

Collapse
 
joshuajee profile image
Joshua Evuetapha

This was very helpful, thanks