Customize the dashboard / welcome page

Questions and Answers
14

I managed to change it by editing it in node_moduls/@strapi/admin/admin/src/pages/HomePage.
Then using patch-package I patched those changes.
This obviously isn’t ideal because it could mess things up for me if I update strapi to a newer version further down the line. I needed to change it though so it’s worth the risk :woman_shrugging:

4 Likes
15

Any update regarding this??

2 Likes
16

I didnt find some way in V4 ;’(

1 Like
17

Still not possible ine v4?

1 Like
18

@Charlotte_Hughes I try to use patch-package I did some change @starpi/admin/admin/src/content-manager/pages/EditView but patch package is not able to find it. How you have done that?

19

I had same issue with patch-package trick is to use:

yarn patch-package @strapi/@admin

rather than

yarn patch-package @strapi/@strapi
20

I have created a feature request for v4, which you can vote up.

https://feedback.strapi.io/feature-requests/p/customize-the-admin-dashboard-welcome-page-v4

1 Like
21

can any one help on creating a plugin to do this… am new to strapi so just trying to learn about the plugins structures and logic

22

How does one accomplish this in v4?

23

patch-package would be the only way to do this in v4

24

With v4 for my use case I did the following dev process:

  1. I placed home page folder under extensions:
    src/extensions/admin/pages/homepage/index.js
  2. created patch-admin.js under extensions folder with:
    the following logic >
    const fs = require(‘fs’);
    fs.cp(‘src/extensions/admin’, ‘node_modules/@strapi/admin/admin/src’, { recursive: true }, (err) => {
    if (err) {
    console.error(err);
    }
    });
  3. Add the following to package.json under scripts:
    “patch-admin” : “node src/extensions/patch-admin.js && patch-package @strapi/admin”
  4. Make mods and run patch-admin, then develop-watch(strapi develop --watch-admin) to confirm and test changes.

Not ideal but still manageable. We are using dev containers, so I will add some automation within that so rest of team is in synch as well. Free time I am playing with the admin injection and blocks to see if I can share a proposal with working POC.

1 Like
25

Could you provide an example? After following the instructions provided by patch-package, whenever I’ve tried to do it, I keep getting this message. The specific part of the admin panel I am trying to edit is the LeftMenu component:

$ npx patch-package @strapi/strapi
patch-package 6.4.7
• Creating temporary folder
• Installing @strapi/strapi@4.3.2 with yarn
• Diffing your files with clean files
⁉️  Not creating patch file for package '@strapi/strapi'
⁉️  There don't appear to be any changes.
26

shoud we customize in typescript?not in javascript

27

See Customize the dashboard / welcome page - #19 by ptimson

yarn patch-package @strapi/@admin

28

Yeah thanks, it was yarn patch-package @strapi/admin that actually worked fro me.

29

bro you find any ans??? how to customize in typescript

30

Still no way to perform a welcome page customization in V4 ?

31

Here is my current setup using patch-package, not ideal but its the only way I can find to currently do it.

Setup

  1. install patch-package via npm i patch-package
  2. install @strapi/admin if not already included in your package.json via npm i @strapi/admin
  3. add the following scripts to package.json:
    • "generate-admin-patches": "npx patch-package@strapi/admin"
    • "apply-admin-patches": "npx patch-package"

Usage

  1. Make changes to relevant files, likely found in /node_modules/@strapi/admin/admin/src/pages
  2. Save changes via npm run generate-admin-patches
  3. We can then apply these patches, for example if we update strapi or when packages are initially installed packages, by running npm run apply-admin-patches
1 Like
32

According to the Strapi team, there used to be an extensions feature but they got rid of it cause it kept causing a lot of bugs and they advice using patch-package.

Here’s a simple example of how to achieve this.

First install patch-package and postinstall using one of the following commands

yarn add patch-package postinstall-postinstall
or 
npm i patch-package postinstall-postinstall

you can add a ‘–dev’ flag if you don’t wanna use it in production

add the following command to your scripts in your ‘package.json’ file

"scripts":{
 //..
+ "postinstall": "patch-package"
 //..
}

next go into the node_modules folder and find the @strapi directory in which you’ll find the different components available by default.
A sample change like in my case was changing the content in the Homepage which I was able to find in the @strapi/admin/admin/src/pages/HomePage directory.

After making changes to the index.js file for example, head to your terminal and run yarn patch-package @strapi/admin.
This will create a patch folder in the root directory of your project with the changes made. Once the operation is done running, run yarn build and then yarn develop and your changes should be properly reflected. Not the most convenient of methods and that’s understandable but it’s the most effective method i could find online right now. I encourage you to read the patch-package docs for more info on how to use it. Good luck

3 Likes
33

Any update regarding this?