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

The steps you are supposed to take:

1. Ionic build browser --prod - creates the main.js file to be deployed

2. Go to .gitignore file and remove the mentions of www/ so git picks it up and add these two lines so platforms browsers folder is picked up

   platforms/*
   !platforms/browser/
   !platforms/browser/www
   !platforms/browser/www/plugins
   

3. Add these 2 libraries to your package.json (don't forget to run npm install)

   "connect": "^3.5.0",
   "serve-static": "^1.11.1"
   

4. Add a start to your npm scripts in package.json

   "start": "node server.js"
   

5. Add server.js to your project folder with the following code:

   var connect = require('connect'),
   serveStatic = require('serve-static');
   
   var app = connect();
   
   app.use(serveStatic("platforms/browser/www"))
   app.listen(process.env.PORT || 5000);
   

   Please note this code is only for ionic apps and not normal angular apps. At this point you can write npm start or node server.js in your cmd and you can test to see how it will run.

6. Commit your code to heroku git using git push heroku master. Please note to have the heroku git on your remote list. You may do git remote -v to check if thats the case. If not get the url from the website and add it.

7. Optional - Put the www/ folder back in .gitignore and git rm --cached -r ./www to delete them from your git. This is so your co workers wont have merge conflicts on your main.js everytime you commit. The same for platforms/browser.

You are supposed to see heroku installing and deployed a node application in your enviornment after pushing to their git

NOTE If you are using Heroku you could probably do this with Heroku builds rather than playing with your git. https://github.com/heroku/heroku-builds

Answer 2

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