Initialize App

Now you can see our HTML layout with linked required CSS and JavaScript files. Now we should initialize our app (for example in my-app.js):

var app = new Framework7();

In the example above we use app variable where we store Framework7 initialized instance for easy access in future. It is not necessary to name it app, it could be any name you like.

It was pretty simple. But Framework7 also provides more customization on initialization by passing object with parameters:

var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: 'left',
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});

For list of all available app parameters check the App / Core section.

Now after we initialized our app, we need to initialize our View (<div class="view view-main"> in app layout). The View is basically the app router which is responsible for navigation:

var mainView = app.views.create('.view-main');

So your final initialization code in my-app.js could look like:

var app = new Framework7({
  // App root element
  root: '#app',
  // App Name
  name: 'My App',
  // App id
  id: 'com.myapp.test',
  // Enable swipe panel
  panel: {
    swipe: 'left',
  },
  // Add default routes
  routes: [
    {
      path: '/about/',
      url: 'about.html',
    },
  ],
  // ... other parameters
});

var mainView = app.views.create('.view-main');

What's next

Ok, now we know how to scaffold and init the app. Now we need to check the App / Core component to learn more about its parameters and methods, how Router works, learn more about Views, Pages and the rest of the components.