Improve mobile app development experience

[brody4hire]

I was able to get Snowpack, Vue, and the CapacitorJS mobile stack working together with some quick workarounds here (renamed): https://github.com/brodybits/snowpack-vue-capacitor-2-demo

HMR is missing, and I hope to get it working in the near future.

CapacitorJS was designed to make this kind of mobile app development relatively painless, but I think it would be cool if we could make this go even more smoothly over time. Here are my ideas so far (updated):

• templates with HMR working with browser, server, and mobile out of the box
• light(weight) transpilation transformation options to help avoid some of the most troublesome ES syntax on Android and older iOS mobiles

and less importantly now:

• consider keeping HTML, JavaScript, (S)CSS, and images in the same tree in some templates

---

P.S. I would also like to get Snowpack working with Apache Cordova. This should be pretty straightforward though likely not quite as smooth as with CapacitorJS.

[FredKSchott]

THIS IS AWESOME. I'd love to share this template if you're interested in adding it to https://github.com/pikapkg/snowpack/blob/master/create-snowpack-app/cli/README.md in a PR.

light transpilation options to help avoid some of the most troublesome ES syntax on Android and older iOS mobiles

I'd love to see an example of what you mean, to help understand.

templates with HMR working with browser, server, and mobile out of the box

HMR should work out of the box on all official templates. For server, do you mean server side rendering? Would love an example.

consider keeping HTML, JavaScript, (S)CSS, and images in the same tree in some templates

Right now most of our templates put some files in public and some in src, usually a mix of file types. Do you mean that you'd like to see all files in a single folder?

[brody4hire]

Thanks!

I have renamed the demo to snowpack-vue-capacitor-2-demo, due to the amount of dependency on Capacitor release 2 (2.4.0) in the mobile platform artifacts, raised the demo in PR #926, and made some updates.

I updated the build configuartion to avoid the extra ES transformation step. The transformation step was needed due to ?? operators in the minified vue not working on Android, but this does not seem to be an issue with buildOptions.minify now set to false.

In general, the integration between Snowpack and Capacitor seems to be pretty smooth given the right configuration, which has taken me 1-2 days to sort out, except for the hot reloading.

The hot reloading can be a bit tricky with mobile frameworks in general since we would have to coordinate between the bundle needed in the app for startup and the local or remote server needed to push the updates. I was able to get hot reloading working with some hacks in my work area, but it needs local IP address configuration to work with CapacitorJS on Android. I may need some more time to make this hot reloading more useful for others to try out.

I guess it makes sense to keep public and src in separate directories, given that src but not public files would be transformed during build and run. I am not used to this when working with Capacitor, Cordova, and React Native mobile frameworks, but ok.

I did try with Apache Cordova, but this does not seem to work with the use of ES6 imports. Abandoning this with Cordova for now, at least.

I think the one think that could help with a release build would be to support a lightweight transformation of files in web_modules to transform ?? operators, as needed to run the minimized vue on Android.

I would also like to try Snowpack+Capacitor with some more frameworks, and maybe write a blog article in the future.

[brody4hire]

I got HMR now working with iOS and Android, as well as on the browser, with some hacks and tricks. Unfortunately it does need some manual configuration to work. Fully automatic HMR setup on Android is made more difficult by this issue: https://forum.ionicframework.com/t/android-err-connection-refused-when-running-http-127-0-0-1/169149

Considering that the Ionic CLI seems to have hot reload working with Capacitor, I am now thinking to take a look to see what they may be doing differently.

I have a feeling that there should be a less hacky way to get HMR working with Snowpack with Android, iOS, and the browser. I am still pretty new with Snowpack, so it may take me a while to investigate this. Any ideas or criticism on my demo would be much appreciated.

[gr2m]

Thanks for tackling this Chris!

[brody4hire]

I am thinking it would be awesome if someone could get Snowpack, HMR, and Ionic Vue Beta (https://ionicframework.com/blog/announcing-the-new-ionic-vue-beta/) working together in a template or starter.

I would love to give this a try, sadly cannot make any promise due to some other priorities.

[jsmith]

Hey @brodybits thanks so much for your work on this issue. I used your repository as a base for my React + capacitor app :) HMR on iOS worked with no issues whatsoever (I haven't tested Android yet).

Anyway, since I managed to get this working, I'm going to be using snowpack + capacitor for a side project. If I learn anything new, I'll definitely contribute back to this issue!