Capacitor Projects not built properly

I don’t know if it’s just me, but since today new capacitor and cordova builds are not built properly. I have to say I am new to all of this but trying to learn and thanks to wappler it’s comparable easy to get into code. But the problem here is that new mobile and desktop projects initially come with, as much as I can understand, a full blown node.js project folder where capacitor is added. But since both capacitor and cordova need an index.html instead of an index.ejs this whole thing can’t work.

I could go and try to add an html file, but this comes with editing some package.json aswell as some .js files so that this whole thing would work.

Again, I am pretty new to all of this and still need to learn a ton, but I am pretty committed too and really try to learn and solve these problems on my own. But in this case I think there is something wrong with the initial project build that can’t be solved that easy, at least for someone that is just able to make programs because this nice low-code opportunity of wappler exists.

Hi Adrian,

Your mobile app and your dynamic data elements have to be in two different projects. So you need to build your app using straight HTML and hook into your Node processes in a separate project.

Maybe this link can explain better.

By default the newly created Capacitor app creates an index.html file. No changes required. You can use Node modules within your application, they are simply Javascript. Even outside of Wappler Capacitor creates the Node Modules directory, it is a requirement of Capacitor. Same occurs in Visual Studio Code if you create a new Capacitor application…

Documentation on getting started here:

Thanks for the fast reply, I guess I could’ve brought more info to it.

So I do not use the Server Connect in wappler usually because I have my backend running on Xano. I am fully aware that I would need a seperate API project for my dynamic data. But in this case I just want to build my frontend with capacitor and framework7. The problem is that capacitor aswell as cordova need an index.html file to build the app, but this file is not provided when I start a new project because the overall project structure is essentially a node.js project with capacitor added in the node_modules.

So to be clear, it’s just for the frontend, but with the project folder wappler builds initially a capacitor app can’t work. I would need to change the project folder structure completely aswell as edit some files to make this work, and I don’t think this is intended.

No, it creates the necessary index.html file, I just double checked and created a new Project. You do not need to make any changes to any files.

Thaks for the reply. I do know how to create a new capacitor project, and I did it exactly like the documentation says, in fact it’s pretty easy. But wappler then creates a project folder that’s structured like a node.js project.

I could not make a mistake here by accidentally adding node.js to this project because there is no option for this when creating a mobile or desktop project, so my guess is that there has to be some issue.

If it’s same for everyone you can replicate by simply creating a mobile project. Happened for me with capacitor and cordova, on mobile and desktop.

I’ve created around twenty or so mobile applications in Wappler. The Node directory is standard with Cordova and Capcitor, it does not make it a Node JS Project. It creates the index.html file, in both circumstances, and the Node directory. Look at the time on the image I posted, I literally checked ten minutes ago, everything is correct to get you up and running @adrisalli

NodeJS is being used only for building the capacitor app. That is a standard requirement for capacitor.

The project structure is pretty standard as well.

You cannot use NodeJS within the capacitor app itself. You use plugins there or dynamic html.

We have special Framework7 plus App Connect combination to give you direct visual data bindings and access to server connect api data from other projects.

So it’s much easier to use those frameworks than code it all manually.

Ok, that’s pretty weird, because i did create a new project too and it happened again.

This is how my project folder looks like, and please tell my I’m wrong and just too dumb to see, but I don’t see a way how I could make something wrong to add node.js to a mobile project

I do not use Framework 7 personally, so maybe its an issue there? Will check now and see what happens, one moment.

Did you choose the “mobile app” from the new projects not web with node

Thank you for the reply George, but I guess I do already know this, I built some cordova apps with framework 7 before, in fact I tried every possibility to learn as much as I can. Which is really great with Wappler, so big thank you for this. But now it’s not working anymore and I cannot see why

Yes i did

Works fine on Linux with Framework7 template, creates files as expected.

I’m glad it’s not a general problem, and thanks for trying and giving feedback, but that leads to the question what could be wrong on my side. Again, I cannot see a way for me when creating a mobile project to add node.js in any way except the intended node integration. But I don’t know how I should manage to make this happen.

In the end wappler is a really great tool that makes it pretty easy to start out, so creating a project atleast is not that hard.

I see you have not updated to the newest version 4.5.1, maybe that could be a difference?

So here I have a screenshot where you can see it’s a mobile project indeed, everything is like a normal mobile project, except the node.js project folder structure

There were no changes to 4.5.1 mobile development mentioned in the latest version so as far as I know it is fine…? @George can confirm?

I wait a week between updates.

Probably very clever to wait.

The only thing I could imagine is that the new node.js server integrations could cause some issues, but I am just another pleb trying to learn to code, so I don’t want to make assumptions here

I’m also a pleb :slight_smile: