To keep your codebase clean, it helps to have a separation of concerns. Splitting your codebase into a backend and frontend directory a great way to do this.
Unfortunately Heroku buildpacks do not detect nested applications in a repo. There are two ways to overcome this:
Option 1 - Use a third party subdir module (heroku-buildpack-subdir)
Use a Third party buildpack that supports applications in project subdirectories. There’s a few out there, but I recommend heroku-buildpack-subdir as it has the most stars. Most only support 1 folder depth, but that should be all you need.
Add heroku-buildpack-subdir to your heroku app’s settings dashboard.
Once done, Create a new file called .buildpacks and add it to your project root.
Heroku will now install the correct buildpacks for the backend and frontend directory next time you deploy!
Note: You can do the same thing for Review Apps by adding heroku-buildpack-subdir to your app.json.
Option 2 - Ensure your backend and frontend entry points are available in the project root
Most application’s entry points can be moved around, so why not do that for a django/node application?
Say you have the following project structure:
backend/ example_app/ Manage.py Pipfile frontend/ src/ index.jsx webpack.config.js package.json
If you deploy this right now, Heroku will fail because it doesn’t know what kind of project it’s looking at.
To fix this, move the Django project’s Pipfile and the Node project’s package.json to the root directory and configure to use nested project assets. Like so:
backend/ example_app/ Manage.py frontend/ src/ Index.jsx webpack.config.js package.json Pipfile
The benefit of this approach is having no extra buildpack configuration in Heroku. For this reason I’d recommend Option 2 over Option 1.
Using one of these methods will enable you to use multiple buildpacks with your Heroku app!