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

Michael · March 22, 2022, 10:26am

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:
./src/locales/
./src/assets2/

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.

or
npm run build-cordova-ios
or
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 ):
./src/css/my-new-font.ttf
and refered in my-app.css as
@font-face {
font-family: ‘My Font’;
src: url(‘my-new-font.ttf’);
}

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

Michael · March 22, 2022, 2:46pm

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.

Details:

File:
app://localhost/assets/index.d9fdbc52.js

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

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

kerrydp · March 22, 2022, 6:09pm

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.

Michael · March 22, 2022, 7:11pm

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
5.1.7

% node -v
v17.5.0

% npm -v
8.5.1

% 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?

deejay · March 23, 2022, 2:03am

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

Michael · March 23, 2022, 8:38am

@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
All good, you have latest framework7-cli version.
Framework7 project already set up in current directory

% framework7 --version
5.1.7

How can I get version 6?

deejay · March 23, 2022, 9:10am

#framework7-cli
framework7 --version

#framework7
npm list #on project-root dir

or

cat package.json #on project-root dir

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

Michael · March 23, 2022, 9:26am

I did that (how often?):

% npm install -g framework7-cli

% framework7 --version  
5.1.7

% which framework7
/usr/local/bin/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
5.1.7

How can I get version 6?

deejay · March 23, 2022, 9:32am

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

Michael · March 23, 2022, 9:35am

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.
./src/fonts/node_modules/material-icons/iconfon/*

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

./www/
or

npm run build-cordova-ios

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

deejay · March 23, 2022, 10:41am

it’s not

never was

yes
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 => https://github.com/framework7io/framework7-icons/blob/master/README.md

‘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

Michael · March 23, 2022, 10:56am

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/

deejay · March 23, 2022, 11:10am

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

anyway:
i just checked, and it’s working

Michael · March 23, 2022, 11:43am

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.

Problem:

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