Add heroku deployment guide

[zigomir]

I see there are many other guides for heroku proposed:

• Add description on how to deploy with Heroku #3684
• docs: document how to setup vue on heroku #3607
• docs: Added Deployment Guideline for heroku #3445
• docs: Adding Heroku platform guide #3285
• Heroku instructions based on express server #2998
• Update deployment.md #3365

But all of them include some sort of node server which isn't really required with heroku-buildpack-static buildpack.

I'd argue that, this is the easiest and most straightforward way to deploy vue-cli app to heroku ;)

[aislanmaia]

So, how is the "easiest way"? I mean, how to deploy to heroku using vue-cli?

[zigomir]

@aislanmaia see insturcitons in https://github.com/vuejs/vue-cli/pull/3777/files

I just deployed a fresh vue-cli app to heroku, without needing to add any other packages like other pull requests do – that's why I claim this is the easiest.

It also handles SPA correctly and serves index.html for all routes.

@sodatea whom should I bother to review this PR?

[aislanmaia]

Oh man.. many thanks for the instructions. I was right now trying to deploy with vue-cli but got error into the heroku app without the serve package, because heroku can't found vue-cli-service command.
I found that I was missing to add heroku-buildpack.

[aislanmaia]

@zigomir what you put in the start script into package.json
Heroku logs error missing that part.

Here is my scripts:

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "heroku-postbuild": "npm run build"
},

[zigomir]

@aislanmaia I think that adding heroku buildpacks:add heroku/nodejs will pick up build automatically. But would need to check.

[aislanmaia]

I have tested it out. It works with the buildpacks. But I have ditched Heroku because I'm using Cloudinary service to my images processing, and whatever you want, Heroku forces you to install addons. I'm using now firebase hosting that works straight forward with the libs my static frontend is using.

[NataliaTepluhina]

@zigomir thank you for creating this PR! However, it missed a step for Heroku CLI installation. Would you mind to add it to the guide?

[zigomir]

@NataliaTepluhina done. I just added a link as heroku has different installers for each platform.

[NataliaTepluhina]

@zigomir tested it and it looks like definitely the easiest way to deploy to Heroku. Left one minor suggestion, as soon as it's resolved I will merge.

[zigomir]

@NataliaTepluhina thanks, done!

[vue-bot]

Hey @zigomir, thank you for your time and effort spent on this PR, contributions like yours help make Vue better for everyone. Cheers! 💚

[neillsom]

When deploying to heroku I keep running into the error "npm ERR! missing script: start"

I was able to get the app running properly by adding a start script to package.json

	"scripts": {
		"serve": "vue-cli-service serve",
		"start": "vue-cli-service serve",
		"build": "vue-cli-service build",
		"lint": "vue-cli-service lint"
	},

[zigomir]

@neillsom are you using both buildpacks mentioned in this PR?

heroku buildpacks:add heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static

[neillsom]

@neillsom are you using both buildpacks mentioned in this PR?

heroku buildpacks:add heroku/nodejs
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static

My mistake! I had github auto-deploying, so the heroku commands I was running from the command line were for the wrong remote 🤦 Thanks for helping me track it down