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 };

};

},

};

Would love an update on this

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?

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!

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:

--

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;

}

//

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();

}

});

--

---

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();

},

Why not conditional fields? it have more votes....

That's great.

👏🏻👏🏻👏🏻👏🏻👏🏻

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 of the application: https://github.com/strapi/strapi/pull/20494 any feedback welcome.