Simulate android --target=chrome

1

Hi, I realise I asked already this question quite a long time ago but I’m still struggling with F7v5 and Cordova.

One of the most useful thing for me during development of Cordova App is the command

simulate android --target=chrome

Which allows me to test very fast changes to my app in a browser (instead of having to load the app in an emulator or physical device).

With F7v5 dir structure I’m confused and I’m not sure how to use this command in a consistent manner.
If I run it in the F7 directory, of course, “simulate” complains that this is not a Cordova directory.
If I cd to cordova/ the command works but I have a “naked” Cordova project… In practive I don’t have the files available in the project root www directory.

framework7 simulate android --target=chrome

doesn’t work either

How can I work in F7-project/src/ path and see my changes reflected through simulate?

Maybe I need to execute something first to ensure the cordova/www directory gets synced with the root one?

NOTE: Reason for using simulate instead of the development server in F7 is to have (some) plugin simulated

2

If it is a cordova project, then:

cd cordova && simulate android --target=chrome

But (depends on your config) if it has webpack the app should be built first

3

Thanks Vlaidmir

I think it links to this other question:

and Abiodun answered
“I figured out the problem. I just needed to run npm run build-dev-cordova-android, before emulating”

Now… should it become (with webpack):

npm run build-dev-cordova-android && cd cordova && simulate android --target=chrome

?

I’m also not clear what will happen if I exclude webpack because I think that anyway the cordova folder will not be synced automatically but will anyway require a command

4

This is correct command then. When you run webpack it will built files from src into cordova/www folder

5

Wonderful. I will give it a try tonight and report back

6

no: this is not a solution.

In effect with the command above we have to fully rebuild the app which is too time consuming.

A more appropriate way seems to be to use “framework7 cordova create” but it seems not to work either. Maybe due to webpack?

7

It’s not even webpack… it doesn’t work…

So… is there a command to sync the src/ dir with cordova/ WITHOUT having to compile the app?

8

I’m wondering if I should approach the issue in an opposite way.
Basically, in my case, I’d like/need to stick to pure “cordova” as much as possible also in terms of tools (“simulate” command first of all).

Would it be a right approach to either generate all the assets, make the first build and then just work in cordova/ subdir?

Or… can I simply create a cordova project, in index.html add in

and before the end of

and then just work as usual?

Would those 2 files be enough and are the right versions for a general cordova project?

9

No, it is not possible as you use webpack, webpack requires build step that generates code/bundle that can run in browser.

But if you check webpack docs, it has a command (or options) to build once and then watch for changes and quickly rebuild on them, the CLI command is something like:

 webpack --config ./path/to/webpack/config --watch

so with this you can still work with src folder

10

Thanks I will give it a try asap

11

Ok I tried this inside F7 root dir:

./node_modules/webpack/bin/webpack.js --config ./build/webpack.config.js --watch

Every time I change a file in /src, webpack is issuing the related message BUT the cordova dir content is not updated…

12

Check your package.json with commands, there probably some extra flag need to be set like TARGET=cordova or something

13

Tried adding TARGET=cordova in various place but no luck.

14

What version of android emulator you are using, try using android 7 and above. android 5 and 6 has this issue in emulation.

15

Hi Srbala, thanks for comment
Anyway the simulation works properly, the issue is that the code doesn’t get synced automatically into the cordova folder… that’s why I’m looking for workaround, including just using the js and css files directly for F7 withouth any automation…