A couple of questions for a new capacitor dev

[mauzilla]

Disclaimer: experienced web dev, brand new to mobile development

I have some initial setup questions which I cannot seem to cover. Windows user. I have followed the setup instructions:

• Quasar app installed
• capacitor enabled on app
• Android Studio installed and working (I can view the test app and view changes made to the UI)
• Using Medium Phone API

Everything works but I have some workflow questions I dont quite understand

1. When capacitor is added, it creates a src-capacitor/ directory with the source files. The capacitor.config.js file is also installed within this directory. It appears that if I want to install a library (lets say firebase), I need to npm install... followed by a npx cap sync - What I am unsure about is where exactly this needs to be completed (in the root of the quasar app or the src-capacitor). If in the root of quasar app, I can install fine but running npx cap sync gives a warning "could not find the web assets directory ..." - This can be fixed if I run npx cap sync from the src-capacitor directory, but this means I need to install the node packages in this directory as well, effectively leading to the NPM packages being installed twice (in quasar root and the src-capacitor dir). Is this the intended behaviour or am I missing something?
2. Maybe more of a Android Studio question, but when building web apps the Chrome Console is a winner (easy to access network resources, API calls etc to debug faster). How is this integrated into Android Studio? I have tried the remote debugger on my phone (WIFI and USB) but I cannot get clear answers as to the method to do this? Can this be enabled for the "built in emulators" of android studio as well or is it limited to USB debugging?
3. I have found that when I make script changes, that the changes are not always synced. If I for example look at the logcat and make changes (save), I often see the logs refer to issues / code that was already altered / removed. In most cases the save works, but often the logcat will refer to an console.log("test") for example that I already removed from the code. Is there a way to avoid this or is this simply "how it works"?

[yusufkandemir]

Answer 1:
Install your dependencies in src-capacitor, but don't run npx cap sync. That will be handled for you the next time you will run quasar dev -m capacitor/quasar build -m capacitor, when the web assets are ready.

Answer 2:
While the app is running, open chrome://inspect URL in your Chromium-based browser, then find the relevant entry to attach to it. You will get the usual Chrome Devtools experience on your Capacitor app.

Answer 3:
I don't know, it might be due to how logging in the "native" level works. Using the answer 2, you can use Chrome Devtools and have a better experience with this as well.

[Dtsiantaris]

About Answer1:

Does this mean that i can have access to the @capacitor/core for example, inside the quasar app, if @capactitor/core is installed just inside the src-capacitor?

[yusufkandemir]

Yes, Quasar wires them up via Vite/Webpack aliases for you.

I know you are using TypeScript, so there is an extra catch. Since we are not auto-generating the tsconfig file, we can't automatically let the TS know. So, you might need to define them in paths, e.g. "@capacitor/core": "./node_modules/@capacitor/core". The example might not be correct, but the idea should be correct. I wanted to test/confirm this, and improve the documentation, but didn't have enough time. If you could try it out and find a working solution, that would be perfect.

[Dtsiantaris]

I tried doing:

"paths": {
      "@capacitor/core": [
        "./node_modules/@capacitor/core"
      ],

This did not actually work. I instead did this:

 "paths": {
      "@capacitor/core": [
        "./src-capacitor/node_modules/@capacitor/core"
      ],

So with that in mind, I made a silly little plugin:

// quasar.config,ts
    build: {
     ...
      vitePlugins: [
        ['vite-plugin-checker', {
          ...
        }, { server: false }],
        CapacitorPathResolver()
      ]
    },

that just reads the package.json inside the src-capacitor and then configures the tsconfig.json on the fly.
The downsides are that i have to reload the VSCode after and that it runs every time.

Maybe something similar but a little smarter is the solution to provide typescript support too without having someone modify the tsconfig.json themselves?

[yusufkandemir]

Ah, yes I meant to add the src-capacitor/ prefix. Thanks for confirming.

A good solution may be generating .quasar/tsconfig.json, and using it as extends. It can also be used to get quasar.config file > build > alias and update the tsconfig with it. We may tuck in the feature flag files there too. We can add an option to switch between the non-string/strict(new) base configs as well.

However, this would mean that if you pull the repo for the first time or when it contains relevant changes, the lint command and the editor experience would be broken. That would be a frustrating experience. So, you will have to run the dev or build command to fix it. This is more problematic for CI environments. So, we would need to introduce a new command to generate that stuff without a full build. Nuxt has the same concept and limitations of generating the tsconfig.

We will discuss whether we should make this change while app-vite/app-webpack is still in beta. Otherwise, we will update the docs to inform the users on how they should install the packages, update the aliases, etc.