How to add own files and folders? (v5) Framework7 5.1.7 broken

How to add own files and folders? v5

I have a development project up and running using additional code and files:
myownfunc.js (simple function, not a js module)

and some files and folders:

Everyghing works with
% npm start // development mode on macOS within a browser

But when I try to make a deploment with
% npm run build

in ./www/ there is not my own JS file and not my own folders and files.

npm run build-cordova-ios
npm run cordova-electron

They do run and compile but sure because of my missing files it is not running.

How can I add own files and folders so that it get’s deployed?

I can also run
npm run build-cordova-ios
but the same, my own files in ./src will not get there, so the iOS development files are incomplete.

I have own fonts added like so (seems to get copied to ./www ):
and refered in my-app.css as
@font-face {
font-family: ‘My Font’;
src: url(‘my-new-font.ttf’);

But any other folders like
do not get copied into ./www etc. and also does not get copied to iOS deployment folder

I did fire up web inspector (Safari) and there it shows:

TypeError: undefined is not an object (evaluating 'n.$el.append')

So not only resource files are missing but JavaScript has CRASHED.

How can I DISABLE this F*cking bundler thing for an existing project at least for the debubbing developent phase ?! I want to see plain text JavaScript.
This vite.config.js thing is someting nobody understands.



Source code:
})) : (a.removeClass("with-searchbar-expandable-enabled with-searchbar-expandable-enabled-no-transition").addClass("with-searchbar-expandable-closing"), e.$el.transitionEnd(function() {

TypeError: undefined is not an object (evaluating 'n.$el.append')

If you don’t want to use a bundler, just add the F7 Javascript & CSS files manually into your project, and reference them in your HTML.

You can download the files from NPM or GitHub, and reference them in your app in a manner like this: App HTML Layout | Framework7 Documentation

You can still run your project in a simulator or device using your Cordova installation (use cordova build ios) without using the Framework7-CLI tool.

With of without bundler? This does not work if you have bundler things in your code.

Testing without Bundler (Broken F7)

I did a new emtpy project an F7 is now broken…

“GET /framework7/framework7-bundle.min.css” Error (404): “Not found”

“GET /framework7/framework7-bundle.min.js” Error (404): “Not found”

“GET /fonts/Framework7Icons-Regular.woff2” Error (404): “Not found”

“GET /fonts/material-icons.woff2” Error (404): “Not found”

“GET /fonts/Framework7Icons-Regular.woff” Error (404): “Not found”

“GET /fonts/material-icons.woff” Error (404): “Not found”

Please provide a stable and complete version.

% framework7 --version

% node -v

% npm -v

% mkdir src
% cd src

% framework7 create --ui
% npm install

% npm start

Both with and without package manager vite is broken. for with vite some fonts are missing.

I did

npm install framework7-icons

but nothing changed.

I got V5 with npm install… etc.

I am not getting v6.3.16 ? But why?

you are mixing framework7-cli with framework7-src

framework7-cli v3.4.5 => framework7-src v5.7.14
framework7-cli v5.1.7 => framework7-src v6.3.16

it seems like you are using cli-5.1.7/src-6.3.16
and your source code is v5 (correct me if i’m wrong)

if this is the case then it won’t work.
things got changed form v5 to v6

@deejay how can I check that? The official documentaiton is very small.

And how can I propperly install V6? I prefere locally, within the project directory, so that it does not get mixed up with other projects.
How can I install using NXP (new this is integrated with npm but how to call nxp within npm?)

No where is a full installation instruction set.

% framework7 create --ui
:heavy_check_mark: All good, you have latest framework7-cli version.
:heavy_multiplication_x: Framework7 project already set up in current directory

% framework7 --version

How can I get version 6?

framework7 --version
npm list #on project-root dir


cat package.json #on project-root dir

don’t go into it (yet)
first make it work

I did that (how often?):

% npm install -g framework7-cli
% framework7 --version  
% which framework7

It will give me version 5 only.

% npm list

├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]
% framework7 create --ui
:heavy_check_mark: All good, you have latest framework7-cli version.
:heavy_multiplication_x: Framework7 project already set up in current directory
% framework7 --version

How can I get version 6?

there is no version 6 of framework7-cli (as of today - 2022-03-23)
v5.1.7 is the latest
and you’ve got it (everything is ok)

[email protected] is the version of framework7-source-code
6.3.16 is the latest
and you’ve got it (everything is ok)

you are ready to go

Ok, but then it’s broken. I did a new project with vite and FONTS are missing, it places it in the wrong directory, etc. is this normal? Without vite package thing also.
(As if I remember right this is BROKEN since version 3? Why these things don’t get fixed?)

./src/fonts/node_modules/framework7-icons/fonts/*.ttf etc.

Can I DISALBE vite compression temporarly within vite settings just for debuggin my app? How?

The question also was HOW can I add my own assets files like local json files and .js with this vite thing? It does not get deployied with

npm run build


npm run build-cordova-ios

So then files are missing and sure will and can not work then.

it’s not

never was

you either import the css (with the bundler ‘thing’) =>

import 'framework7-icons/css/framework7-icons.css';

or (without vite) copy the fonts and css to your src directory =>

‘static’ assets you can put inside ‘public’ directory
vite will copy it to your www directory at compile time.

‘imported’ assets you can put anywhere in your ‘src’ directory

Thank you very much for your information I will get into that.

Missing fonts problem

I found out that this does not work does not get executed? I can call it manually but then it does not copy the fonts. (As far as I can tell this never worked since 3.x don’t know why. I also needed to copy them manually back then.)

% npm run postinstall

> [email protected] postinstall
> cpy ./node_modules/framework7-icons/fonts/*.* ./src/fonts/ && cpy ./node_modules/material-icons/iconfont/*.* ./src/fonts/

this is exactly (one of) the reason why we are using npm/bundler/etc,
so you don’t need to mess up with ‘those things’ and focus on your part in the project

i just checked, and it’s working

Fonts not copyied to the right place - Solution found / FIX / macOS
It’s getting executed but it does NOT copy the files (fonts). I can run it manually but nothing happens. So, it’s broken… don’t know why. (macOS. Windows not tested.)
I have to do it (copy files) manally to put them in ./src/fonts folder. (The npm, bundler, things does not work here. Maybe on Windows but not on macOS)
How to debug=?

So the problem is with cpy. cpy on a macOS DOES NOT copy the files within the given target directory instead it will take the source directory structure with it. Which is wrong in this case.


    "postinstall": "cpy ./node_modules/framework7-icons/fonts/*.* ./src/fonts/ && cpy ./node_modules/material-icons/iconfont/*.* ./src/fonts/"

Solution: FIX: (at least for macOS)
Add --flat for every cpy command. This will put the files in ./src/fonts/ as expected without any sub-folders.

    "postinstall": "cpy --flat ./node_modules/framework7-icons/fonts/*.* ./src/fonts/ && cpy --flat ./node_modules/material-icons/iconfont/*.* ./src/fonts/"

After that, you can run:

npm run postinstall

and it will place the required font files in the right place.

Support: I think this needs to be fixed.

% cpy --help
    --flat      Flatten directory structure.
                  All copied files will be put in the same directory.

(I also had to install cpy and cpy-cli manually don’t know why, globally, with -g so that the Terminal command line can find it. Don’t know if it’s neede but…)

After that, I think the install process should work out-of-the-box also for macOS.