Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add documentation about installing Toolpad in an existing project #3214

Merged
merged 3 commits into from
Feb 15, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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/).
:::
Loading