Local Development | Documentation

Learn how to link the DevConsole package locally for development and testing changes live in your application.

Overview

When contributing to the devconsole-package or customizing it for your needs, you can link it to your main application locally. This allows you to see changes instantly without having to push to GitHub.

Step 1: Watch Mode

First, start the package in development mode. This will watch for file changes, recompile TypeScript, and ensure CSS is up to date in the dist/ folder.

bash

# In devconsole-package directory
pnpm dev

Step 2: Linking

In your main application (e.g., this repository), use the built-in helper script to switch the dependency to your local folder.

bash

# In the main application directory
pnpm link:local

This command runs node scripts/link-local-package.js link, which updates your package.json to use the file: protocol.

Step 3: Troubleshooting

CSS Not Updating

If styling changes aren't appearing, ensure the package is running in pnpm dev mode. You may also need to perform a hard refresh (Cmd+Shift+R) in your browser.

Build Errors

If you see errors about missing chunks, try clearing your Next.js cache by running rm -rf .next and restarting your dev server.

Unlinking

To go back to using the remote GitHub version of the package:

bash

pnpm link:remote