Support integrating Toolpad in a custom server

[Janpot]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Currently Toolpad requires starting up its own server process with toolpad start. Instead I'd like to be able to integrate a Toolpad application into my own server. I wish Toolpad would be able to generate a module that I could directly import in my express(-like) server and call in any connect middleware compatible webserver.

Examples 🌈

After running

toolpad build

I can import a generated module from e.g. ./toolpad/.generated/server which I can use as follows:

// ./server.js
import express from 'express';
import path from 'path;
import { createHandler } from '@mui/toolpad';

const toolpadHandler = createHandler({
  dir: path.resolve(process.cwd(), './myApp'),
  basePath: '/toolpad' 
})

const app = express()

app.use('/foo', (req, res) => {
  // ... my own application logic
})

app.use('/toolpad', toolpadHandler)

const server = app.listen(3000)

Now I can run my application

node ./server.js

and Can access the toolpad application on http://localhost:3000/toolpad

Motivation 🔦

This could lower the barrier for teams that don't maintain their own infrastructure as it should allow them to integrate Toolpad without infrastructure changes.

Steps

• clean up interfaces Refactor cli interface #2729
• detach ws server from http server Isolate the Toolpad router from Toolpad server #2735
• isolate handler logic Isolate the Toolpad router from Toolpad server #2735
• make handler creation synchronous (We can stall requests while initializing async flows)
• support basePath
• expose handler function publicly
• allow connecting the editor to an externally running application in dev mode
• documentation
• ...

[prakhargupta1]

I am marking it as Done. @Janpot