Heroku: How to run npm build on a python application in Heroku during deployment?

Question

I have a web application written with a Python/Django backend API, and a Vue.js frontend.

We serve the static file produced by Vue as static Django files. The frontend application is located within a separate folder in the Django project.

At the moment before each deployment I need to run npm build locally and deploy with the dist folder.

I have a small script for deployment:

cd ./vuejs-frontend
npm install
npm run build

git add --force dist/*
git commit -m "Add dist folder"

local_branch=`git rev-parse --abbrev-ref HEAD`
git push heroku ${local_branch}:master -f
git reset --hard HEAD~1

cd ..

I want to move move the npm install part to be executed during the deployment. I am trying to add this in the release.sh that heroku executes during each deployment. Basically I want this in my release.sh:

cd ./vuejs-frontend
npm install
npm run build
cd ..

The problem is that the heroku/python buildpack does not have node and npm. I tried adding the heroku/nodejs along with the other buildbacks, but then Heroku complains during deployment, that it was not able to locate a node application:

remote:  !     The 'heroku/nodejs' buildpack is set on this application, but was
remote:  !     unable to detect a Node.js codebase.

Is there anyway to get npm on Heroku?

Answer 1

The problem is that the heroku/python buildpack does not have node and npm. I tried adding the heroku/nodejs along with the other buildbacks, but then Heroku complains during deployment, that it was not able to locate a node application:

remote:  !     The 'heroku/nodejs' buildpack is set on this application, but was
remote:  !     unable to detect a Node.js codebase.

You need a package.json at the root level ./ of your git repo. You only have one at ./vuejs-frontend.

Just copy the package.json from ./vuejs-frontend/package.json and adjust the script in "build": "<command>" to cd ./vuejs-frontend && <command>

---

Side note: This may become useful. You can define some Heroku specific build steps: https://devcenter.heroku.com/articles/nodejs-support#heroku-specific-build-steps

"scripts": {
  "heroku-prebuild": "echo This runs before Heroku installs dependencies.",
  "heroku-postbuild": "echo This runs after Heroku installs dependencies, but before Heroku prunes and caches dependencies.",
  "heroku-cleanup": "echo This runs after Heroku prunes and caches dependencies."
}