I have created a new app in a new folder called “pets”. Using the CLI, I created a basic app within the pets folder. I went into the folder to explore and get an idea of what kind of files were there and if I recognized anything. After some looking around, I noticed there were a few index.html files in different folders but none in the root folder (pets) as I am used to when dealing with websites which is somewhat confusing to me. However, I also downloaded the simplest core template possible folder with just the index.html, main.js and main.css files… which makes way more sense to me.
Is that all that is needed for the app to function properly? The Pets folder has everything in it. The Cordova folder, Build and SRC folders and the rest of the framework files.
Any clarification on all of this would be greatly appreciated. Thank you.
When you used the framework7 cli, which options have you chosen? Do you know
Can you copy paste the content of the
package.json file that should be at the root of your folder?
Normally, you should code your app in the
src folder, and run in your terminal the following commands
npm run dev from your
pets folder. This will build your app in the
www folders and open your browser to show it.
In short, you will almost exclusively modify the files inside the
src folder, plus some files at the root of your project folder (
petsin your case). Almost every other folders are dynamically generated.
(And technically, if you look at the
.gitignore file in your root folder, you will observe that it ignores almost every file beside those I listed. Because they are computer generated and therefore not interesting to push to git)
Hope it will help you!
Thank you soooo much Pitouli! That makes perfect sense now. I know alot that goes on behind the scenes when the app is “built” and I just kinda needed to know what not to worry about… at least to start with. Thanks again!
@Pitouli I was actually looking at using Framework7 vs PhoneGap. As you stated… in my Pets folder with FW7, the www folder is empty to start with and the files I am used to seeing when building websites is in the src folder as you stated as well.
However, in PhoneGap, (I chose the app to include FW7 during the initial process when starting a PhoneGap app) the www folder has those same files in it already. Can you or somebody explain mainly why?
I was interested in using PhoneGap at first because of its use of Cordova and what I have read concerning how easy it makes creating apps that perform and look great on both Android and iOS. I just don’t want to start using FW7 and then need to switch to PhoneGap for lack of understanding. I really should be using the one that requires less overall experience.
When you run
npm run dev, it builds the app for development for the web (inside the
When you run
npm run build-prod, it builds the app for production the web (inside the
When you run
npm run build-prod-cordova, it builds the app for production for cordova (inside the
Even if you intend to package your app with Cordova, you should not touch at anything inside
Last but not least, FW7 and Cordova are not contrary ; they are complementary.
Cordova/PhoneGap (basically the same thing ; I let you google it) package websites inside native app so you can publish them on app stores and access native features.
Framework7 helps create websites that looks like native app.
So when you use FW7 and Cordova, you can publish to stores a native app that runs inside a website that looks like a native app.