Webpack: Deploying to Heroku

[gkatsanos]

I Was wondering if there's a how-to on how to deploy to Heroku ?
I connected the github repo to their panel and they detected it as a "Node" application and run a build, but it fails.

Do I need a Node server to run a vue-cli webpack app? Can I just npm run build and copy over the dist folder or something?

Thanks for any help!

[LinusBorg]

Can I just npm run build and copy over the dist folder or something?

Exactly. all you have to upload is the /dist folder.

Now, I don'T know the config panel of Heroku, so I don't know weither you can reference a folder within a repo.

If that is possible, I would remove /dist from the .gitignore file, build the release, push the changes to github and reference /dist from Heroku.

[gkatsanos]

Thank you @LinusBorg . I should have closed this earlier - I figured I'd try that and indeed it worked. There's no "node.js" / "express.js" part used in my application so everything should be static :)

[nicksarafa]

Solid blog post on deploying Vue to Heroku here

[cristijora]

Although the blog post is very good I found it easier to:
Have the server.js file, package.json and the Procfile as described in the post but after that follow these steps:

cd dist
git init
git remote add heroku "https://git.heroku.com/my-app-namegit"
git add .
git commit -m "my commit message"
git push heroku master

This approach is somehow easier than subtrees and doesn't require deleting dist folder from gitignore. Also it's a bit more flexible if you want to have several remotes (e.g heroku-dev, heroku-staging, heroku-live) and configure some tasks in the package.json which will run the following commands described above.

[moshie]

Even when you push all of the distribution files up, the template still requires the use of dependencies like chalk and webpack which are not included as a part of the production dependencies?

Whats the process for deploying? As it's not clear in any of the documentation?

[cristijora]

@moshie Actually it doesn't require those dependencies.
If you have vue-router in simple hash mode, you can deploy the files only without anything else
If you have vue-router in history mode, you might need some additional stuff
https://router.vuejs.org/en/essentials/history-mode.html

For me, the process of deploying with heroku is something like:

npm run build
cd dist
git commit -m "my commit message"
git push heroku master (assuming heroku remote is defined)

You can see my comment from above that it's easier to have the dist folder with it's own git remote

Process of deploy with now https://zeit.co/now

npm run build
cd dist
now (assuming you have installed now globally)

[LinusBorg]

If you want to build on the production server, you should run the tests on it as well, so you have to install everything anyway.

If you just want to deploy the already built files, you don't have to install anything, the built bundle includes all runtime dependencies.

[moshie]

I might have missed the point here as I am fairly new to vue, forgive my ignorance :$

But in the package.json file the start script references node build/dev-server.js which has require statements for webpack?

Also when going through the setup you can opt out of the vue router as some apps I expect don't need it.

Heroku has an automatic deploy feature which pulls the latest code whenever it's pushed to git, I would expect the build process to take place on the server not development?

Pushing distribution files to source control feels weird especially if you are working on a large team.

[LinusBorg]

Well, that starts a development server, which is meant to be used during development only, as the name, indicates. I assume that you want to use heroku for a production or staging deployment, in which you would never run a development server - you will want to serve the previously built application from the /dist folder.

This is a common pattern for webpack based apps, and not specific to Vue.

[seenickcode]

Hey guys I had this same prob last week and wrote smth up if it helps anyone: https://medium.com/@seenickcode/deploying-a-vue-js-2-x-app-to-heroku-in-5-steps-tutorial-a69845ace489

[zerkz]

@LinusBorg it seems a little odd to just have compiled assets in source control. I'm going to work on a way of maybe having heroku do the building of these compiled assets, I'll report back here with what I find.

[LinusBorg]

Well, you can build in your CI environment and deploy from there, it doesn't have to be checked into git.

[kcwoodfield]

@seenickcode this worked for me. Thanks for the write up.

[gkatsanos]

2 years later, still don't get it. I deploy to heroku, and I set this:

    "postinstall": "yarn build:production",
    "build:production": "node build/build.js",

in my package.json .

Heroku properly creates a /dist/ folder with the compiled files .
So far so good.

Would be cool to be able to access this /dist/ from my Heroku domain though :(

I believe vue-cli deserves a docu that explains the limits of deploying to services like Azure and Heroku.