Error running Electron app generated from F7 CLI

I am running into an issue trying to run the boiler-plate application that is created from the framework7 CLI as an electron app. I am able to run “framework7 cordova build electron” with no problems from my Windows 10 machine. However, when I try to run the EXE I get the following error in a browser developer console: “Failed to load resource: net::ERR_FILE_NOT_FOUND logo.png”

Is there a fix for this?
Thanks!

Was it latest version of CLI? If you create new clean project with CLI and run framework7 cordova build electron, does it have that issue? And the command actually should be npm run build-prod-cordova-electron (check your README.md) file

1 Like

Hello @nolimits4web!

I am running Framework7 CLI version 3.0.5

I don’t see an entry for npm run build-prod-cordova-electron in my README.md file. Here is what it says to run:

## NPM Scripts

* 🔥 `start` - run development server
* 🔧 `dev` - run development server
* 🔧 `build-dev` - build web app using development mode (faster build without minification and optimization)
* 🔧 `build-prod` - build web app for production
* 📱 `build-dev-cordova` - build cordova app using development mode (faster build without minification and optimization)
* 📱 `build-prod-cordova` - build cordova app
* 🖥 `cordova-electron` - launch quick preview (without full build process) of Electron app in development mode

When I run any of the cordova specific npm commands I get a “Build complete” message but then nothing happens and the command prompt appears to have stopped and I need to press CTRL+C to exit. The only thing that I note is the following:

Entrypoint main = js/app.js

However, I don’t see the EXE created when I run it this way. What am I missing?

Thanks.

Hello @nolimits4web, did you happen to have any further suggestions which could help me?
Thanks!

Sorry, but on mac coudn’t replicate it. Can you maybe check where are those references to logo.png in project and check/remove them

Hello @nolimits4web thanks for the response. Any manual changes to the Electron project appear to get overwritten by whatever process that the Framework7 CLI uses to build the project. In other words, the references to logo.png re-appear after I try to remove them.

However, upon closer examination, even though I am getting that an error related to the logo, the script execution continues past it. But at no point does it show my main app (as initially indicated is simply the default application that Framework7 CLI creates for a single page app).

But f7’s build script doesn’t have anything related to that logo. Maybe it comes from Cordova, did you check there and their docs. I’m sure the process should be easy

@nolimits4web I was able to figure out that it was trying to pull the logo from the root location of my local drive but my app still doesn’t load. Instead, all I see is the logo and it doesn’t go any further.

BTW, I tested the same F7 project as an Android app and it doesn’t have this problem. It appears to be related to Electron specifically.

Additional information: I am getting the same issue under Ubuntu 19.10. If I use the inspector provided by Electron while the app is running, I can manually remove the “splash screen” and then I see my app! The question is now how do I remove this “splash screen?”

Maybe issue in cordova-splashscreen plugin. Can you try to remove it?

Run this in cordova/ folder:
cordova plugin rm cordova-plugin-splashscreen

And then build again electro app

@nolimits4web that was it! Thanks :smiley:

Just a quick note for anyone else that comes across this, there appears that there is an issue when trying to create the Electron app in Windows 10 using the command npm run build-dev-cordova as it doesn’t get past the response Build complete. So what you need to do is when you get the Build complete message, you’ll need to terminate the batch by pressing CTRL+C and answering “Y” and then run the following command framework7 cordova build electron. This will complete the app build.

I am wondering why this is happening on Windows machines. Can you try to run the command which is in the root package.json under build-dev-cordova script, will it pass it in this case?

Hello @nolimits4web, according to package.json, the command for build-dev-cordova is cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova build" however if I try to run it from the command prompt I get the following error:

'cross-env' is not recognized as an internal or external command, operable program or batch file.

Is there a specific way that I am supposed to run this command?

Hello @nolimits4web did you happen to figure out why I am getting this issue?
Thanks!

Hello! I’m facing this same issue while building Cordova Android project. I thought it was a problem with framework7-react, but it happened just the same with framework7-core.

Tested creating new projects several times.

Just run it without cross env:

TARGET=cordova NODE_ENV=development node ./build/build.js && cd cordova && cordova build

Welcome back @nolimits4web!

Running TARGET=cordova NODE_ENV=development node ./build/build.js && cd cordova && cordova build from the command prompt returns this error:

'TARGET' is not recognized as an internal or external command, operable program or batch file.

Please confirm how I am supposed to run this from the Windows 10 command prompt including which folder I need to run it from.

Thanks!

Check internet how to set env bars on windows https://stackoverflow.com/questions/9249830/how-can-i-set-node-env-production-on-windows

Solved for me! Just changed the ‘cross-env’ for ‘set’ using powershell