- Clone the repo
gh repo clone TanStack/router
- Ensure
nodeis installed - Ensure
pnpmis installed- https://pnpm.io/installation
- Why? We use
pnpmto manage workspace dependencies. It's easily the best monorepo/workspace experience available as of when this was written.
- Install dependencies
pnpm install- This installs dependencies for all of the packages in the monorepo, even examples!
- Dependencies inside of the packages and examples are automatically linked together as local/dynamic dependencies.
- Install test dependencies
pnpm exec playwright install(required for e2e tests)
- Run the build or dev watcher
pnpm build:all(build all packages) orpnpm build(cached build with nx affected) orpnpm dev
- Navigate to an example
cd examples/react/basic
- Run the example
pnpm dev
- Make changes to the code
- If you ran
pnpm devthe dev watcher will automatically rebuild the code that has changed
- If you ran
- Editing the docs locally and previewing the changes
- The documentations for all the TanStack projects are hosted on tanstack.com, which is a TanStack Start application (https://github.com/TanStack/tanstack.com). You need to run this app locally to preview your changes in the
TanStack/routerdocs.
- The documentations for all the TanStack projects are hosted on tanstack.com, which is a TanStack Start application (https://github.com/TanStack/tanstack.com). You need to run this app locally to preview your changes in the
Note
The website fetches the doc pages from GitHub in production, and searches for them at ../router/docs in development. Your local clone of TanStack/router needs to be in the same directory as the local clone of TanStack/tanstack.com.
You can follow these steps to set up the docs for local development:
- Make a new directory called
tanstack.
mkdir tanstack- Enter that directory and clone the
TanStack/routerandTanStack/tanstack.comrepos.
cd tanstack
git clone git@github.com:TanStack/router.git
# We probably don't need all the branches and commit history
# from the `tanstack.com` repo, so let's just create a shallow
# clone of the latest version of the `main` branch.
# Read more about shallow clones here:
# https://github.blog/2020-12-21-get-up-to-speed-with-partial-clone-and-shallow-clone/#user-content-shallow-clones
git clone git@github.com:TanStack/tanstack.com.git --depth=1 --single-branch --branch=mainNote
Your tanstack directory should look like this:
tanstack/
|
+-- router/ (<-- this directory cannot be called anything else!)
|
+-- tanstack.com/
- Enter the
tanstack/tanstack.comdirectory, install the dependencies and run the app in dev mode:
cd tanstack.com
pnpm i
# The app will run on https://localhost:3000 by default
pnpm dev- Now you can visit http://localhost:3000/router/latest/docs/framework/react/overview in the browser and see the changes you make in
tanstack/router/docsthere.
Warning
You will need to update the docs/(router or start)config.json file (in TanStack/router) if you add a new documentation page!
You can see the whole process in the screen capture below: