17

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
ummahusla
  • 2,043
  • 3
  • 28
  • 42
  • 2
    Procfile is not the correct place where you should trigger the build steps, instead, use some customised buildback. It would be better if the site building generating is done elsewhere then in Heroku example use some CI tool(CircleCI etc). Currently after every restart, the Procfile command would run and start the install process. – Risto Novik Jun 24 '17 at 07:48
  • 1
    @RistoNovik thanks for your comment, I've just solved it out and posted an answer :) I've tried to keep it simple as much as possible. – ummahusla Jun 24 '17 at 11:25

3 Answers3

23

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.

ummahusla
  • 2,043
  • 3
  • 28
  • 42
  • 2
    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"` – dancypants Jul 12 '18 at 16:26
4

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.

Community
  • 1
  • 1
Harry Scheuerle
  • 377
  • 2
  • 15
2

You can run multiple command inside Procfile using sh -c command :

worker: sh -c 'firstCommand && secondCommand && etc...'

Notes : Procfile should be at the project root level.

For example :

worker: sh -c 'cd backend && yarn install && yarn build && yarn start-worker'

Or in your case (if u have Procfile at the same level as package.json) :

web: sh -c 'npm install && gulp build && npm run http-server'
Leo
  • 359
  • 4
  • 6
  • 2
    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. – Tyler2P Jan 30 '22 at 21:41