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
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.
. ├── LICENSE ├── docker-compose.prod.yml ├── 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: 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 https://devcenter.heroku.com/articles/buildpacks remote: remote: ! Push failed remote: Verifying deploy... remote: remote: ! Push rejected to app-name. remote: To https://git.heroku.com/mern-app-server.git
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.
heroku push the entire repo, Heroku can’t identify the default language from the top-level of the repo.
A simple solution!
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 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: remote: -----> Node.js app detected ... remote: Verifying deploy... done. To https://git.heroku.com/mern-app-server.git
Pic Credits: Photo by Safar Safarov