How to run Procfile with multiple commands on Heroku?

Question

I'm trying to deploy the static website to Heroku and I struggle how to correctly setup the Procfile.

I have next command to run on the server:

• npm install
• gulp build (will make a build with /public folder)
• http-server (will serve /public by default)

---

What I've tried:

• web: npm install; gulp build; http-server
• web: npm install & gulp build & http-server

Solution 1

Okay, so I've spent a bit of time on that and came up with the answer. By default, heroku is installing all packages from the package.json file, so npm install is no longer required. Then what was left - gulp build and http-server.

For that case, I've added "postinstall" : "gulp build" to my package.json and it left me with web: http-server.

Simplifying things have actually solved the problem. Not sure how useful that information might be to you, but it's worth to share.

Solution 2

You may also have been looking for && or a library like concurrently.

Regardless, and per the docs, use Procfile as nothing more than an entry point to your npm start script.

---

Use the npm scripts lifecycle as stated (npm-scripts).

Directly From The Documentation (heroku-build-process).

"scripts": {
    "start": "node index.js",
    "test": "mocha",
    "postinstall": "bower install && grunt build"
}

Heroku has adopted the 'there's an app for everything' mantra, but for buildpacks. Whatever you're building, there's a buildpack for it.

Comments

[Michael]

You should include the necessary code and details in your answer, not just as links

[dancypants]

For what it's worth you can also use heroku-postbuild in case you already use postbuild locally or somewhere else, e.g. "heroku-postbuild": "vue-cli-service build"

[Tyler2P]

A good answer will always include an explanation why this would solve the issue, so that the OP and any future readers can learn from it.