Customize the Admin panel welcome page (Strapi 5)
in progress
M
Marco Wuethrich Pr
In v3 you could override the admin dashboard as follows: https://forum.strapi.io/t/customize-the-dashboard-welcome-page/939/2
This no longer works in v4, or in other words no one in the community knows how to do this.
The patch-package method is not a sustainable solution and not clean, I see that some people in the community would also like to know how to solve this in v4.
Andrew Bone
In strapi v5 you can use a plugin to modify the index page in the router something like this
import type { StrapiApp } from '@strapi/strapi/admin';
export default {
register(app: StrapiApp) {
const indexRoute = app.router.routes.find(({ index }) => index);
if (!indexRoute) throw new Error('unable to find index page');
indexRoute.lazy = async () => {
const { App } = await import('./pages/App');
return { Component: App };
};
},
};
h
honorsuper
Andrew BoneCould you provide more details? Have you tried it on your side? Did it work?
Andrew Bone
honorsuper
I've only tried it in my dev environment but it seems fine.
Rickardo Hyde
Andrew Bone I can't thank you enough. THANK YOU T_T T_T
h
honorsuper
Andrew Bone
Are these codes located under the /src/index.ts ?
h
honorsuper
Rickardo Hyde
I have already resolved it, this way is wonderful
h
honorsuper
Andrew Bone
I have already resolved it, thank you so much!
h
honorsuper
Andrew Bone
I have already resolved it, thank you so much!
S MV
honorsuper Where did you fix it? Can you let me know?
h
honorsuper
S MV
just put those codes under the /src/index.ts
Kevin Moralez
Would love an update on this
Rowan-Paul
Any update on this? It's marked as V5 but I haven't seen anything about it during launch week so I'm assuming it'll be in a 5.x release?
L
Lucas Boilly
Hello everyone 👋
We’re currently working on a new version of the admin's homepage! As usual, we would like to know what you’re expecting from it, that’s why we prepared a very short survey for you:
Thanks and have a great week!
Carey
After much trial and error, I've been able to replace the default dashboard. My solution does have the limitation of not being able to directly access the Strapi environment, but that wasn't a requirement for me. Basically, what I did was inject custom JS to replace the existing/default content. Here's the breakdown:
- Add custom javascript file to the 'public' folder. In my case, I created 'custom-homepage.js'
- Add code to the custom JS file to use a MutationObserver to listen for when the DOM is loaded and the main 'div' element with the default dashboard content is loaded, and then replace it with your own. (Below is a condensed version of my own code).
--
const targetNode = document.getElementById('strapi');
const config = { childList: true, subtree: true };
const callback = function (mutationsList, observer) {
const currentPath = window.location.pathname;
if (currentPath === '/admin' || currentPath === '/admin/') {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
const customContentExists = document.querySelector('#lean-dashboard');
const mainContainer = document.querySelector('main');
if (mainContainer && !customContentExists) {
mainContainer.innerHTML = `
<div id="lean-dashboard">
<h2>Welcome 👋</h2>
<p>Select an option from the left to get started, or choose from one of the shortcuts provided below.</p>
<div class="shortcut-cards">
<a class="card" href="/admin/content-manager/collectionType/api::feed-content.feed-content">
Manage Feed
</a>
<a class="card" href="/admin/content-manager/collectionType/api::early-childhood-institution.early-childhood-institution">
Manage ECIs
</a>
<a class="card" href="/admin/content-manager/collectionType/api::facility.facility">
Manage Facilities
</a>
<a class="card" href="/admin/content-manager/collectionType/api::project.project">
Manage Projects
</a>
<a class="card" href="/admin/content-manager/single-types/api::app-setting.app-setting">
Manage App Settings
</a>
<a class="card" href="/admin/content-manager/collectionType/api::donation.donation">
View PayPal Donations
</a>
</div>
</div>
`;
const style = document.createElement('style');
style.textContent = `
#lean-dashboard {
padding: 20px;
}
.shortcut-cards {
display: flex;
flex-direction: column;
gap: 10px;
}
.card {
padding: 10px;
background: #f0f0f0;
border: 1px solid #ccc;
text-decoration: none;
color: #333;
}
.card:hover {
background: #e0e0e0;
}
/
Dark mode styles
/body[data-theme='dark'] #lean-dashboard {
color: #e0e0e0;
background-color: #333;
}
body[data-theme='dark'] .card {
background: #444;
color: #e0e0e0;
}
body[data-theme='dark'] .card:hover {
background: #555;
}
`;
document.head.appendChild(style);
observer.disconnect();
}
}
}
}
};
const observer = new MutationObserver(callback);
const observeAndReplace = () => {
observer.observe(targetNode, config);
};
// Initial call
observeAndReplace();
// Handle logo click and other navigations
document.addEventListener('click', function (event) {
const logoLink = document.querySelector('a[href="/admin/"]');
if (logoLink && event.target.closest('a[href="/admin/"]')) {
event.preventDefault();
const mainContainer = document.querySelector('main');
if (mainContainer) {
mainContainer.innerHTML = '';
}
window.location.reload();
}
});
--
- Update src/admin/app.tsx to inject the custom JS script. I do this by: A] Adding the below method to the file:
---
const injectCustomScript = () => {
const script = document.createElement('script');
script.src = '/custom-homepage.js';
script.async = true;
document.body.appendChild(script);
};
---
And then B] calling that method within bootstrap:
bootstrap(_: any) {
injectCustomScript();
},
skylerzhang
Carey Hello, can I have a look at your code, I also want to change the admin interface in this way.
Igor Zinchenko
Why not conditional fields? it have more votes....
V
Volodymyr Pekh
Igor Zinchenko I agree!
M
Manuel Caicedo
That's great.
Jorge Rivero
👏🏻👏🏻👏🏻👏🏻👏🏻
Niklas Winkels
in progress
Josh
Hey there. arguably this is a very low-level API but you will be able to interact with the client side router for the admin panel in v5. It's an alpha feature, but in short you can replace the entire component thats rendered as the
index
of the application: https://github.com/strapi/strapi/pull/20494 any feedback welcome.h
honorsuper
Josh
Is there a demo available?
Load More
→