๐Ÿ›  New framework7-cli feedback needed


#1

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 [email protected]

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
...

How to use js in framework7 html page
#2

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?

#3

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


#4

Hello @nolimits4web,

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

npm install -g cordova
OK. No errors

npm install -g [email protected]
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.


#5

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


#7
C:\Users\User\Desktop\framework-cli-beta>npm install -g [email protected]
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])

#8

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


#9

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.


#10

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


#11

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

image


#12

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


#13

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:

:heavy_multiplication_x: 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โ€ฆ


#14

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


#15

Good catch, thanks, fixed in beta-10


#16

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


#17

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


#18

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


#19

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โ€ฆ


#20

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

image
I also used this element, but it didnโ€™t work


#21

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