framework7io/framework7-cli

Framework7 command line utility

Framework7 CLI

Framework7 command line utility makes easier to create Framework7 apps. Since Framework7 v4 release, CLI the most recommended way to start Framework7 app development.

Install

First of all make sure you have globally installed cordova (may require "sudo"):

$ npm install -g cordova

Then install framework7-cli (may require "sudo"):

$ npm install -g framework7-cli

Create Framework7 app

To create Framework7 app, run the following command in the directory where you want to create app:

$ framework7 create

Program will prompt for few questions about framework and template you want to start with.

Create Framework7 app with user interface

Run the following command in the directory where you want to create app:

$ framework7 create --ui

It will launch UI where you will be able to configure the project. By default it launches server on localhost:3001 address. If you want to change the port then use --port <n> argument:

$ framework7 create --ui --port 8080

Generate assets

In created project there is an assets-src directory. It contains required icons and splash screens source images. To generate your own icons and splash screen images, you will need to replace all assets in this directory with your own images (pay attention to image size and format), and run the following command in the project directory:

$ framework7 assets

That is all, script will generate all required sizes of icons and splash screens and place them automatically where they need to be.

Generate assets with user interface

Run the following command in the directory with Framework7 project:

$ framework7 assets --ui

It will launch UI where you will be able to change icons and splash screens. By default it launches server on localhost:3001 address. If you want to change the port then use --port <n> argument:

$ framework7 assets --ui --port 8080

framework7-cli's Issues

f7 cli generates vue configure items for React in webpack.config.js

We using version 2.0.3, choose React as our framework, but found these items in webpack.config.js

  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      vue$: 'vue/dist/vue.esm.js',
      '@': resolvePath('src'),
    },
  },

with these config, we can't import index.jsx as default entry like this:

+components/
+--Foo/
+------index.jsx
+------index.less

import Foo from ./components/Foo

We workaround by change .vue to .jsx in extensions array.

Hope this can be fixed in future versions.

Error while creating new app

Cli created app but it return with this error.

Creating new Framework7 app
Creating a new cordova project.
Downloading scripts & hooks
  Downloading scripts & hooks ✓
Downloading template "tabs"
  Downloading template "tabs" ✓
Downloading latest version of Framework7 and icon fonts
Response status was 404
  framework7.ios.rtl.min.css ✓
/usr/local/lib/node_modules/framework7-cli/node_modules/async/dist/async.js:955
        if (fn === null) throw new Error("Callback was already called.");
                         ^

Error: Callback was already called.
    at /usr/local/lib/node_modules/framework7-cli/node_modules/async/dist/async.js:955:32
    at /usr/local/lib/node_modules/framework7-cli/node_modules/async/dist/async.js:3871:13
    at /usr/local/lib/node_modules/framework7-cli/commands.js:102:29
    at /usr/local/lib/node_modules/framework7-cli/utils/download-framework7.js:43:33
    at Request.<anonymous> (/usr/local/lib/node_modules/framework7-cli/utils/download.js:10:20)
    at emitOne (events.js:116:13)
    at Request.emit (events.js:211:7)
    at Request.onRequestResponse (/usr/local/lib/node_modules/framework7-cli/node_modules/request/request.js:1068:10)
    at emitOne (events.js:116:13)
    at ClientRequest.emit (events.js:211:7)

framework7 create gets stuck at the beginning

cli stops after showing the message All good, you have the latest framework7-cli version on windows. It works fine on the same computer using ubuntu for windows, and also works fine if I set the option --skipUpdate so I guess it has something to do with the ora library.

It shows no error and cannot quit by pressing ctrl-c, only by closing the cmd window.

This did not happen on versions of the cli prior to the 3.

there is nothing in www folder

App will be hosted at http://localhost:8000/www/ios/ (for iOS platform) and http://localhost:8000/www/android/ (for Android platform):

yet I got nothing in myapp's www folder

so running this http://localhost:8000/android/www/index.html returns a Not Found

problem with create project in last f7 update

C:\Users\Lenovo\Documents\AndroidProject\ColorMyPhotos> framework7 create
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Cordova app (targets native iOS and Android apps, or native desktop app with E
lectron)
? App (project) name: My Photos app
? App package (Bundle ID): com.myapp.anaspro
? Target Cordova platform: Android
? What type of framework do you prefer? Framework7 Core
? Choose starter template: Single View
? Should we setup project with bundler? Webpack (recommended)
? Do you want to setup CSS Pre-Processor No, i am good with CSS
? Do you want to specify custom theme color? No, use default color theme
? Do you want to include Framework7 Icons and Material Icons icon fonts? Yes, include icon fonts
√ Generating package.json
√ Creating required folders structure

• Installing NPM Dependencies (Please wait, it can take a while)**events.js:174
  throw er; // Unhandled 'error' event
  ^

Error: spawn cmd ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:240:19)
at onErrorNT (internal/child_process.js:415:16)
at process._tickCallback (internal/process/next_tick.js:63:19)
Emitted 'error' event at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:246:12)
at onErrorNT (internal/child_process.js:415:16)
at process._tickCallback (internal/process/next_tick.js:63:19)
PS C:\Users\Lenovo\Documents\AndroidProject\ColorMyPhotos>**

Serving svelte Cordova App fails

Using v3.2.0 of Framework CLI, I tried building an iOS Cordova App using svelte. No errors on build (either with Terminal or ui) but when I try to run start or run dev, I get a blank screen with a console error TypeError: undefined is not an object (evaluating 'this.$device').
Building a Web App works fine and runs on the local server.

Error when run framework7 create

Death-Mac:ecommerce_app Macintosh$ sudo framework7 create
/usr/local/lib/node_modules/framework7-cli/node_modules/bindings/bindings.js:135
throw err;
^

Error: Could not locate the bindings file. Tried:
→ /usr/local/lib/node_modules/framework7-cli/node_modules/sharp/build/sharp.node
→ /usr/local/lib/node_modules/framework7-cli/node_modules/sharp/build/Debug/sharp.node
→ /usr/local/lib/node_modules/framework7-cli/node_modules/sharp/build/Release/sharp.node
→ /usr/local/lib/node_modules/framework7-cli/node_modules/sharp/out/Debug/sharp.node
→ /usr/local/lib/node_modules/framework7-cli/node_modules/sharp/Debug/sharp.node
→ /usr/local/lib/node_modules/framework7-cli/node_modules/sharp/out/Release/sharp.node
→ /usr/local/lib/node_modules/framework7-cli/node_modules/sharp/Release/sharp.node
→ /usr/local/lib/node_modules/framework7-cli/node_modules/sharp/build/default/sharp.node
→ /usr/local/lib/node_modules/framework7-cli/node_modules/sharp/compiled/8.9.1/darwin/x64/sharp.node
→ /usr/local/lib/node_modules/framework7-cli/node_modules/sharp/addon-build/release/install-root/sharp.node
→ /usr/local/lib/node_modules/framework7-cli/node_modules/sharp/addon-build/debug/install-root/sharp.node
→ /usr/local/lib/node_modules/framework7-cli/node_modules/sharp/addon-build/default/install-root/sharp.node
→ /usr/local/lib/node_modules/framework7-cli/node_modules/sharp/lib/binding/node-v57-darwin-x64/sharp.node
at bindings (/usr/local/lib/node_modules/framework7-cli/node_modules/bindings/bindings.js:126:9)
at Object. (/usr/local/lib/node_modules/framework7-cli/node_modules/sharp/lib/constructor.js:10:34)
at Module._compile (module.js:635:30)
at Object.Module._extensions..js (module.js:646:10)
at Module.load (module.js:554:32)
at tryModuleLoad (module.js:497:12)
at Function.Module._load (module.js:489:3)
at Module.require (module.js:579:17)
at require (internal/module.js:11:18)
at Object. (/usr/local/lib/node_modules/framework7-cli/node_modules/sharp/lib/index.js:3:15)

Add typescript support

I added typescript support to one of my projects, I believe it should not be that hard to add it out of the box in the templates, so you can use .ts files or add the lang="ts" to the scripts in .vue files, while still supporting all old js files. This is what I did to add the support:

1. add ts-loader and typescript to package.json: npm i typescript ts-loader --save-dev
2. add ts and tsx extensions to webpack.config.js:

    extensions: ['.ts', '.tsx', '.js', '.vue', '.json'],

3. Add ts-loader config to webpack.config.js

module: {
rules: [
  ...
  {
	test: /\.tsx?$/,
	loader: 'ts-loader',
	options: { appendTsSuffixTo: [/\.vue$/] }
  },
  {
	test: /\.vue$/,
	use: 'vue-loader',
  },
  ...

4. Add tsconfig.json file:

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node"
    }
}

5. Optional: Add the @babel/plugin-transform-runtime plugin to the babel.config.js file to support async and await keywords in js, I believe this plugin was there before but not sure why it was removed. If this is not added, it would be better to change the target in the previous tsconfig.json file to es5 instead of esnext.

  plugins: [
    'transform-vue-jsx',
    '@babel/plugin-transform-runtime',
    '@babel/plugin-syntax-dynamic-import',
  ]

Also related to this syntax, the oldest version of chrome and webview to support this, is the 55, so maybe when you are ready to drop support for android < 5.0 then this should be the minimum accepted in the browserlist. For the web, I would say chrome 55 should already be the minimum. Firefox 52 and Samsung 6.2 are also reasonable minimums.

I did these for a vue project, but I think it should work for other templates too.

"framework7 create" fails when there is a space y proyect folder path

• Framework7 CLI version: 2.0.1
• Platform and Target: Windows 10 - Cordova PWA With Vuejs

Describe the bug

When there is a space in the proyect path, something like C:\My Projects\F7Project the command "framework7 create" fails.

Output:

√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Cordova + PWA (Progressive Web App)
? App (project) name: Prueba
? App package (Bundle ID): io.framework7.myapp
? Target Cordova platform: (Press to select, to toggle all, to invert selection)iOS, Android
? What type of framework do you prefer? Framework7 with Vue.js
? Choose starter template: Single View
? Do you want to setup CSS Pre-Processor No, i am good with CSS
? Do you want to specify custom theme color? No, use default color theme
√ Generating package.json
√ Creating required folders structure
× Error installing NPM Dependencies
The system cannot find the path specified.

Additional context

The problem is located in the file "framework7-cli\create-app/index.js".

framework7 create Error creating required folders structure

I get error "Error creating required folders structure" when trying to create Framework7 project in Cordova. All cordova command successfully completes.
$ cordova create fr7
$ cd fr7
$ cordova platform add android browser
$ framework7 create

✔ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Simple web app
? App (project) name: MyTest
? What type of framework do you prefer? Framework7 Core
? Choose starter template: Single View
? Should we setup project with bundler? No bundler
? Do you want to specify custom theme color? No, use default color theme
✔ Generating package.json
✖ Error creating required folders structure
undefined

node -v
v10.13.0

npm -v
6.9.0

$ framework7 -V
2.0.4

System: cloud9 ubuntu
How could I solve my issue?

error in use

√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? PWA (Progressive Web App)
? App (project) name: My App
? What type of framework do you prefer? Framework7 with Vue.js
? Choose starter template: Split View (Split Panel)
? Do you want to setup CSS Pre-Processor SCSS (SASS)
? Do you want to specify custom theme color? No, use default color theme
? Do you want to include Framework7 Icons and Material Icons icon fonts? Yes, include icon fonts
√ Generating package.json
√ Creating required folders structure
√ Installing NPM Dependencies
× Error installing NPM Dev Dependencies
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated [email protected]: request has been deprecated, see request/request#3142
npm ERR! Unexpected end of JSON input while parsing near '...738c903f7172001d60bf6'

this.$root.products should be this.$app.data.products in core template

framework7-cli/create-app/templates/core/pages/catalog.html

Line 24 in ac844e7

products: this.$root.products,

framework7-cli/create-app/templates/core/pages/product.html

Line 28 in ac844e7

this.$root.products.forEach(function (product) {

The catalog and product page not working in generated core template with webpack because this.$root.products is undefined.

After replacing this.$root.products with this.$app.data.products, it works as expected.

CLI should use npm proxy

Behind enterprise firewall, cli is not using npm proxy settings and fails update check lookup. is thiere any command line prarameter to bypass update check? or check for proxy settings.

Create a folder for new App

Hi,

I think there should be a checkbox on the create ui that says "Create folder for the app". I installed framework7-cli and in my projects folder run framework7 create --ui, and when i pressed the button, it created all folders within my main projects folder (which was unexpected). Either that or make the first text box for the project path to be editable so the complete path can be typed in for the project?

Webpack dev server cache

With the default webpack configuration I have problems with the cache. After a change the page is reloaded but the files are old.

Full create command returns error

f7 create subs_test_app top.auray.substest "Subscription Testing Suite" --template singleview
Creating new Framework7 app
Creating a new cordova project.
Downloading scripts & hooks
Error: EPERM: operation not permitted, rename 'C:\xampp\htdocs\1489460743747-9789895585609396\framework7-cli-scripts-master' -> 'C:\xampp\htdocs\subs_test_app\scripts'
  Downloading scripts & hooks ✓
module.js:472
    throw err;
    ^

Error: Cannot find module 'C:\xampp\htdocs\subs_test_app\scripts\hooks.json'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at C:\Users\oguzpc\AppData\Roaming\nvm\v7.7.2\node_modules\framework7-cli\commands.js:63:33
    at GithubDownloader.<anonymous> (C:\Users\oguzpc\AppData\Roaming\nvm\v7.7.2\node_modules\framework7-cli\utils\download-github.js:17:21)
    at emitNone (events.js:86:13)
    at GithubDownloader.emit (events.js:188:7)
    at C:\Users\oguzpc\AppData\Roaming\nvm\v7.7.2\node_modules\framework7-cli\node_modules\github-download\lib\github-download.js:134:19
    at next (C:\Users\oguzpc\AppData\Roaming\nvm\v7.7.2\node_modules\framework7-cli\node_modules\rimraf\rimraf.js:74:7)

I tested with and without administrator rights.

Selecting both Web App and PWA will fail to compile with React

Selecting both Web App and PWA with React will generate the error below when npm run start

[./src/js/app.js] 645 bytes {app} [built]
    + 418 hidden modules

ERROR in Can't find self.__WB_MANIFEST in your SW source.
Child InjectManifest:
                Asset      Size          Chunks             Chunk Names
    service-worker.js  3.96 KiB  InjectManifest  [emitted]  InjectManifest
    Entrypoint InjectManifest = service-worker.js
    [./src/service-worker.js] 139 bytes {InjectManifest} [built]
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html] 1.78 KiB {0} [built]
    [./node_modules/lodash/lodash.js] 528 KiB {0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]
ℹ ｢wdm｣: Failed to compile.

Webpack Bundle Size Warning

While production build (with iOS + MD Themes / Tab Template), Webpack complains about the bundle size:

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
css/app.3dbf5a.css (433 KiB)
js/app.3dbf5a.js (985 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
main (1.38 MiB)
css/app.3dbf5a.css
js/app.3dbf5a.js

WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

Error from framework7-cli/index.js:59

When I run framework7 from the command line on my Mac, no matter what the arguments, I get the following error message

/usr/local/lib/node_modules/framework7-cli/index.js:59
...opts,
^^^

SyntaxError: Unexpected token ...
at createScript (vm.js:74:10)
at Object.runInThisContext (vm.js:116:10)
at Module._compile (module.js:533:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Function.Module.runMain (module.js:605:10)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:575:3

It seems like my Javascript parser doesn't understand the "...opts" syntax. This probably isn't a bug in f7 itself but if anyone could suggest how to resolve it I'd be very grateful.

Generate cordova adaptives icons

Could 'generate-assets' generate also cordova adaptives icons? The user sends the background and the foreground, so it generates the necessary densities.

window.Keyboard.disableScrollingInShrinkView has no effect

window.Keyboard.disableScrollingInShrinkView(true); in cordova-app.js has no effect on iPhone 7, iOS12.

Sevelte - Template Project - Listitem - (panel-close)

Necessary generate tamplate changed

<ListItem link="/about/" view=".view-main" panel-close title="About"/>

change to

<ListItem link="/about/" view=".view-main" panelClose title="About"/>

Data sources are not stable

When I download fonts and style files often wait for a long time, it is recommended to add overtime and retry processing

//download.js
var request = require('request-promise');
var Bluebird = require('bluebird');
var fs = require('fs');
module.exports = function(url, dest, cb) {
    var download = function(promise) {
        var promise = request(url)
            .promise();
        promise.timeout(10000)
            .catch(Bluebird.TimeoutError, function() {
                setTimeout(download, 1000);
            })
            .then(function(ret) {
                fs.writeFileSync(dest, ret);
                cb();
            })
            .catch(Bluebird.CancellationError, console.log)
            .catch(function(err) {
                return cb(err.message);
            });
    };
    download();
};

Misleading usage text

This is how the usage text shows up as per now:-

Add cli command for creating a page (Vue)

I am currently using this npm script to generate a page, provided that I have a base.page .js file in my project folder.

Could we add something like this for framework7 cli (when using Vue) ?

Error: Callback was already called. / Response status was 404

Getting the following error when trying to create a new project using sudo f7 create myapp on a Mac. I uninstalled framework7-cli and cordova, and reinstalled without any warnings or errors; I still get this same issue.

Most of the css files are showing up empty

Index page looks like this with f7 run

Latest update breaks generate-assets...

(node:69348) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'platforms' of undefined at generateAssets (/usr/local/lib/node_modules/framework7-cli/generate-assets/index.js:39:19) at Command.program.command.option.option.description.action (/usr/local/lib/node_modules/framework7-cli/index.js:90:13) at process._tickCallback (internal/process/next_tick.js:68:7) (node:69348) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2) (node:69348) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Why do you force the update when running the cli...? Is there anyway of making that optional, like just alerting if an update is available, like npm...

cannot work, error downloading sources

Hi, is this cli still working or not?
It seem that no support at all after a year.

Please advice.

Failed to find 'ANDROID_HOME' environment variable.

ERROR:
Failed to find 'ANDROID_HOME' environment variable. Try setting it manually. Failed to find 'android' command in your 'PATH'. Try update your 'PATH' to include path to valid SDK directory.

I follow this instructions carefully
https://www.fiznool.com/blog/2017/05/30/a-guide-to-installing-cordova-on-windows-10/

but it seems it still cannot find the variable, I already set in system and environment variables

EDIT: I can build cordova project alone like

cordova create cordova-hello-world
cd cordova-hello-world
cordova platform add android
cordova build

Add cordova electron

Добрый день! Cordova выпустила в 9 версии поддержку electron.
Предлагаю добавить в CLI его поддержку при наличии целесообразности.

Новость:
https://cordova.apache.org/announcements/2019/03/18/cordova-electron-release-1.0.2.html

Electron App / Logo not found

Electron App shows gray screen after build and error file://img/logo.png" not found - generating assets before does not fix it.

Show up help if no arguments are supplied

Currently nothing shows up if framework7 is fired in without providing any sort of arguments.

It is good to have help showing up in this scenario

generate-home-page.js missing navbar-large & navbar-large-transparent

generate-home-page.js is missing .navbar-large & .navbar-large-transparent classes for framework7 v5.

V2: Error while creating cordova project

➜  age git:(master) ✗ framework7 create
✔ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Cordova + PWA (Progressive Web App)
? App (project) name: AGE
? App package (Bundle ID): io.framework7.myapp
? Target Cordova platform: (Press <space> to select, <a> to toggle all, <i> to invert selection)iOS, Android
? What type of framework do you prefer? Framework7 with Vue.js
? Choose starter template: Split View (Split Panel)
? Do you want to specify custom theme color? No, use default color theme
✔ Generating package.json
✔ Creating required folders structure
✔ Installing NPM Dependencies
✔ Installing NPM Dev Dependencies
⠏ Creating Cordova project (Please wait, it can take a while)(node:13646) UnhandledPromiseRejectionWarning: TypeError: l.trimStart is not a function
    at str.split.map (/Users/xxx/.nvm/versions/node/v9.4.0/lib/node_modules/framework7-cli/create-app/utils/indent.js:19:53)
    at Array.map (<anonymous>)
    at module.exports (/Users/xxx/.nvm/versions/node/v9.4.0/lib/node_modules/framework7-cli/create-app/utils/indent.js:15:6)
    at module.exports (/Users/xxx/.nvm/versions/node/v9.4.0/lib/node_modules/framework7-cli/create-app/templates/generate-config-xml.js:4:10)
    at Promise (/Users/xxx/.nvm/versions/node/v9.4.0/lib/node_modules/framework7-cli/create-app/templates/create-cordova.js:39:68)
    at <anonymous>
(node:13646) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:13646) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
⠙ Creating Cordova project (Please wait, it can take a while)

I startet a new app via the CLI V2, but after the error nothing happens. has anyone an idea?

Can't generate a release (production) apk for Android, only debug

As the readme says, npm run build-prod-cordova-android should generate a production ready apk (Android release).
Instead, it generate an Android debug apk.

Video: https://photos.app.goo.gl/YoemuSq8nt5ev2Zm9
Up to date f7-cli.

0:52 min is the default npm run build-prod-cordova-android

If i try to generate a release build using just f7 cordova build android --release directly, using the --release flag that should be pass according to this https://cordova.apache.org/docs/en/2.7.0/guide/command-line/#android to generate a release apk, f7-cli throws an error as seen on minute 1:45 in the video:

error: unknown option '--release'

Screenshot: https://tppr.me/WBpQy

But if i edit the package.json and change the build-prod-cordova-android script to directly include the --release flag, then the script properly generates the release apk, as seen on minute 2:02 in the video.

Screenshot: https://tppr.me/prkw5

Showcase as template option

It would be good idea, give showcase one of template option, will give nice interface to run full showcase quick start under cordova or pwa.

Is it possible?

"framework7 create" fails installing deps

• Framework7 version: 2.0.1
• Platform and Target: [e.g. iOS 11 Cordova app, or Android 8 Chrome browser]
• Live Link or JSFiddle: PREFERABLY (IF YOU WANT YOUR ISSUE TO BE RESOLVED ASAP). You can start from forking the following JSFiddle template: JSFiddle

Describe the bug

Executing framework7 create inside an empty folder, the installation of the deps fails.

To Reproduce

$ framework7 create
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Cordova + PWA (Progressive Web App)
? App (project) name: TinabaNext
? App package (Bundle ID): it.tinaba.tinabanext
? Target Cordova platform: Android
? What type of framework do you prefer? Framework7 Core
? Choose starter template: Tabbed Views (Tabs)
? Should we setup project with bundler? Webpack (recommended)
? Do you want to setup CSS Pre-Processor No, i am good with CSS
? Do you want to specify custom theme color? No, use default color theme
√ Generating package.json
√ Creating required folders structure
√ Installing NPM Dependencies
× Error installing NPM Dev Dependencies
npm ERR! Unexpected end of JSON input while parsing near '...t-spread":"7.0.0-beta'

Expected behavior

I expect the creation of the project.

Actual Behavior

The project is half-baked.

Screenshots

n.a.

Additional context

npm log:

...
56 silly pacote tag manifest for style-loader@latest fetched in 867ms
57 http fetch GET 304 https://registry.npmjs.org/uglifyjs-webpack-plugin 887ms (from cache)
58 silly pacote tag manifest for uglifyjs-webpack-plugin@latest fetched in 889ms
59 timing stage:rollbackFailedOptional Completed in 0ms
60 timing stage:runTopLevelLifecycles Completed in 1254ms
61 verbose stack SyntaxError: Unexpected end of JSON input while parsing near '...t-spread":"7.0.0-beta'
61 verbose stack     at JSON.parse (<anonymous>)
61 verbose stack     at parseJson (C:\Users\XXX\AppData\Roaming\npm\node_modules\npm\node_modules\json-parse-better-errors\index.js:7:17)
61 verbose stack     at consumeBody.call.then.buffer (C:\Users\XXX\AppData\Roaming\npm\node_modules\npm\node_modules\node-fetch-npm\src\body.js:96:50)
61 verbose stack     at process._tickCallback (internal/process/next_tick.js:68:7)
...

New scripts suggestion

I think would be nice to include these scripts to the package.json:

"run-cordova-android-dev": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova run android"
 "run-cordova-ios-dev": "cross-env TARGET=cordova cross-env NODE_ENV=development node ./build/build.js && cd cordova && cordova run ios"
```,

Optimize F7 Build

First of all thank you for this great CLI :-)

On initial creation, there a a lot of choices to be taken, but not in all details I know what I will need in the end (which modules for example). Is there a way to update the F7 build later according these modules I really used? Maybe an automatic scan of the app files can be a solution and can be a fixed part of the final build process.

Lighthouse PWA Audit can be improved

What I did:

• created a new tab-based app
• build for production
• uploaded to Firebase Hosting
• run Lighthouse Test

What I expected:

• all green :-)

What I got:

• some room for improvements

Some are easier, some to be discussed. But would be a great experience for users I think if the default CLI templates score very high in the Lighthouse audit :-)

Create Electron App fails silent

What I do:

• framework7 create --ui
• Type: Cordova App (only)
• Cordova: Electron (only)
• Framework: F7+Vue
• Template: Split View
• Custom Build / CSS: Aurora (only)

What I expect:

• Proper project folder creation

What happens:

• UI console last log: "Creating Cordova project (Please wait, it can take a while)"
• Console resets (means, script exit but without any output)

My Setup

• Latest macOS
• Latest Chrome Web Browser

Cordova Apps for iOS / Android are working

f7 cli with --ui generates whitespace in Cordova app

Creating a single view Cordova app with f7 cli --ui creates whitespace at the bottom of the app after cordova build ios in iPhone7 and iPhone X.

CSS Source Maps built with sourcemaps = false

CSS Source Maps are built, even if the flag is set to false.

"webpack": {
      "developmentSourceMap": false,
      "productionSourceMap": false,
      "hashAssets": true,
      "preserveAssetsPaths": false,
      "inlineAssets": true
    }

Creating project crash on windows

I'm facing the following error when creating a new project, after updating to latest version,

F:\test>framework7 create
- Checking for available updates...(node:24068) ExperimentalWarning: The fs.promises API is experimental
√ All good, you have latest framework7-cli version.
? What type of the app are you targeting? Cordova app (targets native iOS and Android apps, or native desktop app with E
lectron)
? App (project) name: My App
? App package (Bundle ID): io.framework7.myapp
? Target Cordova platform: Android
? What type of framework do you prefer? Framework7 Core
? Choose starter template: Single View
? Should we setup project with bundler? Webpack (recommended)
? Do you want to setup CSS Pre-Processor SCSS (SASS)
? Do you want to specify custom theme color? No, use default color theme
? Do you want to include Framework7 Icons and Material Icons icon fonts? Yes, include icon fonts
√ Generating package.json
√ Creating required folders structure
√ Installing NPM Dependencies
√ Installing NPM Dev Dependencies
× Error executing NPM Scripts
Cannot copy `'./node_modules/framework7-icons/fonts/*.*'`: the file doesn't exist
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `cpy './node_modules/framework7-icons/fonts/*.*' './src/fonts/'`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\user\AppData\Roaming\npm-cache\_logs\2019-12-10T08_24_45_893Z-debug.log

Please advise,

Content of 2019-12-10T08_24_45_893Z-debug.log

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\user\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'postinstall' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'postinstall' ]
5 info lifecycle [email protected]~postinstall: [email protected]
6 verbose lifecycle [email protected]~postinstall: unsafe-perm in lifecycle true
7 verbose lifecycle [email protected]~postinstall: PATH: C:\Users\user\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin;F:\test\node_modules\.bin;C:\Users\user\.windows-build-tools\python27\;C:\Users\user\.windows-build-tools\python27\Scripts;C:\Program Files\Docker\Docker\Resources\bin;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\ATI Technologies\ATI.ACE\Core-Static;C:\Program Files (x86)\AMD\ATI.ACE\Core-Static;C:\xampp\php;C:\Program Files\Git\cmd;C:\Program Files\PuTTY\;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit\;C:\ProgramData\chocolatey\bin;C:\WINDOWS\System32\OpenSSH\;C:\Ruby24-x64\bin;C:\Program Files\Ruby24-x64\bin;C:\Users\user\AppData\Local\Microsoft\WindowsApps;C:\Users\user\AppData\Roaming\Composer\vendor\bin;C:\Users\user\AppData\Roaming\npm;C:\Program Files\Java\jdk1.8.0_131\bin;C:\Users\user\Android\sdk\build-tools\25.0.3;C:\Users\user\Android\sdk\platform-tools;C:\Program Files (x86)\Nmap;C:\Program Files (x86)\FontForgeBuilds\bin;T:\xampp\mysql\bin;C:\Program Files (x86)\GnuWin32\bin;C:\flutter\bin;T:\bpm\a;C:\Program Files\nodejs\;C:\Program Files (x86)\Yarn\bin\;C:\HashiCorp\Vagrant\bin;C:\Program Files (x86)\Common Files\Acronis\SnapAPI\;C:\Program Files (x86)\Windows Kits\10\Windows Performance Toolkit\;C:\Program Files\dotnet\;C:\PostgreSQL\pg10\bin;C:\Users\user\AndroidStudioProjects\android-ndk-r18b;C:\ProgramData\ComposerSetup\bin;;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\CMake\bin;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Users\user\scoop\shims;C:\Ruby24-x64\bin;C:\Program Files\Ruby24-x64\bin;C:\Users\user\AppData\Local\Microsoft\WindowsApps;C:\Program Files\Java\jdk1.8.0_131\bin;C:\Users\user\Android\sdk\build-tools\25.0.3;C:\Users\user\Android\sdk\platform-tools;C:\Program Files (x86)\Nmap;C:\Program Files (x86)\FontForgeBuilds\bin;T:\xampp\mysql\bin;C:\Program Files (x86)\GnuWin32\bin;T:\bpm\apache-ant-1.10.3\bin;C:\apache-maven-3.6.2\bin;C:\Program Files\Oracle\VirtualBox;C:\Program Files\Docker\Docker\resources\bin;C:\Users\user\AppData\Local\Microsoft\WindowsApps;C:\Users\user\AppData\Roaming\npm;C:\Users\user\AppData\Local\Yarn\bin;C:\Users\user\AndroidStudioProjects\android-ndk-r18b;C:\flutter\bin;C:\Users\user\Downloads\icons\New folder\woff2\out\Release;
8 verbose lifecycle [email protected]~postinstall: CWD: F:\test
9 silly lifecycle [email protected]~postinstall: Args: [ '/d /s /c',
9 silly lifecycle   'cpy \'./node_modules/framework7-icons/fonts/*.*\' \'./src/fonts/\'' ]
10 silly lifecycle [email protected]~postinstall: Returned: code: 1  signal: null
11 info lifecycle [email protected]~postinstall: Failed to exec postinstall script
12 verbose stack Error: [email protected] postinstall: `cpy './node_modules/framework7-icons/fonts/*.*' './src/fonts/'`
12 verbose stack Exit status 1
12 verbose stack     at EventEmitter.<anonymous> (C:\Users\user\AppData\Roaming\npm\node_modules\npm\lib\utils\lifecycle.js:289:16)
12 verbose stack     at EventEmitter.emit (events.js:182:13)
12 verbose stack     at ChildProcess.<anonymous> (C:\Users\user\AppData\Roaming\npm\node_modules\npm\lib\utils\spawn.js:40:14)
12 verbose stack     at ChildProcess.emit (events.js:182:13)
12 verbose stack     at maybeClose (internal/child_process.js:957:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:246:5)
13 verbose pkgid [email protected]
14 verbose cwd F:\test
15 verbose Windows_NT 10.0.18362
16 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\user\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "postinstall"
17 verbose node v10.1.0
18 verbose npm  v5.3.0
19 error code ELIFECYCLE
20 error errno 1
21 error [email protected] postinstall: `cpy './node_modules/framework7-icons/fonts/*.*' './src/fonts/'`
21 error Exit status 1
22 error Failed at the [email protected] postinstall script.
22 error This is probably not a problem with npm. There is likely additional logging output above.
23 verbose exit [ 1, true ]

Label for "Fill style navigation bars" ui installation option potentially wrong

After running framework7 create --ui I see the label Enables dark theme by default under Fill style navigation bars checkbox:

Clicking it doesn't seem to enable dark mode which seems to indicate that this label text was meant to be something else.

Тестирование на Windows7 темы с форума "New framework7-cli feedback needed"

Хотел поучаствовать в http://forum.framework7.io/t/new-framework7-cli-feedback-needed/5373 но форум мне отдает 403, т.к. мой аккаунт в статусе "hold".

Система: Windows7.

1. После npm install -g framework7-cli@beta и запуска framework7 create получил:
   

2. Выполним последнюю команду из скриншота - все ок.

3. Теперь выполняю framework7 create Отвечаю на вопросы и в конце получаю:
   

Executed generate-assets and Electron stopped working

I updated framework7-cli to 3.2.3, executed generate-assets, and now npm run cordova-electron fails with Cannot find module electron and before that I had to manually npm install shelljs. If I manually npm install electron, it breaks native build modules for some reason.

I'm very confused why this happened, and how to fix it. Any ideas?

Warn the user if unknown arguments were provided

Presently, on firing in framework7 <junkcmd> nothing shows up.
Instead, it would be good to show up a suitable warning.

feature request: support for custom package.json when generating assets

I'm using F7 with create-react-app so my project has not been generated using the CLI.
When generating assets it will not work because is missing framework7 entry in package.json, please print an error and terminate the script, actually the exception is being ignored.
After adding manually the missing parameters i don't like that you cannot customize where icons are generated for pwa, it uses "static" or "assets" instead i'm using "public". It would be nice to have an options for that in package.json.
Thanks.

Template7 helpers error

Hi,

environment : framework7-cli webpack

I register Template7 helpers in "app.js" and declare it in "template7-helpers-list.js" but When I try to test I get this error :

ERROR in ./src/pages/stories.f7.html Module build failed (from ./node_modules/framework7-component-loader/lib/index.js): Error: Template7: Missing helper: "pluralize" at Template7Class.compile (/Users/guillaumebiton/Documents/Github/HackerNews7/node_modules/template7/dist/template7.js:584:17) at getCompileFn (/Users/guillaumebiton/Documents/Github/HackerNews7/node_modules/template7/dist/template7.js:525:37) at Template7Class.compile (/Users/guillaumebiton/Documents/Github/HackerNews7/node_modules/template7/dist/template7.js:582:295) at getCompileFn (/Users/guillaumebiton/Documents/Github/HackerNews7/node_modules/template7/dist/template7.js:525:37) at Template7Class.compile (/Users/guillaumebiton/Documents/Github/HackerNews7/node_modules/template7/dist/template7.js:582:295) at getCompileFn (/Users/guillaumebiton/Documents/Github/HackerNews7/node_modules/template7/dist/template7.js:525:37) at Template7Class.compile (/Users/guillaumebiton/Documents/Github/HackerNews7/node_modules/template7/dist/template7.js:582:295) at Function.compile (/Users/guillaumebiton/Documents/Github/HackerNews7/node_modules/template7/dist/template7.js:649:21) at Object.loader (/Users/guillaumebiton/Documents/Github/HackerNews7/node_modules/framework7-component-loader/lib/index.js:161:43) @ ./src/js/routes.js 3:0-51 13:19-30 20:21-32 @ ./src/js/app.js @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/js/app.js

Should I declare them somewhere else ?