[v6] Modify the sample app to accept the links

Questions
1

I’ve just grabbed FW7 v.6 from npm and trying to configure the sample app (the one which is created using the CLI: simple web app + PWA, Framework7 Core, single view, webpack, less).

The ultimate goal is to get Sign-In with Apple configured for the app later, so I’m trying to learn how to deal with the direct links in the app.

To deal with the redirect, I’ve created the following entry in the routes array:

{ path: '/apple/callback',
  async: function ({ router, to, resolve }) {
    console.log("/apple/callback hit");
    // App instance
    var app = router.app;
        
    // User ID from request
    var userId = to.params.userId;

    app.dialog.alert(
      `User: ${userId}`,
      "Info",
      function () {
        // Resolve route to home page
        resolve(
          {
            component: HomePage,
          }
        );
      }
    );
  },
},

I’ve added to the bottom of the src/js/app.js the creation of the view (immediately after creating the Framework7 app:

var mainView = app.views.create('.view-main', {
  url: '/',
  browserHistory: true,
  browserHistoryRoot: 'https://domain.tld/',
  browserHistorySeparator: '',
});

I also configured the web server (nginx) to serve /index.html for all unknown URLs (i.e., when a file isn’t found).

When I load the app, it complains in the Developer’s console: Error: Framework7: can’t create a View instance because the selector “.view-main” didn’t match any element

However, there’s certainly the standard div with the class=“view-main” in the src/app.f7.html file.

Another issue is with the caching - when I redeploy the app, I always forced to reset the client’s cache in the browser, otherwise it can’t see the updated code.

2

Route .params is for handling routes like so /blog/users/:userId/posts/:postId/ (https://framework7.io/docs/routes.html#route-path) Maybe you need to use route.query instead. Better if you show the full URL where you are redirected after sign in with Apple

3

If you use Webpack built then View must be initialized in app component (app.f7.html), something like:

<template>
  <div id="app">
    <!-- no "view-init" class here -->
    <div class="view view-main"></div>
  </div>
</template>
<script>
  export default (props, { $onMounted, $f7 }) => {
    $onMounted(() => {
      $f7.views.create('.view-main', {
        // view params
      })
    })
    return $render;
  }
</script>