How to copy manifest.json when building Ionic 4 as webapp?

#1

When building an Ionic 4 app with “ionic build”, the manifest.json file is not copied into the www folder as it used to be on Ionic 3.

Anyone has any ideas on how to solve that?

#2

Pretty sure you have to add @angular/pwa to the project.

FYI, the manifest.json will need to reflect the changes you made to your base href in index.html

2 Likes
#3

Thanks for the answer! It is so simple but not documented anywhere.

For those of you in need of more details, you just need to to “ng add @angular/pwa” at your project, and it will create a manifest.json and some example icons at your assets folder.

After that your ionic builds will contain the manifest.json file

#4

You are more than welcom!

#5

I was struggling with this… as with Ionic 3 it was as simple as just to copy www folder to shared hosting and everything was working… now in Ionic 4 things has changed… :slight_smile:

I found that after: ng add @angular/pwa and buidling www folder with: ionic build --prod, upload the www folder to server and:

  1. in index.hmtl file make change to to correspond to your path… for example: https://yourdomain.com/somefolder/www/ you need to have:
  2. change scope and start_url in manifest.json to reflect this as well: “scope”: “/somefolder/www/”,
    “start_url”: “/somefolder/www/”
  3. the app should work now… but if you refresh the page in browser you might get 404 not found… so one more thing is needed. I added .htaccess file in the www folder on server with:
RewriteEngine On
    # If an existing asset or directory is requested go to it as it is
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    # If the requested resource doesn't exist, use index.html
RewriteRule ^ /somefolder/www/index.html

For more informations check: https://angular.io/guide/deployment

p.s. The easy way to deploy without the changes above is to create a subdomain on your hosting and put the content of www in the root :slight_smile: :slight_smile: :slight_smile: