5

I have tried to change the HomeHeader of the Admin page, but it has no changes.

I copy admin folder in node_modules/@strapi/admin/admin to my-project/admin and then I modified HomeHeader.js file as the image below:

enter image description here

I started strapi with the command yarn strapi develop --watch-admin, and nothing happened

Please help me to custom this! Thanks

  • Strapi Version: 4.0.4
  • Operating System: MacOs
  • Database: postgres Node
  • Version: v14.18.1
  • NPM Version: 6.14.15
  • Yarn Version: 1.22.10
sanglt
  • 179
  • 2
  • 4

3 Answers3

3

In Strapi-v3 you can customize the admin panel UI, but in v4 you can't. there is an opened issue in GitHub about this problem.

abdlalisalmi
  • 31
  • 5
1

I also encountered this requirement of a client.

To replace or customize Strapi admin dashboard home, you can overwrite the file using webpack.

First make sure to install webpack-dev-server in devDependencies.

Create a component file in src/admin/components/Home.tsx with basic React component code.

on the file src/admin/webpack.config.js write this code to replace the original Home page.


module.exports = (config, webpack) => {
...
  /**
   * Overwrite the dashboard home Component
   */
  config.plugins.push(
    new webpack.NormalModuleReplacementPlugin(
      /.cache\/admin\/src\/pages\/HomePage\/index\.js/,
      path.resolve(__dirname, "components/Home.tsx")
    )
  );
....

  // Important: return the modified config
  return config;
};

then re-build you app.

Alvin Gerona
  • 71
  • 1
  • 3
0

Op1: Edit in node_modules and use patch-package to save it (For small change)

Op2: Fork Strapi, edit and commmit. After that use new version strapi instead of default versions

Man
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 12 '23 at 15:12