
Headless CMS scales and improves WPWhiteBoard’s content distribution, flexibility, and personalization
Ankita Deb
The Strapi admin panel is a powerful React-based interface that serves as the control center for your content management system.
Learning how to customize the Strapi admin panel effectively can transform your development experience and create a more tailored solution for your needs.
The admin panel is Strapi's front-end interface. It provides a user-friendly environment for managing content, user permissions, and various system settings.
It's a single-page application that integrates all your installed plugins and core functionalities.
When you customize the Strapi admin panel, you can:
Before starting your customization journey, ensure you have:
To begin customizing your Strapi admin panel, you'll need to set up the following files:
bash
Initialize your Strapi project
npx create-strapi-app@latest my-project
Navigate to your project directory
cd my-project
Install necessary dependencies
npm install
Enable real-time development updates with:
bash
strapi develop --watch-admin
The default admin panel URL (http://localhost:1337/admin) can be customized for security and branding purposes:
// config/admin.js
module.exports = ({ env }) => ({
url: '/dashboard', // Changes admin panel URL to /dashboard
});
// config/server.js
module.exports = ({ env }) => ({
host: env('HOST', '0.0.0.0'),
port: env.int('PORT', 1337),
});
Logos are often the first consideration when you customize the Strapi admin panel's visual elements.
Here's how to modify them:
// src/admin/app.js
import customLogo from './extensions/my-logo.png';
export default {
config: {
auth: {
logo: customLogo,
},
},
};
export default {
config: {
menu: {
logo: customLogo,
},
},
};
To replace the default favicon:
import customFavicon from './extensions/favicon.png';
export default {
config: {
head: {
favicon: customFavicon,
},
},
};
Strapi supports both light and dark modes with customizable properties:
export default {
config: {
theme: {
light: {
colors: {
primary100: 'f6ecfc',
primary200: 'e0c1f4',
primary500: '7b79ff',
},
},
dark: {
colors: {
primary100: '212134',
primary200: '4a4a6a',
primary500: '7b79ff',
},
},
},
},
};
To customize the Strapi admin panel's language options:
export default {
config: {
locales: ['en', 'fr', 'de', 'es'],
},
};
Create custom translations:
export default {
config: {
translations: {
en: {
'app.components.LeftMenu.navbrand.title': 'Custom Dashboard',
'app.components.HomePage.welcome': 'Welcome to your custom panel',
},
},
},
};
export default {
config: {
translations: {
en: {
'content-type-builder.plugin.name': 'Custom Content Types',
},
},
},
};
Customize notification behavior:
export default {
config: {
notifications: {
releases: false, // Disable release notifications
},
tutorials: false, // Disable tutorial videos
},
};
Replace the default editor:
import CustomEditor from './extensions/CustomEditor';
export default {
bootstrap(app) {
app.addFields({ type: 'wysiwyg', Component: CustomEditor });
},
};
// src/admin/webpack.config.js
module.exports = (config, webpack) => {
config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//));
return config;
};
// src/admin/vite.config.js
const { mergeConfig } = require('vite');
module.exports = (config) => {
return mergeConfig(config, {
resolve: {
alias: {
'@': '/src',
},
},
});
};
When you customize the Strapi admin panel for single-server deployment, follow these steps:
bash
Build the admin panel
npm run build
Start the production server
npm run start
// config/server.js
module.exports = ({ env }) => ({
host: env('HOST', '0.0.0.0'),
port: env.int('PORT', 1337),
app: {
keys: env.array('APP_KEYS'),
},
});
For separate frontend and backend setups:
// config/admin.js
module.exports = ({ env }) => ({
url: '/', // Frontend URL
serveAdminPanel: false,
auth: {
secret: env('ADMIN_JWT_SECRET'),
},
});
bash
rm -rf build
npm run build
const MyCustomComponent = React.lazy(() => import('./MyCustomComponent'));
When you customize the Strapi admin panel, always:
// config/admin.js
module.exports = ({ env }) => ({
auth: {
secret: env('ADMIN_JWT_SECRET'),
options: {
expiresIn: '30d',
},
},
});
// config/middleware.js
module.exports = {
settings: {
cors: {
enabled: true,
origin: ['http://localhost:1337', 'https://yourdomain.com'],
},
},
};
// src/admin/extensions/components/CustomDashboard.js
import React from 'react';
const CustomDashboard = () => {
return (
<div>
<h1>Custom Analytics Dashboard</h1>
{/* Add your custom dashboard components */}
</div>
);
};
export default CustomDashboard;
// src/admin/app.js
export default {
bootstrap(app) {
// Initialize external service
app.injectContentManagerComponent('editView', 'right-links', {
name: 'ExternalServiceWidget',
Component: ExternalServiceComponent,
});
},
};
// src/admin/tests/CustomComponent.test.js
import { render, screen } from '@testing-library/react';
import CustomComponent from '../components/CustomComponent';
describe('CustomComponent', () => {
it('renders correctly', () => {
render(<CustomComponent />);
expect(screen.getByRole('main')).toBeInTheDocument();
});
});
// cypress/integration/admin/customization.spec.js
describe('Admin Panel Customization', () => {
it('should display custom branding', () => {
cy.visit('/admin');
cy.get('.custom-logo').should('be.visible');
});
});
Successfully customizing your Strapi admin panel requires careful planning and attention to detail.
Remember to:
By following this comprehensive guide, you can create a highly customized and efficient admin panel in Strapi CMS that perfectly suits your project's needs.
Remember to check Strapi's official documentation for updates and new customization options as the platform evolves.