We ended up with a
dist in the root and another one inside www/dist.
Right, I think the dist at the root is leftover from previous tries and can be deleted.
Is this the video you are following? - https://www.youtube.com/watch?v=W44hTg8vL_g
In there, the entire www folder is the built files from Noodl. How/where are you adding the logic to use the Capacitor Network plugin? Are you doing this in Noodl or VS Code? And what file are you adding it to?
If Noodl is exporting the assets for your app as a production build, I donāt think you can build them again with Vite.
Yes, thatās how I started, following that same tutorial. Hereās what I do with Capacitor: in Noodl, I save it in a folder called src with a main.js file. This file includes the Capacitor Network import. In the Noodl header, I include the path, and when I build the app, I save it in www. Then I start with Capacitor in VS Code, as we previously discussed.
Here, I can see everything is added correctly. When I run vite after including all the steps and adding npx cap sync, then npm run dev, the app appears and works fineāit recognizes the plugin and functions perfectly. Now, I want to build for Android, and thatās where the problems have started.
Hmmmmā¦I may have taken you down the wrong road now that I know how Noodl is working ![]()
Did you npm install @capacitor/network within Noodl? Just trying to understand if Noodl is bundling that code when you export it out to the www.
I am assuming you have this, but would be good to double check:
Your
index.htmlfile must have a<head>tag in order to properly inject Capacitor. If you do not have a<head>in your Html, Capacitor plugins will not work.
Otherwise, I am unfortunately out of ideas.
Hereās the process: in Noodl, I develop the app, and I leave the import in a main.js file. Then, I include the scriptās path in the Noodl header and save it in the Noodl folder under src. When I build and save it in www, the head includes the src path and the file. After that, I open it in VS Code and run npm install @capacitor/network. This is important, and I emphasize this part: when I complete the Vite setup and run npm run dev, the app works perfectly and recognizes the plugin. So, everything works fine between Noodl, Capacitor, and Vite.
The problem arises when I need to move to Android. If I do it the way I usually do, the page displays but does not recognize the plugin. On the other hand, if I do it the way you suggest, the plugin works but the app doesnāt display correctly.
I hope this helps to clarify the situation. I appreciate your effort to help me. If I can solve this, it will be a great contribution to the Noodl community, providing an explanation of how to use plugins in Capacitor. What I need is the native Android version without Internet access.
It works when you run npm run dev because nothing is being compiled. Vite serves all the files pretty much as is to the browser. When npm run build is run, Vite does its magic with tree-shaking and whatever else for a production build. Code not referenced, gets removed.
I wonder if you could add your custom code through a Noodl module. That way everything is in Noodl and itās export process should include it - Create a new core node | Noodl.
Otherwise, I might be able to look at it more closely if you want to share a private Git repo on either GitHub or GitLab. My username on both is wsamoht.
I will try to create a module even though Iāve never done one before, and I donāt know how to add the information, for example, for Capacitor Networks. I also found information in ChatGPT that Iām not sure is trueāthat on Android I can interact with the Capacitor.plugin object, and maybe make it work from there. However, I thought that npm run dev was a testing version and that when itās built, it would reproduce the same way. But it doesnāt work the same. I followed several tutorials, and the problem lies in the conversion from Noodl; thatās where the error occurs.