Deploy Django/React application heroku - node.js

Question

I have deployed django app on heroku, and everything is fine, no errors, etc. I'm using react on frontend, and I want to do npm install, gulp build so I can configurate my app properly.
I can not run heroku run npm install, all I have is bash: npm: command not found, and I suppose that is ok because I need to trigger it somehow when he is building the app on the server, so I've modify my package.json like this:
{
"name": "Test app",
"version": "1.0.0",
"description": "Testing",
"main": "bundle.js",
"scripts": {
"postinstall": "npm install"
},
"dependencies": {
"bootstrap": "^3.3.7",
"babel-preset-es2015": "^6.1.2",
"babel-preset-react": "^6.1.2",
"babelify": "^7.2.0",
"browser-sync": "^2.10.0",
"browserify": "^12.0.1",
"browserify-shim": "^3.8.11",
"classnames": "^2.2.0",
"core-util-is": "^1.0.1",
"del": "^2.1.0",
"flux": "^2.1.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-bless": "^3.0.1",
"gulp-connect": "^2.2.0",
"gulp-html-replace": "^1.5.4",
"gulp-if": "^2.0.0",
"gulp-insert": "^0.5.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.1.0",
"gulp-minify-css": "^1.2.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-sync": "^0.1.4",
"gulp-uglify": "^1.4.2",
"history": "^1.13.0",
"keymirror": "^0.1.1",
"lodash": "^3.10.1",
"react": "^0.14.2",
"react-addons": "^0.9.0",
"react-bootstrap": "^0.27.3",
"react-dom": "^0.14.2",
"react-mixin": "^3.0.3",
"react-router": "^1.0.0",
"react-style": "^0.5.5",
"reqwest": "^2.0.5",
"rimraf": "^2.4.3",
"run-sequence": "^1.1.4",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.6.0",
"when": "^3.7.4"
},
"devDependencies": {
"babel-preset-es2015": "^6.1.2",
"babel-preset-react": "^6.1.2",
"babelify": "^7.2.0",
"browser-sync": "^2.10.0",
"browserify": "^12.0.1",
"browserify-shim": "^3.8.11",
"classnames": "^2.2.0",
"core-util-is": "^1.0.1",
"del": "^2.1.0",
"flux": "^2.1.1",
"gulp-autoprefixer": "^3.1.0",
"gulp-bless": "^3.0.1",
"gulp-connect": "^2.2.0",
"gulp-html-replace": "^1.5.4",
"gulp-if": "^2.0.0",
"gulp-insert": "^0.5.0",
"gulp-livereload": "^3.8.1",
"gulp-load-plugins": "^1.1.0",
"gulp-minify-css": "^1.2.1",
"gulp-rename": "^1.2.2",
"gulp-sass": "^2.1.0",
"gulp-sourcemaps": "^1.6.0",
"gulp-sync": "^0.1.4",
"gulp-uglify": "^1.4.2",
"history": "^1.13.0",
"keymirror": "^0.1.1",
"lodash": "^3.10.1",
"react": "^0.14.2",
"react-addons": "^0.9.0",
"react-bootstrap": "^0.27.3",
"react-dom": "^0.14.2",
"react-mixin": "^3.0.3",
"react-router": "^1.0.0",
"react-style": "^0.5.5",
"reqwest": "^2.0.5",
"rimraf": "^2.4.3",
"run-sequence": "^1.1.4",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.6.0",
"when": "^3.7.4"
},
"engines": {
"node": "8.0.0",
"npm": "5.0.4"
},
"author": "",
"license": ""
}
But that still does not trigger npm install process on deployment, so can any one help me understand how can I configurate this properly?
This is my Procfile:
web: python manage.py runserver 0.0.0.0:$PORT --noreload
worker: python worker.py

Answer 1

Heroku supports different server-side languages via buildpacks:
Buildpacks are responsible for transforming deployed code into a slug, which can then be executed on a dyno. Buildpacks are composed of a set of scripts, and depending on the programming language, the scripts will retrieve dependencies, output generated assets or compiled code, and more.
Since the Python part of your application seems to be installing correctly Heroku must be detecting it as a Python application (because it includes a requirements.txt file) or you have configured it as one manually. In many cases a single buildpack is sufficient.
However, since you are also using Node.js you should enable a second buildpack:
There are many scenarios in which a single buildpack is not sufficient when building an application. This includes cases when you need to:
Run a buildpack for each language your app uses. For example, run a JavaScript buildpack for assets and a Ruby buildpack for your application.
The basic flow looks like this (using the Heroku CLI on your development machine):
heroku buildpacks:set heroku/python
heroku buildpacks:add --index 2 heroku/nodejs
The links I provided above contain many more details. I recommend reading both of them in their entirety.