This is a clean split view template generated from framework7 cli, and includes a simple php api backend.

• Framework7 v6
• React

• PHP

• clone the repo locally
• change all occurences of 'MyProject' and 'myproject' in the folder to the actual name of your project

npm install
cd public
composer install

• copy .env.template in public/ folder to .env. Add any configuration you need and it will be available in your php code.

Goes to Vladimir Kharlampidi (@nolimits4web) 👍 for converting the generated templated to v6 on request.

Framework7 app was created with following options:

{
  "cwd": "",
  "type": [
    "web",
    "pwa"
  ],
  "name": "F76",
  "framework": "react",
  "template": "split-view",
  "bundler": "webpack",
  "cssPreProcessor": "less",
  "theming": {
    "customColor": false,
    "color": "#007aff",
    "darkTheme": false,
    "iconFonts": false,
    "fillBars": false
  },
  "customBuild": true,
  "customBuildConfig": {
    "rtl": false,
    "darkTheme": true,
    "lightTheme": true,
    "themes": [
      "ios",
      "md",
      "aurora"
    ],
    "components": [
      "appbar",
      "dialog",
      "popup",
      "login-screen",
      "popover",
      "actions",
      "sheet",
      "toast",
      "preloader",
      "progressbar",
      "sortable",
      "swipeout",
      "accordion",
      "contacts-list",
      "virtual-list",
      "list-index",
      "timeline",
      "tabs",
      "panel",
      "card",
      "chip",
      "form",
      "input",
      "checkbox",
      "radio",
      "toggle",
      "range",
      "stepper",
      "smart-select",
      "grid",
      "calendar",
      "picker",
      "infinite-scroll",
      "pull-to-refresh",
      "lazy",
      "data-table",
      "fab",
      "searchbar",
      "messages",
      "messagebar",
      "swiper",
      "photo-browser",
      "notification",
      "autocomplete",
      "tooltip",
      "gauge",
      "skeleton",
      "menu",
      "color-picker",
      "treeview",
      "text-editor",
      "elevation",
      "typography"
    ]
  },
  "webpack": {
    "developmentSourceMap": false,
    "productionSourceMap": false,
    "hashAssets": false,
    "preserveAssetsPaths": true,
    "inlineAssets": true
  }
}

• 🔥 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

There is a webpack bundler setup. It compiles and bundles all "front-end" resources. You should work only with files located in /src folder. Webpack config located in build/webpack.config.js.

Webpack has specific way of handling static assets (CSS files, images, audios). You can learn more about correct way of doing things on official webpack documentation.

This is a PWA. Don't forget to check what is inside of your service-worker.js. It is also recommended that you disable service worker (or enable "Update on reload") in browser dev tools during development.

Assets (icons, splash screens) source images located in assets-src folder. To generate your own icons and splash screen images, you will need to replace all assets in this directory with your own images (pay attention to image size and format), and run the following command in the project directory:

framework7 assets

Or launch UI where you will be able to change icons and splash screens:

framework7 assets --ui

• Framework7 Core Documentation

• Framework7 React Documentation

• Framework7 Icons Reference

• Community Forum

Love Framework7? Support project by donating or pledging on patreon: https://patreon.com/vladimirkharlampidi