🛠 New framework7-cli feedback needed

In the future could be added to the site and f7-cli pallete color generator like this https://www.materialpalette.com/pink/orange

Yes - a color-palette generator would also be cool, where you can import/export your current template and fine-tune :wink:

Hi there,
There is bug on my system when I use framework7 cli on Mac Os 10.14.13
Indeed after framework7 creation when I use the project on Xcode and emulate on my device, the link dosn’t works.

framework7 create
I choose cordova app > platform ios and android > framework7 Core > Tabbed Views > No Bundler > use default color theme > include icon fonts from framework7

npm run build-cordova-ios
After that I go to Myapp/cordova/platform/ios/ and I open on xcode myapp.xcodeproj

I choose provisionning profile and launch on my iphone device (via USB).
The app display nicely but all links (about / form /Dynamic route / etc
) doesn’t works

When I do the same app but with “Bundler”, the links works.

An idea of my bug ?? I prefere to use without bundler.

Thanks

It happens due to XHR (Ajax) limitations of WKWebView. Do this in created project:

cd cordova
cordova plugin rm cordova-plugin-wkwebview-engine
cordova plugin add cordova-plugin-wkwebview-file-xhr
2 Likes

I’ve created a Cordova Electron app via framework7-cli. Following options used (copied from generated README.md):

{
  "cwd": "/Users/efedorov/projects/electron/cordova-f7-electron",
  "type": [
    "cordova"
  ],
  "name": "Cordova F7 Electron",
  "framework": "core",
  "template": "single-view",
  "bundler": "webpack",
  "cssPreProcessor": false,
  "theming": {
    "customColor": true,
    "color": "#007aff",
    "darkTheme": false,
    "iconFonts": true,
    "fillBars": false
  },
  "customBuild": false,
  "webpack": {
    "developmentSourceMap": true,
    "productionSourceMap": true,
    "hashAssets": false,
    "preserveAssetsPaths": false,
    "inlineAssets": true
  },
  "pkg": "io.framework7.cdvelectron",
  "cordova": {
    "folder": "cordova",
    "platforms": [
      "electron"
    ],
    "plugins": [
      "cordova-plugin-statusbar",
      "cordova-plugin-keyboard",
      "cordova-plugin-splashscreen",
      "cordova-plugin-wkwebview-file-xhr"
    ]
  }
}

Then i run npm run cordova-electron to preview my Electron application. I get it opened, but console contains error:

Failed to load resource: net::ERR_FILE_NOT_FOUND logo.png:1

Looks like it comes from cordova-plugin-splashscreen.SplashScreenProxy. It contains declaration: var imageSrc = '/img/logo.png';

I am new in Electron development, so I am wondering how can I fix it (except to remove cordova-plugin-splashscreen plugin)?

UPD: It happens even if I build real app via npm run build-cordova-dev / npm run build-cordova-prod

One more note.

Running npm run build-cordova-prod command generates an app that is built in dev mode. I open an app, and dev tools gets opened. Obviously, --release option is omitted for cordova build command in build-cordova-prod npm script.

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!

I know this answer is a bit later than the questions asked but recently made an electron app from cordova and ran into this issue as well but solved it.

Looking at the docs for the splash screen plugin I was just missing a few settings in my config.xml.

The splashscreen plugin does not have electron as a target platform but it does have the browser. And I needed to remember that “Cordova Electron” will use the electron version of a plugin but will fallback to the browser version if the electron specific platform does not exist in the plugin.

So now my config.xml for the electron platform looks like this:

<platform name="electron">
      <preference name="ElectronSettingsFilePath" value="electron-settings.json" />
      <preference name="SplashScreenBackgroundColor" value="#ffffff" />
      <preference name="SplashScreen" value="img/app.png" />
      <preference name="SplashScreenWidth" value="256" />
      <preference name="SplashScreenHeight" value="256" />
      <icon src="res/icon/electron/app.png" target="app" />
      <icon src="res/icon/electron/installer.png" target="installer" />
</platform>

Specifically the problem is the image reference from the “SplashScreen” preference above to link the proper image. It defaults to “/img/logo.png” which does not exist for a framework7 app by default.

After adding the settings above, the app icon shows up properly centered on a white background as a splash screen. I will customize a full screen splashscreen later but for now this works and the missing “logo.png” is no more.

Here are the 2 spots on the cordova docs where I read how it works and how to configure it.

https://cordova.apache.org/docs/en/latest/guide/platforms/electron/#plugins
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/#preferences

@nolimits4web, Should we default any of the settings above when you create a cordova app with framework7-cli?

  • Matt

@spiffyguy thanks for the detailed response! I have worked around the issue by un-selecting the splash screen plug-in and making my own by hand.

That being said, it would be nice if this was fixed in future release of the CLI so that others don’t have this pain.

Do these ($ framework7 cordova build ios), work in curent CLI version?

It works, but removed from docs, just use it as

cd cordova
cordova build ios
1 Like

Hi @nolimits4web

I have updated framework7 to:

and when I want to create a new app, I have this error:

$ framework7 create --ui
internal/modules/cjs/loader.js:584
if (e.code !== ‘ERR_PACKAGE_PATH_NOT_EXPORTED’) throw e;
^

Error [ERR_INVALID_PACKAGE_TARGET]: Invalid “exports” main target “index.js” defined in the package config /.nvm/versions/node/v14.0.0/lib/node_modules/framework7-cli/node_modules/is-promise/package.json
at resolveExportsTarget (internal/modules/cjs/loader.js:542:13)
at resolveExportsTarget (internal/modules/cjs/loader.js:581:20)
at applyExports (internal/modules/cjs/loader.js:455:14)
at resolveExports (internal/modules/cjs/loader.js:508:23)
at Function.Module._findPath (internal/modules/cjs/loader.js:632:31)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1001:27)
at Function.Module._load (internal/modules/cjs/loader.js:884:27)
at Module.require (internal/modules/cjs/loader.js:1074:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object. (/.nvm/versions/node/v14.0.0/lib/node_modules/framework7-cli/node_modules/run-async/index.js:3:17) {
code: ‘ERR_INVALID_PACKAGE_TARGET’
}

How can I fix out this error?

Thanks for advice.

Regards,

Andrés.-

Issue by 3rd party package seems like https://github.com/then/is-promise/issues/13

Yes @nolimits4web , I have updated all 3rd party dependencies and it works. Thanks you!

Created an app using NEW Framework7-CLI. Giving error while build and install on terser-webpack-plugin

https://github.com/framework7io/framework7-cli/issues/99 or update F7 CLI to latest