Show native app only elements on browser App renders in dev mode.

dotcom-rendering/src/components/FollowWrapper.importable.tsx

@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
 import { getNotificationsClient, getTagClient } from '../lib/bridgetApi';
 import { useIsBridgetCompatible } from '../lib/useIsBridgetCompatible';
 import { useIsMyGuardianEnabled } from '../lib/useIsMyGuardianEnabled';
+import { useConfig } from './ConfigContext';
 import { FollowNotificationsButton, FollowTagButton } from './FollowButtons';
 
 type Props = {
@@ -14,6 +15,7 @@ type Props = {
 };
 
 export const FollowWrapper = ({ id, displayName }: Props) => {
+	const { isDev } = useConfig();
 	const [isFollowingNotifications, setIsFollowingNotifications] = useState<
 		boolean | undefined
 	>(undefined);
@@ -31,9 +33,17 @@ export const FollowWrapper = ({ id, displayName }: Props) => {
 		return !blockList.includes(tagId);
 	};
 
-	if (isBridgetCompatible && isMyGuardianEnabled && isNotInBlockList(id)) {
-		setShowFollowTagButton(true);
-	}
+	useEffect(() => {
+		if (
+			isBridgetCompatible &&
+			isMyGuardianEnabled &&
+			isNotInBlockList(id)
+		) {
+			setShowFollowTagButton(true);
+		} else if (isDev) {
+			setShowFollowTagButton(true);
+		}
+	}, [isBridgetCompatible, isMyGuardianEnabled, id, isDev]);
 
 	useEffect(() => {
 		const topic = new Topic({

dotcom-rendering/src/components/ListenToArticle.importable.tsx

@@ -2,6 +2,7 @@ import { log } from '@guardian/libs';
 import { useEffect, useState } from 'react';
 import { getListenToArticleClient } from '../lib/bridgetApi';
 import { useIsBridgetCompatible } from '../lib/useIsBridgetCompatible';
+import { useConfig } from './ConfigContext';
 import { ListenToArticleButton } from './ListenToArticleButton';
 
 type Props = {
@@ -25,6 +26,7 @@ export const formatAudioDuration = (
 };
 
 export const ListenToArticle = ({ articleId }: Props) => {
+	const { isDev } = useConfig();
 	const [showButton, setShowButton] = useState<boolean>(false);
 	const [audioDurationSeconds, setAudioDurationSeconds] = useState<
 		number | undefined
@@ -55,8 +57,12 @@ export const ListenToArticle = ({ articleId }: Props) => {
 
 					setShowButton(false);
 				});
+		} else if (isDev) {
+			// To facilitate design and development in non-Bridget compatible environments,
+			// we want to show the button if we're in development mode
+			setShowButton(true);
 		}
-	}, [articleId, isBridgetCompatible]);
+	}, [articleId, isDev, isBridgetCompatible]);
 
 	const listenToArticleHandler = () => {
 		void getListenToArticleClient()

dotcom-rendering/src/server/render.article.apps.tsx

@@ -35,6 +35,7 @@ export const renderArticle = (
 		darkModeAvailable: true,
 		assetOrigin: ASSET_ORIGIN,
 		editionId: frontendData.editionId,
+		isDev: process.env.NODE_ENV === 'development',
 	};
 
 	const { html, extractedCss } = renderToStringWithEmotion(

dotcom-rendering/src/types/configContext.ts

@@ -14,10 +14,12 @@ export type Config =
 			darkModeAvailable: boolean;
 			assetOrigin: AssetOrigin;
 			editionId: EditionId;
+			isDev?: boolean;
 	  }>
 	| Readonly<{
 			renderingTarget: Extract<RenderingTarget, 'Apps'>;
 			darkModeAvailable: boolean;
 			assetOrigin: AssetOrigin;
 			editionId: EditionId;
+			isDev?: boolean;
 	  }>;