Skip to content

Commit

Permalink
Add documentation about installing Toolpad in an existing project (#3214
Browse files Browse the repository at this point in the history
)
  • Loading branch information
Janpot authored Feb 15, 2024
1 parent ff072e2 commit dbb09b6
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 0 deletions.
4 changes: 4 additions & 0 deletions docs/data/toolpad/concepts/custom-server.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

<p class="description">Run Toolpad applications programmatically in existing node.js servers.</p>

:::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
Expand Down
57 changes: 57 additions & 0 deletions docs/data/toolpad/getting-started/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,3 +52,60 @@ pnpm run dev
</codeblock>

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:

<codeblock storageKey="package-manager">

```bash npm
pnpm install -S @mui/toolpad
```

```bash yarn
yarn add @mui/toolpad
```

```bash pnpm
pnpm add @mui/toolpad
```

</codeblock>

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:

<codeblock storageKey="package-manager">

```bash npm
npm run toolpad:dev
```

```bash yarn
yarn toolpad:dev
```

```bash pnpm
pnpm run toolpad:dev
```

</codeblock>

When you run this command, Toolpad will automatically initialize a new application in the **./my-toolpad-app** folder.

:::info
To integrate a Toolpad application in an existing server, you can follow the custom server [integration guide](/toolpad/concepts/custom-server/).
:::

0 comments on commit dbb09b6

Please sign in to comment.