Customize the dashboard / welcome page

Questions and Answers
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
2 Likes
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?

34

I can’t get this to work. I run the patch-package and run npm build and then npm run dev (strapi develop) but no luck on seeing any of the patch changes…

35

A solution that works for me:

  1. yarn add patch-packagenpm --save
  2. modified files in node_modules
  3. yarn patch-package @strapi/admin (A patches folder will appear in the root directory of your project)
  4. yarn patch-package
  5. yarn build
  6. yarn develop

is done.

I modified these files:

  1. node_modules/@strapi/admin/admin/src/pages/HomePage/HomeHeader.js
  2. node_modules/@strapi/admin/admin/src/pages/HomePage/index.js
  3. node_modules/@strapi/admin/admin/src/translations/zh-Hans.json

Reference links:
https://github.com/strapi/strapi/issues/13523

2 Likes
36

I found another way that should be better.

  1. Create a new plugin using npx strapi generate, name it: dashboard
  2. modify file node_modules/@strapi/admin/admin/src/pages/HomePage/index.js
import { Redirect } from 'react-router-dom';

export const HomePageCE = () => {
  // add this line
  return <Redirect to={'/plugins/dashboard'} />;
}
  1. use patch-package to patch that file
    then you your admin page should redirect to your plugin :smiley:
1 Like
38

Now that the admin panel is largely obfuscated and unpatchable, this can be achieved with a combination of @huylv177’s fantastic suggestion, along with custom middleware:

  1. Create a plugin as @huylv177 covered above
  2. Set up custom middleware:
File: src/middlewares/redirect.js
01: "use strict";
02: 
03: module.exports = (_config, { strapi }) => {
04:   const redirects = ["/", "/index.html", "/admin/"].map((path) => ({
05:     method: "GET",
06:     path,
07:     handler: (ctx) => ctx.redirect("/admin/plugins/[YOUR-PLUGIN-NAME]"),
08:     config: { auth: false },
09:   }));
10: 
11:   strapi.server.routes(redirects);
12: };
13:

*Note: “redirects” can be any name you want for the file and middleware itself.

  1. Use custom middleware:
File: config/middlewares.js
...
35:   "strapi::session",
36:   "strapi::favicon",
37:   "strapi::public",
38:   { resolve: "./src/middlewares/redirect" },
39: ];
40:

I found that while in develop mode, or clicking the “my-logo” link in the top left of admin panel, a refresh is needed for the route to kick in.

If anyone knows how to get around that last part, I would love an @!

4 Likes
39

I wrote a long-form post covering this approach. Hope it helps someone!

2 Likes
40

Why isn’t there yet a very simple solution to solve this?

Moreover, by default, the admin page should not contain that info. It should be blank. That would be more satisfactory in most cases than having links to GitHub, etc., which for technical people are not useful at all. Users should not need to know we’re using strapi or anything.

So, can you at least change the default admin welcome page to just be a blank page (maybe with some modifiable text, which by default is something like “Welcome to the Strapi admin UI”)?

2 Likes
41

yes you can! In admin/app.ts at the bootstrap function, you can add some javascript to add css to the page and override te content. But I prefer @dgrebb solution.
here is a sample

bootstrap(app: any) {
      const styleTag = document.createElement("style");
      styleTag.innerText = `
      a[href*="/dashboard/plugins/cloud"], a[href*="/strapi/strapi/releases/tag/v"], a[href*="strapi.io/"], a[href*="cloud.strapi.io"] {
        display: none;
      }
      nav[aria-label="Settings"] ol li:nth-child(2), nav[aria-label="Settings"] ol ol li:nth-child(3) {
        display: none;
      }
      aside[aria-labelledby="join-the-community"], .home-page #main-content>div:first-child>img {
        display: none;
      }
    `;
      document.head.appendChild(styleTag);
      const isHomePage =
        window.location.pathname === "/dashboard" ||
        window.location.pathname === "/dashboard/";
      document.documentElement.classList.add(
        isHomePage ? "home-page" : "not-home-page"
    //   );
  },

This will hide everything in the content of dashboard/ page an somethings at settings
Then now simple add some tags via javascript