nocobase/docs/guide/kernel-principle/client-side-kernel.md

order
2

Client-side Kernel

To allow more non-developers to participate, NocoBase provides a companion client-side plugin -- a visual configuration interface with no code. The core of this part is @nocobase/client, which ideally can be used within any front-end build tool or framework, e.g.

• umijs
• create-react-app
• icejs
• vite
• snowpack
• nextjs
• Other

For the time being only support umijs (packaging compilation is still some problems), the future will gradually support the above-listed frameworks.

The main components of the client include.

Request

• API Client
• Request Hook

const api = new APIClient({
  request,
});

api.auth();
api.get();
api.post();
api.resource('collections').create();
api.resource('collections').findOne({});
api.resource('collections').findMany({});
api.resource('collections').relationship('fields').of(1).create();

The following details are TBD, special resources

api.collections.create();
api.uiSchemas.create();

Request Hook

https://www.npmjs.com/package/@ahooksjs/use-request

const { data } = useRequest(() => api.resource('users').findMany());

Routing

• createRouteSwitch

const RouteSwitch = createRouteSwitch({
  components: {},
});

<RouteSwitch routes={[]} />

Schema component

• createSchemaComponent

function Hello() {
  return <div>Hello Word</div>
}

const SchemaComponent = createSchemaComponent({
  scope,
  components: {
    Hello
  },
});

const schema = {
  type: 'void',
  'x-component': 'Hello',
};

<SchemaComponent schema={schema} />

How do you assemble it?

import { I18nextProvider } from 'react-i18next';
import { createRouteSwitch, APIClient } from '@nocobase/client';

const apiClient = new APIClient();
const i18n = i18next.createInstance();

const Hello = () => {
  return 
Hello
;
}

const SchemaComponent = createSchemaComponent({
  components: {
    Hello,
  },
});

const PageTemplate = () => {
  const schema = {
    type: 'void',
    'x-component': 'Hello',
  };
  return (
    
  );
}

const RouteSwitch = createRouteSwitch({
  components: {
    PageTemplate,
  },
});

const routes = [
  { path: '/hello', component: 'Hello' },
];

function AntdProvider(props) {
  // The locale here can be handled dynamically depending on the i18next
  return (
    {props.children}
  );
}

const App = () => {
  return (
    
      
        
          
            
          
        
      
    
  );
}

• APIClientProvider: provides the APIClient
• I18nextProvider: internationalization
• AntdProvider: handles the internationalization of antd components, which needs to be placed in I18nextProvider
• Router: route driver
• RouteSwitch: route distribution

The above code may seem a bit verbose, but the actual function and role of each part is not the same, so it is not suitable for over-encapsulation. If needed, it can be further encapsulated according to the actual situation.