From ea5233d0def506958230870e1f07ae011f85710e Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Wed, 14 Feb 2024 12:50:08 +0100 Subject: [PATCH 1/3] Add documentation about installing Toolpad in existing projects --- .../toolpad/getting-started/installation.md | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) diff --git a/docs/data/toolpad/getting-started/installation.md b/docs/data/toolpad/getting-started/installation.md index 1380e03a4ae..16cad22a997 100644 --- a/docs/data/toolpad/getting-started/installation.md +++ b/docs/data/toolpad/getting-started/installation.md @@ -52,3 +52,58 @@ pnpm run dev This starts the development server on port `3000` or the first available port after that and opens the browser to the Toolpad editor. + +## Install Toolpad in an existing project + +Start by installing the required dependencies: + + + +```bash npm +pnpm install -S @mui/toolpad +``` + +```bash yarn +yarn add @mui/toolpad +``` + +```bash pnpm +pnpm add @mui/toolpad +``` + + + +Then you'll have to add the toolpad scripts to yur `package.json`: + +```json +// ./package.json +... + "scripts": { + "toolpad:dev": "toolpad dev ./my-toolpad-app", + "toolpad:build": "toolpad build ./my-toolpad-app", + "toolpad:start": "toolpad start ./my-toolpad-app" + } +... +``` + +Now you can start your toolpad application using one of the commands: + + + +```bash npm +npm run toolpad:dev +``` + +```bash yarn +yarn toolpad:dev +``` + +```bash pnpm +pnpm run toolpad:dev +``` + + + +:::info +To integrate Toolpad in an existing server, you can follow the custom server [integration guide](/toolpad/concepts/custom-server/). +::: From f68ad1662e5d3d8c310298834f610051f8a6ace3 Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Wed, 14 Feb 2024 12:50:55 +0100 Subject: [PATCH 2/3] Update installation.md --- docs/data/toolpad/getting-started/installation.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/data/toolpad/getting-started/installation.md b/docs/data/toolpad/getting-started/installation.md index 16cad22a997..34c14e4b056 100644 --- a/docs/data/toolpad/getting-started/installation.md +++ b/docs/data/toolpad/getting-started/installation.md @@ -104,6 +104,8 @@ pnpm run toolpad:dev +When you run this command, Toolpad will automatically initialize a new application in the **./my-toolpad-app** folder. + :::info -To integrate Toolpad in an existing server, you can follow the custom server [integration guide](/toolpad/concepts/custom-server/). +To integrate a Toolpad application in an existing server, you can follow the custom server [integration guide](/toolpad/concepts/custom-server/). ::: From d45ae44b01d4316391ad42bbf8d1e790241274fb Mon Sep 17 00:00:00 2001 From: MUI bot <2109932+Janpot@users.noreply.github.com> Date: Wed, 14 Feb 2024 12:59:45 +0100 Subject: [PATCH 3/3] add CTA for RSC Toolpad --- docs/data/toolpad/concepts/custom-server.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/data/toolpad/concepts/custom-server.md b/docs/data/toolpad/concepts/custom-server.md index 4a667f8290c..8d3a2b4b750 100644 --- a/docs/data/toolpad/concepts/custom-server.md +++ b/docs/data/toolpad/concepts/custom-server.md @@ -2,6 +2,10 @@

Run Toolpad applications programmatically in existing node.js servers.

+:::warning +We're working on an improved integration method. You'll be able to run Toolpad applications as React server components. If this interests you, please upvote the [feature request](https://github.com/mui/mui-toolpad/issues/3012). +::: + The Toolpad `dev` command comes with its own built-in server. However, sometimes you'd want more control over the way Toolpad applications are hosted within your application. The Toolpad custom server integration API allows you to run a Toolpad application programmatically within an existing node.js server. :::info