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.
shoud we customize in typescript?not in javascript
Yeah thanks, it was yarn patch-package @strapi/admin that actually worked fro me.
bro you find any ans??? how to customize in typescript
Still no way to perform a welcome page customization in V4 ?
Here is my current setup using patch-package, not ideal but its the only way I can find to currently do it.
Setup
npm i patch-package
npm i @strapi/admin
"generate-admin-patches": "npx patch-package@strapi/admin""apply-admin-patches": "npx patch-package"Usage
/node_modules/@strapi/admin/admin/src/pages
npm run generate-admin-patches
npm run apply-admin-patches
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
Any update regarding this?
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…
A solution that works for me:
yarn add patch-packagenpm --saveyarn patch-package @strapi/admin (A patches folder will appear in the root directory of your project)yarn patch-packageyarn buildyarn developis done.
I modified these files:
node_modules/@strapi/admin/admin/src/pages/HomePage/HomeHeader.jsnode_modules/@strapi/admin/admin/src/pages/HomePage/index.js node_modules/@strapi/admin/admin/src/translations/zh-Hans.jsonReference links:
https://github.com/strapi/strapi/issues/13523
I found another way that should be better.
npx strapi generate, name it: dashboardnode_modules/@strapi/admin/admin/src/pages/HomePage/index.jsimport { Redirect } from 'react-router-dom';
export const HomePageCE = () => {
// add this line
return <Redirect to={'/plugins/dashboard'} />;
}
patch-package to patch that file
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:
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.
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 @!
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”)?
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
On v4.21.0 the redirect seems to be working for /admin but not /admin/.
There’s an (at the moment Chrome-only) API that can be used for redirecting from /admin:
bootstrap(app: any) {
const url = "/admin/content-manager";
if ("navigation" in window) {
// Redirect soft /admin navigations to `url`
// Chrome-only
window.navigation.addEventListener("navigate", (e) => {
const { pathname } = new URL(e.destination.url);
if (new RegExp("^/admin/?$").test(pathname)) {
window.navigation.navigate(url);
}
});
}
// Redirect hard /admin navigations to `url`
if (new RegExp("^/admin/?$").test(location.pathname)) {
location.href = url;
}
},
Also, in case you’re using TypeScript:
npm install -D @types/dom-navigation
Thanks for the idea of using bootstrap @Apostata.
Thanks for pointing this out @theSdev! I updated the repo, Gist, and post on my site.
If I could figure out how to edit previous posts in this forum, I’d do the same there, but:
module.exports = (config, { strapi }) => {
const redirects = ["/", "/index.html", "/admin", "/admin/"].map((path) => ({
method: "GET",
path,
handler: (ctx) => ctx.redirect("/admin/plugins/[YOUR-PLUGIN-NAME]"),
config: { auth: false },
}));
strapi.server.routes(redirects);
};
Not sure about 4.20.0 but I’m using 4.21.1 and even /admin/ is not redirecting unless I perform a hard refresh after login.