Deploying a Git Subdirectory to Heroku

#node #tutorial #git #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

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.

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

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...

Heroku enumerating — Looking good so far...

Node.js detected — Heroku you so smart bb

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!