Custom Welcome Page

For various reasons (e.g. providing the Run planning information for the Trail Mistress) there was a need to display some data in the Admin Panel itself, although the Metabase Reporting is separately accessible through a distinct link.

Hence, the standard Strapi Welcome page was customized (replaced) by integrating a Metabase Reporting Dashboard as an iFrame. Metabase offers a number of ways to integrate its graphs and dashboards into other websites. We have - for ease of use and limited by the Metabase plan we use - decided to use static embedding.

For this a custom Welcome page was created in src/admin/pagescustom-welcome/Homepage.tsx which loads a React component MetabaseDashboard.jsx. The React component fetches the iFrame URL from the /metabase-token service outlined here.

INFO

Strapi's Admin Panel is written in React and custom pages must be provided in React as well

The custom homepage needs to be registered in app.js like this:

register(app) {
   const indexRoute = app.router.routes.find(({ index }) => index);
   if (!indexRoute) throw new Error("unable to find index page");
   indexRoute.lazy = async () => {
     const { Homepage } = await import("./pages/custom-welcome/Homepage");
     return { Component: Homepage };
   };
 },