Ionic PWA deploy

Question

I\'m trying to deploy a Progressive Web App version of my Ionic 2 project to Heroku but it doesn\'t seem to work. What I\'m trying is to use \"Ionic build browser --prod\" and

Answer 1

An update, as i ran the same task today:

It may be preferable to avoid

• Adding and maintaining "server" code along with your app.
• Pushing the built app (www/) in your version control system.

You can rely just on the heroku buildpacks. To do that you would need two buildpacks:

• https://github.com/heroku/heroku-buildpack-nodejs.git
• https://github.com/heroku/heroku-buildpack-static.git

Your app will be detected first as node app and will build, and later as a static site and served.

First, build the app up on heroku, don't add www to your version control system:

The first buildpack will detect your app as node app, and run the build after the postbuild script.

you need to add this line to you package.json scripts:

"heroku-postbuild": "ionic build --prod"

and add the ionic cli to your dev-dependencies so it can be available for heroku on the build process

npm install ionic --save-dev

Second, serve the static files generated:

The second buildpack will serve the static files generated in www. For that you need to tell the buildpack how to serve the files with a static.json file: (this one is somewhat equivalent to the config for firebase in the ionic docs)

/static.json:

{
  "routes": {
    "/**": "index.html"
  },
  "headers": {
    "ngsw-worker.js": {
      "Cache-Control": "no-cache"
    },
    "/build/app/**": {
      "Cache-Control": "public, max-age=31536000"
    }
  },
  "root": "www/"
}

Looks like the new Ionic doesn't generate the 'www/build/app/...' directory anymore, just added to be consistent with the above mentioned docs.

Just those two changes, along with the buildpacks are enough to run the PWA on heroku / dokku