DEV Community

Cover image for How to Deploy Vue PWA on Heroku

Posted on • Updated on

How to Deploy Vue PWA on Heroku

To deploy a Vue Js Progressive Web Application (PWA) on Heroku is quite easy, but very different from how generic Vue Js applications are deployed on Heroku.
Here's what I gathered when I recently deployed one:

  • First, have your PWA ready locally.
  • Install the Static CLI Plugin using: heroku plugins:install heroku-cli-static
  • Create an app on Heroku: heroku create Take note of the name assigned to your app.
  • We need a buildpack to serve our static assets. To set it, run: heroku buildpacks:set
  • Define your static configuration file:
  "root": "dist",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
Enter fullscreen mode Exit fullscreen mode
  • Build your PWA locally using npm run build
  • Deploy using heroku static:deploy
  • Open deployed app using heroku open

PS: I was using this explanation here, but the last steps did not work for me, so I devised this to help me out, and all has been fine this far! However, if you followed it and were successful, please let me know where I might have gone wrong.

Top comments (0)