So, I just started with adminjs and have been trying to override the default dashboard with my own custom component. I read the documentation and I don't think I am doing anything wrong? yet it still wont load the component. I started with a basic component to see whether it works or not.
It's being initialized but its not overriding the default dashboard.
AdminJS initialized with dashboard: { component: 'Dashboard' }
Code is provided below
Dashboard.jsx:
import React from 'react';
import { Box } from '@adminjs/design-system';
import { useTranslation } from 'adminjs';
const Dashboard = () => {
const { translateMessage } = useTranslation();
console.log('dashboard component loading...')
return (
{translateMessage('helloMessage', 'Hello')}
);
};
export default Dashboard;
admin.js:
import AdminJS from 'adminjs';
import { Database, Resource } from '@adminjs/sequelize';
import Customers from './src/models/Customers.js';
import Product from './src/models/Product.js';
import People from './src/models/People.js';
import Companies from './src/models/Companies.js';
import Leads from './src/models/Leads.js';
import Offers from './src/models/Offers.js';
import { ComponentLoader } from 'adminjs';
const componentLoader = new ComponentLoader();
const Components = {
Dashboard: componentLoader.add('Dashboard', './src/components/Dashboard.jsx')
};
AdminJS.registerAdapter({ Database, Resource });
const adminOptions = {
dashboard: {
component: Components.Dashboard
},
componentLoader,
resources: [{
resource: Customers,
options: {
parent: null,
properties: {
id: {
isVisible: { list: false, edit: false, show: false },
},
type: {
position: 1,
availableValues: [
{ value: 'company', label: 'Company' },
{ value: 'person', label: 'Person' },
],
},
name: {
position: 2,
},
email: {
position: 3,
},
phone: {
position: 4,
},
country: {
position: 5,
},
},
},
},
{
resource: People,
options: {
parent: null,
},
},
{
resource: Companies,
options: {
parent: null,
},
},
{
resource: Leads,
options: {
parent: null,
properties: {
type: {
availableValues: [
{ value: 'company', label: 'Company' },
{ value: 'person', label: 'Person' },
],
},
},
},
},
{
resource: Offers,
options: {
parent: null,
},
},
{
resource: Product,
options: {
parent: null,
},
},
],
rootPath: '/admin',
};
export default adminOptions;
server.js:
import AdminJS from 'adminjs'
import AdminJSExpress from '@adminjs/express'
import express from 'express'
import dotenv from 'dotenv'
import sequelize from './src/config/db.js';
import { Database, Resource } from '@adminjs/sequelize';
import adminOptions from './admin.js';
dotenv.config();
const PORT = 3000;
const start = async () => {
const app = express()
AdminJS.registerAdapter({ Database, Resource });
const admin = new AdminJS(adminOptions);
console.log('AdminJS initialized with dashboard:', admin.options.dashboard);
const adminRouter = AdminJSExpress.buildRouter(admin)
app.use(admin.options.rootPath, adminRouter)
app.listen(PORT, async () => {
console.log(`AdminJS started on
http://localhost:${PORT}${admin.options.rootPath}`)
/>
try {
await sequelize.authenticate();
console.log("database connected successfully")
await sequelize.sync();
console.log("database models synchronized")
}
catch (err) {
console.log("error connecting to database", err)
}
})
}
start()
I tried logging any information regarding it but it seems like it's not loading the component at all?
Any help or suggestions would be appreciated. Thanks!
AdminJS not overriding default dashboard with custom React component
Programing Coderfunda
September 19, 2024
No comments
Related Posts:
Released New Features Sublime Text 3.0 Released New Features Sublime Text 3.0 Sublime Text 3.0 Released New Features. Sublime text is the one of the most popular Web Development ID… Read More
Storing Session Data in Database By Codeigniter Storing Session Data in Database By Codeigniter Codeigniter storing session data in database. In Codeigniter by default session store in the f… Read More
Program of Check Prime Number in Php How to Check Prime Number in Php How to Check Prime Number in Php. Prime Number is the natural number which is divided by 1 and… Read More
Correctly Show Detect Credit Card Type In Php Correctly Detect Credit Card Type Php.In this article I will show you how you correctly detect credit card type in you php function. Almos… Read More
How to Show Register and Sidebar in WordPress How to Show Register and Sidebar in WordPress Register Sidebar WordPress. wordpress sidebar feature was introduced in wordpress ver… Read More
0 comments:
Post a Comment
Thanks