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