If you work with a codebase that works as a monorepo. A react client, multiple servers; a node server, maybe a flask server, etc. all under the same directory. Typically a client and a server running on different ports. Have you wondered how to deploy each of them on various platforms ?

Let’s consider an example of a MERN application, we have a client intented to be served via Vercel or Netlify and an Express server.

Here, In the case of deploying the client, both Vercel and Netlify provides an option to deploy a sub-directory out of the box.





Consider this example, the below is the file structure of my MERN SPA application.

├── docker-compose.yml
├── Makefile
├── Procfile
├── client
│   ├── Dockerfile
│   ├── Makefile
│   ├── package.json
│   ├── src
└── server
    ├── Dockerfile
    ├── Makefile
    ├── Procfile
    ├── index.ts
    ├── app/
    └── yarn.lock

Have you tried pushing the whole repo and have stumbled upon this?

remote: Building source:
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
remote:  !     Push failed
remote: Verifying deploy...
remote: ! Push rejected to app-name.

When it comes to deployment, on Heroku. The default language needs to be identified by Heroku in order to build the application. Eg. in the case of a node.js application. The package.json at the top level (root) helps Heroku identify that it is a node app. So that a builder for node is used to deploy the application.

When you heroku push the entire repo, Heroku can’t identify the default language from the top-level of the repo.

A simple solution!

Use subtrees

A git subtree lets you nest one repository inside another as a sub-directory. It is one of several ways Git projects can manage project dependencies.

Lets implement this via Git Subtrees

Heroku Setup

heroku login
heroku git:remote -a mern-app-server

Run, from the top-level of the repo.

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

For example, if the subdirectory is the server in the root of my-repo, then running:

git subtree push --prefix server/ heroku master

will push the server subtree into Heroku ☁️

Finally if you get this output,

remote: Building source:
remote: -----> Node.js app detected
remote: Verifying deploy... done.


Pic Credits: Photo by Safar Safarov