, ,

Making Heroku Subdirectories Easier

, ,

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.

Dashboard -> Settings -> Buildpacks

Dashboard -> Settings -> Buildpacks

Once done, Create a new file called .buildpacks and add it to your project root.

frontend=https://github.com/heroku/heroku-buildpack-nodejs.git
backend=https://github.com/heroku/heroku-buildpack-python.git

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!

Jake Barber