feat: sdk connected using production snippet

Unleash · Sep 26, 2024 · 3eafdba · 3eafdba
1 parent aca0de4
commit 3eafdba
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/frontend/src/component/onboarding/SdkConnected.tsx b/frontend/src/component/onboarding/SdkConnected.tsx
@@ -49,6 +49,7 @@ const SpacedContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     gap: theme.spacing(3),
+    fontSize: theme.typography.body2.fontSize,
 }));
 
 const StyledCodeBlock = styled('pre')(({ theme }) => ({
@@ -119,11 +120,14 @@ export const SdkConnected: FC<ISdkConnectedProps> = ({ sdk }) => {
     const frontendApiUrl = `${uiConfig.unleashUrl}/api/frontend/`;
     const apiUrl = sdk.type === 'client' ? clientApiUrl : frontendApiUrl;
 
-    const snippet = (snippets[sdk.name] || '').replace(
+    const snippet = (snippets[sdk.name] || '').replaceAll(
         '<YOUR_API_URL>',
         apiUrl,
     );
 
+    const [_connectSnippet, productionSnippet, otherResourcesSnippet] =
+        snippet.split('---\n');
+
     return (
         <SpacedContainer>
             <Typography variant='h2'>Connect an SDK to Unleash</Typography>
@@ -139,7 +143,17 @@ export const SdkConnected: FC<ISdkConnectedProps> = ({ sdk }) => {
                     following default settings.
                 </Typography>
                 <Markdown components={{ code: CodeRenderer }}>
-                    {snippet}
+                    {productionSnippet}
+                </Markdown>
+            </Box>
+            <Box>
+                <SectionHeader>Additional resources</SectionHeader>
+                <Typography variant='body2'>
+                    Now that we’ve validated the connection, you might want to
+                    look into more advanced use cases and examples:
+                </Typography>
+                <Markdown components={{ code: CodeRenderer }}>
+                    {otherResourcesSnippet}
                 </Markdown>
             </Box>
         </SpacedContainer>

diff --git a/frontend/src/component/onboarding/snippets/nodejs.md b/frontend/src/component/onboarding/snippets/nodejs.md
@@ -24,15 +24,13 @@ setInterval(() => {
 
 ---
 ```js
-const { UnleashClient } = require('unleash-proxy-client');
+const { initialize } = require('unleash-client');
 
-const unleash = new UnleashClient({
-  url: '<YOUR_API_URL>',
-  appName: 'unleash-onboarding-node',
-  customHeaders: { Authorization: process.env.UNLEASH_API_KEY  },
+const unleash = initialize({
+    url: '<YOUR_API_URL>',
+    appName: 'unleash-onboarding-node',
+    customHeaders: { Authorization: process.env.UNLEASH_API_KEY  },
 });
-
-unleash.start();
 ```
 
 ---