Customize the dashboard / welcome page

Questions and Answers
52

I found one solution that work without redirects for strapi 4.25.1. It also base on swapping files. Code that renders HomePage is located in node_modules/@strapi/admin/dist/_chunks. This directory contains few files named in convention: HomePage-SPECYFIC_HASH. One that is used to render HomePage has mjs extension and contains the below code at the beginning:

import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";

HomePage content is located around below block of code:

/* @__PURE__ */ jsx(Typography, { as: "h1", variant: "alpha", children: hasAlreadyCreatedContentTypes ? formatMessage({
            id: "app.components.HomePage.welcome.again",
            defaultMessage: "Welcome 👋"
          }) : formatMessage({
            id: "app.components.HomePage.welcome",
            defaultMessage: "Welcome on board!"
          }) }),

Until components are placed inside jsx function everything seems to work well. I created code that finds proper file and then swaps with one that I modified. You can just paste below code to src/extensions/patch-admin.js. Prepared file should be placed in location: src/extensions/admin/HomePage.mjs

const fs = require("fs");
const path = require("path");

const home_page_dir = "./node_modules/@strapi/admin/dist/_chunks";

const requiredLines = [
  'import { jsx, jsxs } from "react/jsx-runtime";',
  'import * as React from "react";',
];

function checkFileContentSync(filePath) {
  const content = fs.readFileSync(filePath, "utf8");
  const lines = content.split("\n").slice(0, 2);
  return lines[0] === requiredLines[0] && lines[1] === requiredLines[1];
}

function findHomePageFilesSync(dir) {
  try {
    const files = fs.readdirSync(dir);

    const matchedFiles = files.filter((file) => {
      if (file.includes("HomePage") && file.endsWith(".mjs")) {
        const filePath = path.join(dir, file);
        return checkFileContentSync(filePath);
      }
      return false;
    });

    return matchedFiles;
  } catch (err) {
    console.log("Unable to scan directory: " + err);
  }
}

const filtered_files = findHomePageFilesSync(home_page_dir);

if (filtered_files == null || filtered_files.length != 1) {
  return console.log(
    `Unable to swap admin pages. Found ${filtered_files} filtes matching rules NOT 1!`
  );
}

// ---------------------------------------------

fs.cp(
  `src/extensions/admin/HomePage.mjs`,
  `${home_page_dir}/${filtered_files[0]}`,
  (err) => {
    if (err) {
      console.error(err);
    }
  }
);

To run it, I just use node src/extensions/patch-admin.js that I execute as package.json script.

Hope that It helps someone

1 Like