topic Re: Unable to Preview App Card Changes Locally – No ‘Developing Locally’ Badge in APIs & Integrations

Unable to Preview App Card Changes Locally – No ‘Developing Locally’ Badge

rzmota — Wed, 02 Jul 2025 15:42:47 GMT

Hi there,

I’m working on an app using UI Extension App Cards, and I’m following this YouTube tutorial: https://youtu.be/b1bCzozbGio?feature=shared&t=565. I’ve completed most of the setup, but I’m having trouble getting the app to run locally for live preview.

I’m stuck at the point where I should see the “Developing Locally” badge and be able to preview changes in the browser on the fly — but it’s not showing up.

Here’s what I’ve done so far:
• Followed all the steps from the official guidelines
• Built the app and completed the OAuth setup
• Deployed it to the test developer portal
• Configured the App Card
• Ran hs project dev, selected the test account where the app is connected, and approved development access

However, even after modifying the code, nothing updates in the preview, and the “Developing Locally” badge never appears.

Is anyone able to help me troubleshoot this? Maybe I’m missing something?

Thanks in advance!

Re: Unable to Preview App Card Changes Locally – No ‘Developing Locally’ Badge

BrandonWoodruff — Thu, 03 Jul 2025 13:17:49 GMT

Hello!

Here are a few key things to check that often trip folks up during local development with UI Extension App Cards:

1. hs project dev must run with the same developer project linked

Make sure you're in the root directory of the exact project that’s registered with your app in the Developer Portal. If you've moved things or reinitialized the project, HubSpot might not know what you're trying to preview.

2. Your extension must be assigned to the right CRM location

Double-check that your app card extension is still active and mapped correctly to the CRM object (e.g. contact, company, etc.) in the "UI Extensions" tab of your app project settings.

3. Portal Access for Development Mode

You mentioned approving development access — that’s great. But confirm that your test portal is still connected to the project and that you’re logged into that same portal when previewing.

To verify:

Visit https://app.hubspot.com/ui-extensions-debug while running hs project dev
Confirm your extension is listed and in LIVE PREVIEW mode
Look for any red error messages in the console
4. Check for UI Extension Mounting Issues
If your app card doesn’t load at all (and the badge never appears), try inserting a simple Text component or Alert in your root render and confirm that the extension itself is rendering. Sometimes the extension compiles, but a rendering error prevents it from showing.

import { Text, Alert } from "@hubspot/ui-extensions";
hubspot.extend(({ runServerlessFunction }) => ( <Alert title="Hello from local dev!" variant="info" /> ));
5. File Watcher Limitations
If code changes aren't being reflected, it could be due to file watcher limitations. Try restarting hs project dev entirely — this is often enough to reset the live reload system.

Let me know if this helps, or if you have any other questions!

✔️ Was I able to help answer your question? Help the community by marking it as a solution.

Brandon Woodruff
Senior Software Developer @ Pearagon
Still have questions? Reach out at brandon@pearagon.com

Re: Unable to Preview App Card Changes Locally – No ‘Developing Locally’ Badge

RubenBurdin — Wed, 10 Sep 2025 17:45:21 GMT

Hi @rzmota that’s frustrating when you expect the “Developing locally” ribbon and nothing shows.

The two things that most often block live preview are the project context and where you’re viewing the card. Make sure you’re running hs project dev from the exact developer project that contains the app and extension you installed, with the profile pointing to the same test portal you selected during the prompt.

If in doubt, re-auth that portal in your hubspot.config.yml and restart the dev server so HubSpot reattaches your local session to that portal

(https://developers.hubspot.com/docs/apps/developer-platform/build-apps/overview )

Next, open the CRM record type where the app card is actually mounted and installed. The badge only appears when the extension renders inside a supported location and the dev server is connected. A fast way to confirm the wiring is to drop a tiny component in your root render, then reload the record to force a fresh mount.

If the card still renders the deployed version, your dev server isn’t attached to that portal or project. HubSpot’s current guides call out using hs project dev specifically to preview changes locally; if you don’t see updates after a save, kill and relaunch the command to reset the watcher and re-negotiate the preview session (https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensibility/create-an-app-home-page )

One quick check: did you approve the “development access” prompt in the same portal you’re previewing, and are you logged into that portal in the browser where you open the CRM record?

If yes, open a contact or company where the card is assigned, then modify any JSX and watch the terminal for a rebuild line. If that line appears but the UI doesn’t change, the page is showing the installed build, not the live preview, which points back to profile or portal mismatch.

Hope this helps.

topic Re: Unable to Preview App Card Changes Locally – No ‘Developing Locally’ Badge in APIs & Integrations

Unable to Preview App Card Changes Locally – No ‘Developing Locally’ Badge

Re: Unable to Preview App Card Changes Locally – No ‘Developing Locally’ Badge

1. hs project dev must run with the same developer project linked

2. Your extension must be assigned to the right CRM location

3. Portal Access for Development Mode

4. Check for UI Extension Mounting Issues

5. File Watcher Limitations

Re: Unable to Preview App Card Changes Locally – No ‘Developing Locally’ Badge