Electron - JQuery and Bootstrap Placement

Hi everyone,

Inside the Wappler editor especially with Electron Apps, I need to reposition the Jquery script reference to re-order it in the editor so it is loaded before the Bootstrap script reference. Although as soon as I save it re-organizes the code into a specific order replacing my edited code.

Here’s a screenshot of the error on loading the Electron app.

If there’s somewhere else I should be editing this let me know :smiley:

Cheers

You may need to install the Node jQuery package. Drop your console/terminal and enter:

npm install jquery --save

This will install jQuery as a dependency within your package.json file. You will then need to call it from the base of your page, is not necesery at the top although you can place it wherever you want (may need to adjust path and version) but should pretty much be something like the following:

<script>window.$ = window.jQuery = require('./jquery-3.4.1.min.js');</script>

Wappler won’t replace this but it will insist on having the same within the page as a requirement for Wapplers default jQuery path. Electron will ignore it. So effectively you are calling jQuery twice until the auto insert assistance Wappler implements is adjusted or allows for customisation of paths.

I believe Wappler allows you to enable Node integration in the Electron Project settings but if not add this to main.js / settings.js (or check for it):

webPreferences: {
  nodeIntegration: true,
}

Important files are your settings.js (I think Wappler calls it this but really consider renaming this file main.js to conform to the standards implemented by the majority). Then there is package.json which holds your dependencies and build information, versions, authors, descriptions, and many other variables.

Hope that helps get you on your way Kieren.

:slight_smile:

2 Likes

Hi Dave,

Thanks so much for the info,

I am having trouble finding this settings.js file, it doesn’t seem to exist, and I can’t change any of the actual cdv-electron-main.js files as it reverts them as soon as I start the application again, anyway to get around this and update the actual cdv-electron-main.js file which Wappler uses instead of the normal main.js (which is acutally the cdv-electron-main.js file)?

Also in the settings for the project there’s an option to point at a app.js file, but that doesn’t seem to actually do much, unless I’m missing something.

Thanks again! :smiley:

More than welcome Kieren!

It seems Wappler is using the Cordova Electron package which uses the settings.json file as the replacement for what we typically use for main.js. This is where your Electron settings can be modified and extended. I’m not sure why Wappler is using the Cordova package though so maybe @George or @Teodor can explain the reason behind this?

The settings.json file is located in the Res/Electron directory.

Usually for Electron we have a structure as follows

/assets
/assets/css
/assets/js

/Bootstrap <----- If using Wapplers local Bootstrap configuration.
/Bootstrap/4

/dmxAppConnect

/js <----- Some of our clients prefer this addition.

/node_modules

index.html
main.js < ----- Wappler uses settings.json in Res/Electron/settings.json
package-lock.json
package.json
renderer.js

The Cordova implementation is messy and bloated and not too sure on how finding any helpful documentation will pan out as this is far from standard and throws Cordova in the mix as another set of variables you may have to unnecessarily mess around with to get things working properly. That is not to say it won’t work just fine though! Maybe there is a perfectly reasonable explanation for doing it this way but to me it makes not a lot of sense and over complicates things, and is far from standard in the majority of circumstances.

:wink:

Just as a brain-fart of types would it be feasible @George and @Teodor to consult with related community websites and their authors as to produce the best structures for technologies such as Mobile and Desktop? I’m not saying this is not already undertaken, nor am criticizing the AMAZING JOB the Wappler team does, not by any means… That goes without saying! I’m merely suggesting that some input from these communities could not only go a long way to improving Wappler’s already stunning abilities but could make it even greater and help break ground in to new territories introducing Wappler to said communities and their followers… Adopting some of these industry standard deployment structures would certainly help with documentation as it would be directly comparable to Wappler and it’s default options. Allowing for really quick adoption of Wappler as a solid platform for working with these alternative technologies. Just a thought… Hope I’ve not offended anyone at all by making this suggestion!!

Which other resources / solutions do you mean exactly Dave? We are happy to include the best ones :slight_smile:

1 Like

Thanks George. I think it would be great if the way in which Wappler deploys it’s template documents and Projects (desktop and possibly mobile) would match the same structures as the majority of the documentation that relates to them.

After working with Electron for a couple of months now I’m quite sure the above outline for the structure is quite a standard implementation you can find across the web so documentation all matches up and file locations and the naming conventions all are relevant to the available information on sites like Stack Overflow etc. The current template for Electron is quite confusing and throws Cordova in quite unnecessarily. Example would be to use the actual stock Electron Boilerplates over the Corodva based alternative would be a great start, and to follow the outlines discussed here:

https://www.electronjs.org/docs/tutorial/first-app

As you can see the suggested structure for new Electron apps is:

your-app/
├── package.json
├── main.js
└── index.html

And then simply from the terminal issue:

npm install --save-dev electron

And the job is all good!

Where as Wappler’s current template contains so much unnecessary bloat due to its reliance upon Cordova. Would going this way make it easier for your team at Wappler? A lot less requirements and a lot cleaner result for the end user would be the outcome, and as I mentioned documentation and learning resources would then make more sense.

Won’t comment too much on the Mobile side despite having deployed several applications we never went too far down that rabbit hole as until there is a way to build cross platform mobile applications without all the grief we have to go through right now (man its head banging tiring work, very frustrating, and incredibly time consuming, by whichever way we attempted to undertake such developments, Android Studio is terrible to say the least, then there are the market places for Apple and Android which is another different ball game conforming to standards), no fault of Wapplers that is, we have pretty much abandoned developments in this area, hence really pushing Electron and desktop based applications to our Clients.

Maybe @mebeingken could suggest some structures which would be more in-line with the industry standard for mobile apps?

It’s all just a thought really, to help in moving people forward as fast as possible with using Wappler as a tool to aid in these popular areas of development. Probably not the correct place to discuss this in poor Kierens thread… Sorry Kieren! It just spurred me on to make this suggestion.

:wink:

Sorry, above my knowledge here…all new to me as well!

It’s finding corresponding documentation. At least with Electron is quite simple. Really appreciate your pain Ken. Could you estimate in hours how long you have searched for answers? I’d imagine going on my own experience its more than the hours taken to actually create the design itself, by more than several hours, days, or weeks in some situations! Damn mobile apps! :slight_smile:

I’ll say this. Once the structure is done using Wappler to smash the granny out of it is childs play! Really is a privilege to open up Wappler and begin work immediately. Seeing things come together at the click of a button is a joy to behold.

Well my estimate isn’t quite fair as I tore a tendon in my right hand about 10 days ago and had surgery on Friday so that isn’t helping things! Left hand dev isn’t natural yet. :slight_smile:

That being said, I definitely have a couple solid weeks of sandboxing the fw7/cordova world getting going with xcode and android studio. This is still a great option for me, as a couple projects have started. Lots of time spent learning mobile ui differences. The wappler side of things is definitely less mature than web apps, but I’m confident it will catch up if more people stick with it. Wappler team is obviously great at responding to need, but we all have to remember that we are a part of that team. As long as mobile features/support grow consistently, I’m happy to push through.

So I guess I’m saying yes there is lots of pain now, with lots of hours but unless the boys are sitting around developing apps, it will take a few of us to push for improvements.

2 Likes

Perfect sentiment and inspiration for others.

Hope that hand gets better soon Ken!

1 Like

I would love to help push everything forward in regards to mobile/native features. Still waiting for NodeJS and ability to use all of it locally (i.e. without need to communicate with a server). Its been 8 months of waiting. :slight_smile:

1 Like

You can already do this. Can install any Node packages you like. We used Node for Full Calendar and jQuery, and a whole bunch of other packages. Just set Node Integration to true :slight_smile: