In Strapi v4, the Admin Welcome page UI can be overridden by creating a custom plugin. Here are the steps to do so:
strapi generate:plugin my-custom-welcome-page
Create a new file called index.js
inside the ./admin/src/containers/Main/Main.js
directory of your plugin.
Add the following code to your index.js
file to import and extend the default welcome page component:
import React from 'react';
import { Main as StrapiMain } from '@strapi/strapi-plugin-content-manager/admin/src/containers/Main';
import CustomWelcome from '../components/CustomWelcome';
const Main = () => {
return (
<StrapiMain>
<CustomWelcome />
</StrapiMain>
);
};
export default Main;
Create a new file called CustomWelcome.js
inside the ./admin/src/components/
directory of your plugin.
Add your custom UI to the CustomWelcome.js
file:
import React from 'react';
const CustomWelcome = () => {
return (
<div>
<h1>Welcome to my custom Strapi Admin panel!</h1>
<p>This is my custom welcome message.</p>
</div>
);
};
export default CustomWelcome;
./admin/src/index.js
file of your Strapi application:import pluginPkg from '../../package.json';
import pluginId from './pluginId';
import MyCustomWelcomePage from './containers/Main';
const strapi = window.strapi;
strapi.registerPlugin({
id: pluginId,
name: pluginPkg.strapi.name,
description: pluginPkg.strapi.description,
icon: pluginPkg.strapi.icon,
pluginRequirements: pluginPkg.strapi.pluginRequirements,
isReady: true,
contentTypes: [],
injectables: [],
mainComponent: MyCustomWelcomePage,
});
That's it! Your custom welcome page will now be displayed when you login to your Strapi Admin panel.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2021-10-04 11:00:00 +0000
Seen: 9 times
Last updated: Apr 23 '22
How to ensure a page break when creating Velocity HTML resumes?
How can I prevent the LeafletJS page from jumping when a layer is clicked?
What is the method to remove a particular page from the directory layout of a NextJS 13 application?
What is the reason that my controller is providing an HTML page instead of JSON?
What causes elements to move on the page during page loading through transitions?
What does the HTTP 404 error message mean?
Is it impossible to navigate to a specific page in AppSync List Query Pagination?
How can I create a page that includes all the required details using React JS?