If you would like to hack on Toolpad Studio or want to run the latest version, you can follow these steps:
If you're looking into contributing to the docs, follow the instructions down below
- git
- node.js
This will use the local version of Toolpad Studio as built in the monorepo. This is recommended when your app is in a folder inside of the monorepo. You may even decide to temporarily move your app into the monorepo.
-
Install dependencies:
pnpm install
-
Run the build in watch mode
pnpm dev
-
Run Toolpad Studio
pnpm toolpad-studio dev test/integration/backend-basic/fixture/toolpad --dev
Note: It's important to note the difference between
pnpm toolpad-studio dev
and the--dev
parameter. The first instruction runs Toolpad Studio in dev mode. The--dev
parameter is one for contributors only and runs the underlying next.js app that powers the editor in dev mode. The latter makes sure the development build of React is being used and the editor frontend application runs in watch mode.
If your application has dependencies other than @toolpad/studio
, you have to temporarily add it to the workspace:
-
update
pnpm-workspace.yaml
(in the workspace root, not in your app), add your app folder toworkspaces.packages
. For exampleexamples/qr-generator
which has a dependency onqrcode
this would be:packages: - 'packages/*' - 'docs' - 'test' - 'examples/qr-generator'
You should also run
pnpm dev
as follows to avoid the dev scripts from kicking inpnpm dev --ignore qr-generator
-
Run
pnpm install
-
Make sure to start the build in watch mode again and the run the app with
pnpm toolpad-studio dev examples/qr-generator/toolpad --dev
Expand instructions
In some cases you may want to link local Toolpad Studio app into a project on your laptop.
- Install dependencies:
pnpm install
-
Run the build in watch mode
pnpm dev
-
In another folder, start a Toolpad Studio project using:
{ "name": "toolpad-local", "version": "1.0.0", "license": "MIT", "scripts": { "dev": "toolpad-studio dev --dev", "build": "toolpad-studio build --dev", "start": "toolpad-studio start --dev" }, "dependencies": { "@toolpad/studio": "portal:<your-local-toolpad-monorepo>/packages/toolpad-studio" }, "resolutions": { "@toolpad/studio": "portal:<your-local-toolpad-monorepo>/packages/toolpad-studio", "@toolpad/studio-runtime": "portal:<your-local-toolpad-monorepo>/packages/toolpad-studio-runtime", "@toolpad/studio-components": "portal:<your-local-toolpad-monorepo>/packages/toolpad-studio-components", "@toolpad/utils": "portal:<your-local-toolpad-monorepo>/packages/toolpad-utils" } }
-
Replace
<your-local-toolpad-studio-monorepo>
with the path to the Toolpad Studio monorepo on your file system. Make sure to keepportal:
. -
In order to use
portal:
dependencies, we will need to use yarn 2. So start by runningyarn set version berry
and add to the
.yarnrc.yml
:nodeLinker: node-modules
-
then run
yarn install
-
-
Run start toolpad-studio in dev mode:
yarn dev
The playwright tests can be run in one of two modes:
-
Build the production target, then run the integration tests in production mode:
pnpm release:build pnpm test:integration --project chromium
-
Start Toolpad Studio in dev watchmode and run the integration tests in dev mode with the
TOOLPAD_NEXT_DEV
environment variable (slower)pnpm dev TOOLPAD_NEXT_DEV=1 pnpm test:integration --project chromium
Use the --ui
flag to run the tests interactively.
-
If you haven't already, install the project dependencies using
pnpm
-
To start the documentation application in dev mode run
pnpm docs:dev
If all goes well it should print
ready - started server on 0.0.0.0:3003, url: http://localhost:3003
-
Open the docs application in the browser http://localhost:3003/toolpad
-
Check out the PR branch locally with your tool of choice (GitHub Docs)
-
Run to build the project
pnpm && pnpm release:build
-
Run it on your project of choice
pnpm toolpad-studio dev /path/to/my/toolpad/studio/project
Each pull request is built on CodeSandbox CI. As a result of that we have a published Toolpad Studio package for ever pull request. To use the package from the pull request, take the following steps:
-
In the GitHub PR checks, locate the ci/codesandbox check and make sure it has successfully finished building. Click on "details" to open the CodeSandbox CI user interface.
-
In the codesandbox UI, on the right panel, locate and expand the "Packages (6)" section.
-
Right click the link named
@toolpad/studio
and copy the address -
In your
package.json
, for the@toolpad/studio
dependency, replace the version with aforementioned link. e.g."dependencies": { "@toolpad/studio": "https://pkg.csb.dev/mui/mui-toolpad/commit/<commit>/@toolpad/studio" }
-
Run
pnpm --force
You'll now be able to explore your project with the Toolpad Studio version from the GitHub PR.
Please have a look at our general guidelines for sending pull requests.
See RELEASE.md