I am trying to run a simple “Hello World” Svelte app, with Capacitor.
I have followed the steps here.
When I do npx cap open android Android studio opens, but then “hangs” indefinitely on Gradle: Build (see attached image).
Is this supposed to work, or am I missing something?
Did u build the assets? Maybe silly to ask? (Npm run build)
And the output dir is same for capacitor (public vs www)?
Yes, I did a npm run build, as per the Svelte instructions.
The output dir is the public folder, and I’ve updated the capacitor.config.json to reflect this:
"webDir": "public"
U using svelte or sapper starter? I’d like to test myself out of curiosity (when home)
Svelte starter, without TS.
I first tried it with Sveltekit, but got the same result. I figured it’s because Sveltekit is so new and officially unsupported, so I then tried it with vanilla Svelte.
just ran from same template and running flawlessly in android
so if the app runs good in the browser, then maybe something wrong with the linkage to android or your android studio? Maybe start a project in android and try to run a clean java project?
happy to share the repo
npx degit sveltejs/template svelte-app
cd svelte-app
npm i
npm run build
npm install @capacitor/core @capacitor/cli
npx cap init
change output dir to public instead of www (capacitor config)
npx cap add android
npx cap open android
And shamelessly plug this one:GitHub - Tommertom/svelte-ionic-app: Ionic UI showcase app - try Ionic UI and directly go to API or source code
Thanks for publishing to GitHub! Turns out I had inadvertently deleted the cordova property, which I noticed when I compared with your code.
Great work on the UI showcase! 
OT: have you tried using Capacitor with a Sveltekit app?
Not really. I got stuck on my win10 environment as svelte-kit does not like win10. There is this workaround no-svelte-kit for win10. But didnt try it.
It did work on my Ubuntu WDS - but I don’t have android studio there.
I guess it will work flawlessly, as long as you know to find the build bundle(.svelte/build - but that content is a bit obscure to me ???) - I think it has to do with some sort of plugin that emits the bundle as nice package to publish.
There is some need of documentation and whilte the unofficial docs seems ok, the product can be very unstable. I remember playing around with the beta on Angular2 in the past. I had to relearn much after it became real.
Snowpack look exciting though! We need something like that
Did you get to generate a nice full bundle with svelte-kit?
Yeah, the build dir looks different, with client/server + unoptimized/optimized sub folders.
Not sure, as the build command output didn’t say Optimizing, like I had seen in some videos. Even so I got an optimized folder. I attribute the inconsistencies to the fact that it’s an unfinished tool.
We will have to see how it works…
It looks a bit like sapper, which means that generating the bundle for publication (client side) is a bit tricky, withouth have made a deep study of it…
Sapper basically wants you to run a node server to run the app. The alternative structure is to have a static dump, but that has big limations for dynamic routes.
Long story short - if the bundle generated requires a node server or something similar to run the client side, then I do not think Capacitor out of the box will fly with svelte-kit. Then you would need some sort of capacitor plugin that runs the node server for you in the app.
Besides this, I see a similar structure like Sapper in index.html. I remember having big issues getting Ionic to work with Sapper. Basic components are ok, but if you want a tab, or something that depends on a router outlet, then it becomes difficult.
Let’s see what we will get…
Reg. Sapper: I’ll take your word for it. I haven’t used it at all. In fact, I haven’t even used Svelte beyond trying the online REPL, nor Capacitor with a non-Ionic project; I jumped into the deep end of the pool on this one
But yeah, Sveltekit in itself looks very promising. Remains to be seen if it will play nice with Capacitor.
Small correction on what I mentioned earlier: it will work nicely with the pwa plugins, but the deployment to ios android or electron I wonder how it will play
I would love to move to svelte fully but I miss some comfort in build and pwa support icm Ionic
I just found out what the problem is. Capacitor won’t link all files into the app. You need to manually add the “_app” folder inside of the project.
You need to upload your built _app from svelte into that folder and then when you compile it Capacitor will be able to get all of its files. The problem comes from capacitor only looking for top-level assets.
(for example, cap will look for E:/www/index.html and everything inside of the www folder will get pulled into the app but all of the server / client-side scripts wont and this is due to sveltes adapter-static not outputting the files correctly too) hopefully this helps 