Skip to content

Latest commit

 

History

History
96 lines (68 loc) · 2.37 KB

BUILD.md

File metadata and controls

96 lines (68 loc) · 2.37 KB
Raw

Running and Testing

As root

apt install -y nodejs npm
npm install -g @ionic/cli

From project folder.

npm install

ionic serve

Deploy to S3

Build into ./dist/ and upload to S3 bucket with static web hosting enabled and index.html for home and error page.

ionic build
aws s3 sync --acl public-read --delete dist/ s3://public230319/

Update App

Close and open again from Home.

31/3/24 this didnt work to pick up new. 17/9 add build time on settings page to help verify.

Notes

Upgrade to Ionic 8

This breaks dependencies.

npm install npm-check-updates
npx npm-check-updates -u

https://ionicframework.com/docs/updating/8-0

TODO: review code changes, compare a new project template

  • done 17/9, package.json still to compare
npm install @ionic/vue@8 @ionic/vue-router@8
npm upgrade

Firefox

https://public230319.s3.ap-southeast-2.amazonaws.com/tabs/tab1

API error - blocked loading mixed active content.

http://public230319.s3.ap-southeast-2.amazonaws.com/

Access denied.

17/9 Has been working. Probably bucket settings and ACL public-read.

Icons

Download and Convert

apt install -y imagemagick

mkdir assets
curl -o assets/logo.jpg "https://media.istockphoto.com/id/157644325/photo/water-drop.jpg?s=612x612&w=0&k=20&c=O8khr7owdRAntRRK2R42a4TDGxBsb3J1_jNbSGyBmW8="
mogrify -format png assets/*.jpg
rm assets/logo.jpg

Generate Icons

https://github.com/ionic-team/capacitor-assets

  1. generates icons in ./icons
  2. creates manifest in ./public/manifest.webmanifest
    • NOTE: path is wrong ../icons
    • can update manifest generated by: ionic --pwaManifestPath dist/manifest.webmanifest
npm install --save-dev @capacitor/assets
npx @capacitor/assets generate --iconBackgroundColor '#eeeeee' --iconBackgroundColorDark '#222222' --splashBackgroundColor '#eeeeee' --splashBackgroundColorDark '#111111' --pwaManifestPath dist/manifest.webmanifest

Manually Fix Manifest

Merge Vite generated dist/manifest.webmanifest into file generated by capacitor-assets.

Move icons/ to public/icons/

Add manifest: false to vite.config.ts

Icon Not Working

31/3 after improvements above the icon doesn't display anymore on home screen.

S3 versioning was not enabled and manifest was manually edited in dist/ folder so not tracked in Git.

No changes to manifest appear to take affect.

Workaround: Add link to different file in index.html