I have an ionic 2 project, which builds for iOS, android and browser (it is a PWA as well as a native app).
I need to run a simple script to munge my index.html file when it is not running in cordova, i.e. in the browser i.e. the PWA mode.
I looked into cordova hooks, and have set up the following in my config.xml which works great when I do ionic build browser. Since my CI server builds this way to CI deploy to the website, this works fine.
<hook src="scripts/insert_onesignal_webpush.js" type="after_serve"/>
However, when I do ionic serve during local development, the script does not run and I have to manually run it to get my index.html in the right state for local development. A bit annoying. I looked into the before_serve cordova hook but that does not seem to run during ionic serve.
I also tried creating a .sh script that invokes my script right after calling ionic serve, but it seems that there is no live-reload if index.html is modified… so i still have to refresh the browser after ionic serve to get the updated index.html… better, but not ideal.
I am looking for some way to hook into ionic serve so that I get the right index.html file on the first attempt… without any need to do any manual script invocations or browser refreshes. Perhaps the ionic_copy config for ionic-app-scripts could do it, see https://ionicframework.com/docs/v2/resources/app-scripts/, but I don’t see any examples of calling it to do something like my requirement (since I need the index.html munged only on ionic serve and ionic build browser… not modify the copy step for all builds including iOS and android)… ideas please?
1 Like
Why not run it as an npm script? By default an Ionic project in package.json has
"ionic:build": "ionic-app-scripts build",
but you could change it to run your own script before or after, something like
"ionic:build": "ionic-app-scripts build && run-my-own-script",
1 Like
Thank you for your response! Unfortunately that does not work for two reasons:
- The
ionic serve command does not return (it hijacks the console to monitor changes for live-reload). So in something like ionic-app-scripts serve && node scripts/foo.js the second part i.e. foo.js never gets executed.
- My script modifies
index.html… modifying that file does not trigger a live-reload of “ionic serve” so I still have to hit refresh after the browser launches even if I get index.html to be automatically modified by the script some way after ionic serve. Currently I run my script in a separate console (manually) after ionic serve and then refresh the browser… pretty tedious!
I thought the after_serve cordova hook was for this purpose, but that does not seem to be called in this case. I also looked at ionic-app-scripts config for the ionic_copy step (since I could theoretically modify my index.html after copy and before serve but that seems to apply to all builds (I only want this to apply to browser builds, not iOS and Android native apps).
You’re right of course, you need something that runs as part of each build, not just before or after.
Maybe you could hook your custom step into the Webpack config somehow, if you expose it as a Webpack loader (it’s a bit like the html-webpack-plugin) but it’s not straightforward.
Were you able to get this working? I need to do something after every recompile, within the serve.