Dashboard App

Core App

Nocto is built on top of Medusa Admin, which means it uses its core functionalities. We are extending default dashboard app from Medusa by providing additional argument called noctoConfig. At the end, this is how we are starting Nocto:

import { DashboardApp } from "./dashboard-app"
import { DashboardPlugin } from "./dashboard-app/types"
import { NoctoConfig, NoctoPluginProvider } from "@rsc-labs/noctojs-plugin-system"

import { loadBuiltInPlugins } from "./plugin-system/load-plugins"

interface AppProps {
  plugins?: DashboardPlugin[]
  noctoConfig?: NoctoConfig
}

function Dashboard({ plugins = []}: AppProps) {
  const app = new DashboardApp({
    plugins: [...plugins],
  })

  return (<div>{app.render()}</div>
  )
}

function App({ plugins = [], noctoConfig }: AppProps) {

  if (noctoConfig) loadBuiltInPlugins(noctoConfig)

  return (
    <div>
      <NoctoPluginProvider>
        <Dashboard plugins={plugins}/>
      </NoctoPluginProvider>
    </div>
  )

}

export default App

You can see that it does two additional things on top of Medusa:

1. Executes loading built-in plugins

This part is responsible for loading all default plugins like sidebar items and routes. You will learn more about it in the next sections (and how you can overwrite them), but basically it gives you the same experience as default Medusa Admin.

2. Passing Nocto context

This part is responsible for all Nocto-related functionalities. NoctoPluginProvider is used to provide all information to React tree, so components can use such functionalities like registries and configs (you will learn about them in the next sections).

Client App

Above code is in the core app of Nocto, so you won't see it when using CLI. It is just to give you a heads-up how everything works. In Nocto, you will see following entry point:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { loadMyNoctoPlugins } from './utils';
import { noctoConfig } from './../nocto-config'
import App from "@rsc-labs/noctojs"
import "./index.css"
import "./themes/theme-oceanic.css"

async function bootstrap() {
  await loadMyNoctoPlugins(noctoConfig);

  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      <App noctoConfig={noctoConfig} />
    </React.StrictMode>
  );
}

bootstrap();

Context and default plugins are hidden already, but the code loads also YOUR plugins. Thanks to that you will be able to add, remove and overwrite existing plugins. You will learn about it in the next sections.