Framework7 Deployment and Usage Guide

Prerequisites

Runtime: Modern web browser (Chrome, Safari, Firefox, Edge)
Development Tools: Node.js (version 12.0.0 or higher)
Package Manager: npm (comes with Node.js) or yarn
Optional: Git for version control

Installation

1. Clone the Repository

git clone https://github.com/framework7io/framework7.git
cd framework7

2. Install Dependencies

npm install

3. Install Framework7 in Your Project

npm install framework7

Configuration

Environment Variables

Framework7 doesn't require specific environment variables for basic usage. However, if you're using Framework7 with a backend service, you may need to configure API endpoints.

Basic Setup

Include Framework7 CSS and JS in your HTML:

<!DOCTYPE html>
<html>
<head>
  <!-- Framework7 CSS -->
  <link rel="stylesheet" href="path/to/framework7/css/framework7.bundle.min.css">
</head>
<body>
  <!-- Framework7 App -->
  <div id="app">
    <!-- Your Framework7 App HTML here -->
  </div>

  <!-- Framework7 JS -->
  <script type="text/javascript" src="path/to/framework7/js/framework7.bundle.min.js"></script>
  <script>
    // Initialize app
    var app = new Framework7({
      root: '#app',
      name: 'My App',
      id: 'com.myapp.test',
      // Add other parameters here
    });
  </script>
</body>
</html>

Build & Run

Development

For local development, you can use the Framework7 CLI to create a new project:

npx framework7 create

Follow the prompts to set up your project structure.

Production

To build your Framework7 app for production:

npm run build

This will create optimized assets in the dist folder.

Deployment

Framework7 apps can be deployed to various platforms:

Static Hosting (Recommended for Framework7)

Since Framework7 is a frontend framework, it works well with static hosting services:

Vercel: vercel
Netlify: netlify deploy
GitHub Pages: npm run deploy

Mobile App Deployment

For iOS and Android apps, you can use:

Capacitor: npx cap add ios and npx cap add android
Cordova: cordova platform add ios and cordova platform add android

Progressive Web App (PWA)

Framework7 supports PWA out of the box. To make your app installable:

var app = new Framework7({
  // ... other parameters
  pwa: {
    // PWA parameters
  }
});

Troubleshooting

Common Issues

CSS/JS Not Loading
- Ensure the paths to Framework7 CSS and JS files are correct
- Check that the files exist in your project structure
App Not Initializing
- Verify that the root parameter matches your HTML element ID
- Check for JavaScript errors in the browser console
Components Not Working
- Make sure you're using the correct component syntax
- Check if you need to import specific components
Routing Issues
- Ensure you have configured routes correctly
- Check that your router parameters are properly set

Getting Help

Documentation: Framework7 Documentation
GitHub Issues: Report issues on GitHub
Community: Framework7 Forum

Performance Tips

Use Framework7's built-in optimization features
Minimize the use of heavy components
Implement lazy loading for large datasets
Use the production build for deployment

How to Deploy & Use nolimits4web/Framework7