🛠 New framework7-cli feedback needed

nolimits4web · December 27, 2018, 1:01pm

Hey guys!

I’m working on all new framework7-cli that will be the most recommended way of setting up new Framework7 project from v4 release.

It is a way better than few templates we have as it allows to create project dynamically as it allows:

to select template: Single View, Tabs, Split View
to choose framework: F7 Core, F7 Vue, F7 React
to choose target: Web app, PWA, or Cordova
to specify custom color theme from the start
to choose bundler: No bundler, Webpack or Rollup (coming later)
to generate required icons and splash screen

So it is a pretty powerful tool to start Framework7 app development.

I need you feedback and help with testing this out. Beta is already available.

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@beta

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.

Cordova APIs

To run cordova related commands run the following command in the project root directory:

$ framework7 cordova [..args]

For example:

$ framework7 cordova plugin add cordova-plugin-statusbar
$ framework7 cordova plugin add cordova-plugin-splashscreen
$ framework7 cordova build ios
...

nolimits4web · December 27, 2018, 1:04pm

I’m looking for the following things to check:

do you have any errors with CLI itself when it creates the app?
do you have any errors with CLI UI when it creates the app?
do you have any errors/issues in generated app?
does it work correctly under Windows?

vg0x01 · December 27, 2018, 6:33pm

What benefit do you get running Cordova commands in f7 cli?

Gen123 · December 27, 2018, 10:07pm

Hello @nolimits4web,

I just tested it in Windows. See below the errors:

npm install -g cordova
OK. No errors

npm install -g framework7-cli@beta
OK. No errors

framework7 create

√ Installing NPM Dev Dependencies
\ Creating Cordova project (Please wait, it can take a while)(node:12024) UnhandledPromiseRejectionWarning: TypeError: l.trimStart is not a function
_ at str.split.map (C:\Users\super\AppData\Roaming\npm\node_modules\framework7-cli\create-app\utils\indent.js:19:53)_
_ at Array.map ()_
/ Creating Cordova project (Please wait, it can take a while)

.js:4:10)
_ at Promise (C:\Users\super\AppData\Roaming\npm\node_modules\framework7-cli\create-app\templates\create-cordova.js:39:68)_
_ at _
_ at process.tickCallback (internal/process/next_tick.js:188:7)

_ an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)_

_ are not handled will terminate the Node.js process with a non-zero exit code._

framework7 create --ui

Framework7 CLI UI is running on http://localhost:3001 (CTRL + C to exit)
(node:8332) UnhandledPromiseRejectionWarning: TypeError: l.trimStart is not a function
_ at str.split.map (C:\Users\super\AppData\Roaming\npm\node_modules\framework7-cli\create-app\utils\indent.js:19:53)_
_ at Array.map ()_
_ at module.exports (C:\Users\super\AppData\Roaming\npm\node_modules\framework7-cli\create-app\utils\indent.js:15:6)_
_ at module.exports (C:\Users\super\AppData\Roaming\npm\node_modules\framework7-cli\create-app\templates\generate-config-xml.js:4:10)_
_ at Promise (C:\Users\super\AppData\Roaming\npm\node_modules\framework7-cli\create-app\templates\create-cordova.js:39:68)_
_ at _
_ at process.tickCallback (internal/process/next_tick.js:188:7)
(node:8332) 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:8332) [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.

insulae · December 28, 2018, 2:08am

I really want that function. It is a bit annoying if you use webpack to have to program the interface and not be able to test it with the plugins that your application needs. I think it’s a good thing

Overman · December 28, 2018, 6:44am

C:\Users\User\Desktop\framework-cli-beta>npm install -g framework7-cli@beta
C:\Users\User\AppData\Roaming\npm\framework7 -> C:\Users\User\AppData\Roaming\npm\node_modules\framework7-cli\index.js

> [email protected] install C:\Users\User\AppData\Roaming\npm\node_modules\framework7-cli\node_modules\sharp
> (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)

info sharp Using cached C:\Users\User\AppData\Roaming\npm-cache\_libvips\libvips-8.7.0-win32-x64.tar.gz
info sharp Creating C:\Users\User\AppData\Roaming\npm\node_modules\framework7-cli\node_modules\sharp\build\Release
info sharp Copying DLLs from C:\Users\User\AppData\Roaming\npm\node_modules\framework7-cli\node_modules\sharp\vendor\lib to C:\Users\User\AppData\Roaming\npm\node_modules\framework7-cli\node_modules\sharp\build\Release
prebuild-install WARN install No prebuilt binaries found (target=11.2.0 runtime=node arch=x64 platform=win32)

C:\Users\User\AppData\Roaming\npm\node_modules\framework7-cli\node_modules\sharp>if not defined npm_config_node_gyp (node "C:\Users\User\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin\\..\..\node_modules\node-gyp\bin\node-gyp.js" rebuild )  else (node "C:\Users\User\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" rebuild )
gyp ERR! configure error
gyp ERR! stack Error: Command failed: C:\Users\User\AppData\Local\Programs\Python\Python37\python.EXE -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack   File "<string>", line 1
gyp ERR! stack     import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack                                ^
gyp ERR! stack SyntaxError: invalid syntax
gyp ERR! stack
gyp ERR! stack     at ChildProcess.exithandler (child_process.js:294:12)
gyp ERR! stack     at ChildProcess.emit (events.js:182:13)
gyp ERR! stack     at maybeClose (internal/child_process.js:978:16)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:265:5)
gyp ERR! System Windows_NT 10.0.17134
gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\User\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild"
gyp ERR! cwd C:\Users\User\AppData\Roaming\npm\node_modules\framework7-cli\node_modules\sharp
gyp ERR! node -v v11.2.0
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: `(node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install 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\2018-12-28T06_41_31_909Z-debug.log

Log file

C:\Users\User\Desktop\framework-cli-beta>cordova -v
8.1.2 ([email protected])

nolimits4web · December 28, 2018, 9:42am

@Gen123 you need to update node.js to latest 10+ version

nolimits4web · December 28, 2018, 9:44am

In latest 2.0.0-beta.8 it is also possible to generate assets (Icons and Splashscreen):

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 generate-assets

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

nolimits4web · December 28, 2018, 9:45am

Only one benefit. Cordova app project will be created here in subfolder and to call cordova commands you will need to cd into that folder and back for other scripts. f7 cli takes care about it and automatically cd-ing into required folder

Gen123 · December 28, 2018, 10:18am

Thanks. I just updated node.js and FYI, cli create works fine but the UI fails never completes, see below

nolimits4web · December 28, 2018, 10:36am

Did you clear folder before running UI? Because Cordova won’t install again if there is already Cordova project

jmaynard · December 28, 2018, 12:20pm

Great idea and looking forward to gold release…

Using framework7 create (with --UI fails with localhost error).
seems to work until near the end when this error:

Error creating Cordova project
Path already exists and is not empty: /Users/Jeff/Box/cordova

This is odd because I created the test project in /Users/Jeff/Box Sync/iPhone/PG5/Test
after the error message the created folders are all empty.
Hope this helps…

right_ydd · December 28, 2018, 12:32pm

I created a Framework7 vue template using Framework7Cli

I found a problem when trying cordova backbutton event

It results in repeated initialization of cordova-app.js

It causes repeated initialization of cordova – app.js, so that the backbutton event cannot be used normally. After commenting one of the initialization codes, it works normally

nolimits4web · December 28, 2018, 2:13pm

Good catch, thanks, fixed in beta-10

nolimits4web · December 28, 2018, 2:15pm

New 2.0.0-beta-10 comes with Generate assets UI:

framework7 generate-assets --ui

It will launch nice UI where you can configure icons and splash screens

nolimits4web · December 28, 2018, 2:16pm

It is native cordova’s error. Means that before you run f7-cli command you already had cordova folder in project directory

nolimits4web · December 28, 2018, 2:21pm

Looks like can be a node version related. I see in sharp docs that it has pre-compiled binaries only for LTS versions of node http://sharp.pixelplumbing.com/en/stable/install/#building-from-source

jmaynard · December 28, 2018, 2:41pm

No, the project folder was empty (I created it just to test) and is in a different place - I suspect it may be that something in F7 does not accept folder names with a space inside; so, my actual location of /Users/Jeff/Box Sync/iPhone/PG5/Test was interpreted as /Users/Jeff/Box because of the space (between Box and Sync)???
Will try another folder without a space in the name tomorrow and report back…

right_ydd · December 28, 2018, 3:14pm

I am very fond of using Framework7cli to create template themes. How can I replace the theme of an existing project?

I also used this element, but it didn’t work

nolimits4web · December 28, 2018, 3:29pm

Yep, you are right, there is issue when space is in folder names. Should be fixed now in beta11