I am completely new to creating apps, not so much with HTML and CSS but, with mobile apps and Javascript, yes. Very new. So please bear with me on this or these questions as I am sure they are pretty ridiculous.
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.
So, do I edit those files and move them into the pets folder where the rest of the Framework7 files are located? I do see that the Framework7 CSS and the Javascript are linked in the index.html code of the template:
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.
I guess I am looking at where and how to begin. As in can I start working on the look and feel of the app while working on getting better at Javascript to add functionality and such?
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 npm?
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! 
1 Like
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 www folder).
When you run npm run build-prod, it builds the app for production the web (inside the www folder).
When you run npm run build-prod-cordova, it builds the app for production for cordova (inside the cordova/www folder)
Even if you intend to package your app with Cordova, you should not touch at anything inside www folders
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.