Electron Help: Files not found

[Digo]

I’m still new to Electron, so I might be missing something simple here but I’m having a very strange issue with files.

Since I already have a theme, I’ve copied the contents of its body to the index.html file. I’ve also moved a folder called “Assets” and files from /dmxAppConnect over to it. The problem is, however, these files don’t seem to be detected when I emulate the app:

It appears to be looking for these files in G:/dmxAppConnect rather than G:/[Project folder]/dmxAppConnect. If I also look in the sources tab none of the files I moved are there:

I’m assuming this is because there is some type of syncing that has to be done, but I have no idea how to do that manually. I should note that it displays as expected inside of Wappler.

[Dave]

The structure does not look correct to me. For Electron it should look similar to the below, with a platforms directory (which should contain the directory electron), www directory (where the dmxAppConnect directory should be, and your design files), etc, as below:

[Digo]

That is how my folder is:

It just seems to be that when I emulate the actual app all of the paths get completely messed up.

[Dave]

Sorry was difficult to make out your structure from the images above…

Can you share the contents of your config.xml file? If you have left it as default no need to, simply confirm that the following is present:

<content src="index.html"/>

[Digo]

Yeah, left untouched. This is in the file.

[Dave]

Personally we never emulate any of our applications, Electron or Mobile, we always build and debug.

Did you build the app before emulating it, although you shouldn’t need to emulate just run the app exe file and install…

Open the terminal within Wappler by clicking on the Terminal toggle.

cordova build electron --release

See if the build completes, can enable debugging to help during build running the below, rather than the above, your choice:

cordova build electron --debug

Allow the build to complete and you will find the built .exe file in the following location:

platforms\electron\build\win-unpacked

If successful install the application and see if everything runs and displays correctly.

[Dave]

Wappler does not remove the build files upon completion, they sort of sit there and could potentially be cached and used for emulation? So may be calling older files from a previous build before you made the structural changes, if you use emulation. Re-building the application will overwrite these files with the newer ones, and structure, and you will get fresh output for the build. Hope that makes sense? You have to build the application every time you make changes to it, or wish to preview/emulate, to avoid this scenario.

[Dave]

@Dave

You have to build the application every time you make changes to it, or wish to preview/emulate, to avoid this scenario.

I should have said, its best practice.

[Digo]

Thanks for your help but unfortunately this makes no difference. The full build also seems to be looking in the wrong place for these files, just as it is when you click the emulate button inside of Wappler.

[Dave]

If you have not done much more than copy the files in to the www directory, and little further configuration than the defaults, I would suggest to create a new Project and start afresh @Digo

With a new Project entirely. Add the Electron Platform to it. Your Frameworks (be sure to set the Custom option for Bootstrap if your theme is using a customised version, and direct to the theme versions, both css and js files for Bootstrap). Save and shutdown Wappler from the tray icon (important as Wappler may still look for the Bootstrap directory otherwise, or your previous Framework settings). Start Wappler again and introduce your files to the www directory once again.

I say this because I’ve no idea what you have done so far so debugging is very difficult. Sometimes it is far simpler to start over, can save more time doing so than trying to remedy such issues which could take hours of head banging.

Could save more time than you would spend resolving your current issues. I’ll still be around to answer any questions you may have if you need me.

[Digo]

Thanks, I tried this but I actually got the same result.

To recap on the steps I had taken:

1. Created a bootstrap desktop project
2. Copied the “app”, “assets”, “boostrap”, “css”, “dmxAppConnect”, and “includes” folders from another Wappler project to the www folder.
3. Copied the body contents of the index.html from the other Wappler project to this project.

The preview in Wappler shows everything correctly. However, when emulating or running the full build the paths are incorrect. Rather than electron app using the path from where the application is running (G:\Wappler Projects\ProjectName\platforms\electron\build\win-unpacked), it is trying to find them directly from the root directory of my drive. (For example, G:\dmxAppConnect/)

[Dave]

OK try this, backup your original Project, the one you are copying across (just as a precaution), then duplicate the Project and give it a new name. Then open this duplicated Project and add the Electron Platform to it, see what that results in? You may have to bite the bullet as copying those files across seems to be the issue. You can use the original Project as a Data API for the Electron Project… What do you mean by the ‘includes’ folder? What Server Modal is the original Project based upon?

This is not a Wappler issue. Electron and Wappler play really well together when created as directed. Something you are doing is causing the issue.

[Digo]

I’ll give this a try and report back.

The includes folder is simply for server-side includes such as the sidebar and header for the theme. The original project is PHP, but this shouldn’t make much of a difference since the current issue is basically just it failing to get the correct path for standard JS.

[Dave]

Electron uses HTML pages and will not process PHP. The API side, the Server Connect Actions etc, need to be in a separate Project. The Electron Project then uses this as the API. They can not be combined in to one Project (as I said no way to interpret the PHP). It is a two Project approach. One containing the design aspects, the second is the API side (hosted).

[Digo]

The pages are HTML in Electron. As stated before, the body contents of the index.php (which do not contain any actual PHP) have been copied over to the electron projects index.html, so it’s just standard bootstrap HTML.

It is essentially the same as just copy and pasting in a bootstrap theme.

[Dave]

OK got you, understood. You wouldn’t be the first to try and use PHP in such a Project.

[Dave]

I’m not sure SSI works in Electron, will have to investigate.

[Dave]

If you hover above the failed to load resource error where does it say the files should be?

Cancel that you mention it in your original post, just reading back…

[Digo]

Okay. I have done some more debugging quickly and what I have come across seems to confirm this is something in Wappler causing this. Here’s what I’ve done to figure this out:

I added a google maps component to the page via Wapplers UI. This then added in the following to the head:

This path matches those that I added in manually when copy and pasting the head from the theme:

When I run the app, it does go to the correct path for dmxGoogleMaps.js, however, it goes to the incorrect path for Charts.min.js, dmxCharts.js, etc (Those of which I added manually) even though they are exactly the same path in the tags.

This leads me to believe there must be something happening in the Wappler backend that puts the correct path somewhere (which I cannot view inside of Wappler) when you add a component, but NOT when you copy and paste in the tags and save if you have not previously added the component. It’s important to note that the dmx folders such as dmxAutocomplete are in the correct place as I can see them in the same place as dmxGoogleMaps, but the physical app does not see this (as it’s reading the incorrect path)

[Dave]

Try clearing Chromes history and cache. Then restart your Electron application This may cause issues caching the original locations of the files prior to the changes you made. Can happen sometimes…

Also try duplicating the original Project and then adding Electron to it like I mentioned. Not sure that will resolve anything but worth a shot. Remember to backup the original Project just in case an issue arises (which it shouldn’t).