Beginner: Web app, how to start?

Questions
1

OK, I followed the installation on the main page and did this on my linux box:

npm i framework7-cli cordova -g
framework7 create --ui

And I opened a web browser to the UI creation server page and selected basic stuff to create a web app. And I see that it created a bunch of files and directories in my target directory (like assets-src, build, node-modules, src and an empty www directory)

And that’s where the documentation stops.

I’ve never used a package manager before, I’m a simple soul that is used to html, css, javascript and php.

So where do I put my index.html, and what do I do to package it together into an app?

Is this too complicated for a web app and is there a non package manager way of using F7 that would be easier?

I notice that the main page specified cordova, but I’m not looking to build a native app inside cordova, I just want to build an HTML page/app that I get access via a mobile web browser.

Thanks a bunch!

2

Check README.md file in created project

3

I did see that but I don’t know what to do with that info. It says:

NPM Scripts

  • 🔥 start - run development server
  • 🔧 dev - run development server
  • 🔧 build-dev - build web app using development mode (faster build without minification and optimization)
  • 🔧 build-prod - build web app for production

OK, so which directory do I put my index.html? And then I just ran

npm start

and I got a bunch of fascinating output, but I don’t know what it means?

4

OK, At least I’ve gotten to the first stage where I can start coding. Here’s what I would suggest to add as extra documentation to help newbies in that README.md file.

  1. Running “npm start” from the root directory of your application (the directory that this README.md is located) will run a development web server at address: localhost:8080. Depending on your particular configuration, this web server may only be accessible from the development machine it is running on. To make it accessible from other computers (eg. you are running a headless development machine), you must change a file so that the development server binds to an external IP address. Edit the file node_modules/webpack-dev-server/bin/options.js and search for ‘localhost’. Replace that with the domain name or IP address or your machine.

  2. The index.html is located in the src directory, but you should start with modifications of the home.f7.html file which is located in the src/pages directory.

  3. Changes made and saved to this and other files will result in immediate recompilation and reloading of the web page on your browser.

That’s as far as I’ve gotten, but there really should be some sort of newbie guide to node.js, npm, webpack and whatever else for someone who only knows “plain HTML, CSS and JavaScript” which is how Framework7 advertises itself on the main page.

1 Like
5

Hi, Cosmacelf. Looks like I’ve run into the very same problem two years after you. Did you happen to find a good, thorough tutorial? Thanks for answering!

1 Like