How to effectively host Ionic PWA to Heroku

Ionic PWA can also be read as Ionic Progressive Web App.

It is super easy to turn your Ionic app into progressive web app. All you have to is to reach out to the index.html and uncomment following

// un-comment this code to enable service worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('service-worker.js')
    .then(() => console.log('service worker installed'))
    .catch(err => console.error('Error', err));
}

This code will do all the magic. Now you app is installable. Its offline and fullscreen gives you native apps look and feel.

Why you need Ionic PWA

A crisis provides the opportunity for us to do the things that you can not do before.

Rahm Emanuel, Obama Avisor

I wanted to try out Progressive Web Apps since its inception. It was postponed until all of my Ionic apps stopped working (I have covered that whole event already). I was forced to try it out. It’s such a blessing while working with Web Technologies. If all native solution are failed

So what

We still have web which is always accessible anytime everywhere.

If all native solution are failed, so what, we still have web which is always accessible anytime everywhere.

Simon goes into much more details over at his blog post. He explains it better; that why we need Heroku and things like that. He starts from the blank app and then writes some basic server to deploying it on Heroku.

A little tweak

I just want to add to the Simon’s article. He did mentioned to use the Procfile which basically run certain commands whenever we deploy code to heroku. It’s kind of automation.

web: npm run build && npm start

I had a problem with this code. Because npm run build points to another NPM script which is

ionic-app-scripts build — –prod

When ever I tried to make changes to my code and deploy it to heroku. I will get time out error.

Because the above command generates the production version of your apps. Minifying our code and Ahead of time compilation. To solve Heroku timeout we can use the some heroku hooks as scripts in package.json

"scripts": {
  "ionic:build:prod": "ionic-app-scripts build -- --prod",
  "start": "node server.js",
  "heroku-postbuild": "npm run ionic:build:prod"
}

Now heroku will include the heroku-postbuild in its process. Now we can the Procfile that simple

web: npm start

Conclusion

That’s it.