How can I prevent accidental public exposure of Framework7's built-in admin panel when deploying to production?

Understanding Framework7 Route Guard Behavior

Framework7’s navigation guards run inside the browser. When you build the app, the router configuration—including any beforeEnter hooks—is bundled into a static JavaScript file. The guard can prevent a transition, but it does not remove the code for the protected page from the bundle. A user who knows the route can still request the chunk, so client‑side guards alone are insufficient for production security.

Steps to Keep the Admin Section Private

• Exclude the route at build time
  Use an environment variable to conditionally add the admin route only in development. In Vue + Vite or Webpack you can write:

  const routes = [
    { path: '/', component: Home },
    ...(process.env.NODE_ENV === 'development' ? [
      { path: '/admin', component: Admin, beforeEnter: authGuard }
    ] : [])
  ];
  

  During a production build process.env.NODE_ENV is production, so the array is empty and the Admin component is never bundled.
• Server‑side access control
  Configure your web server to block the /admin path. For Nginx:

  location /admin {
    deny all;
    # or use basic auth
    auth_basic "Restricted";
    auth_basic_user_file /etc/nginx/.htpasswd;
  }
  

  This stops the request before the JavaScript bundle is served.
• Protect the API
  If the admin UI talks to a backend, enforce authentication on those endpoints (JWT, session cookie, etc.). Even if the UI is reachable, the data remains protected.

Verifying the Protection After Deployment

1. Inspect the production bundle
   Open the generated index.html and the main JS chunk. Search for a unique string from the Admin component (e.g., a component name or template text). If it is absent, the exclusion worked.
2. Test from an unauthenticated context
   Open the site in a private/incognito window and navigate directly to /admin. You should receive a 404 Not Found (route excluded) or a 403 Forbidden (server block). If you see the page, the guard or exclusion failed.
3. Check network requests
   In the browser’s Network tab, confirm that no JS chunk containing the admin component is requested when you visit the home page. If a chunk is loaded, the component is still bundled and exposed.

Framework7 does not ship a built‑in test mode for unauthenticated requests, so manual verification or a simple CI script that fetches /admin and asserts a non‑200 status is the most reliable approach.