docs(examples/node): update example to run as expected (#393)

Author: HipsterBrown

.gitignore

@@ -116,3 +116,5 @@ docs/dist
 src/api-version.ts
 
 *.DS_Store
+
+playwright-report/

Node.md

@@ -1,10 +1,10 @@
-# Node & Viam's TypeScript SDK
+# Node.js & Viam's TypeScript SDK
 
-This document contains detailed instructions on including Viam in your Node project. For a runnable example, see the [examples directory](/examples/node/).
+This document contains detailed instructions on including Viam in your Node.js project. For a runnable example, see the [examples directory](/examples/node/).
 
 ## Requirements
 
-This document assumes you already have Node installed. If not, follow the [instructions](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs) provided by Node.
+This document assumes you already have Node.js >= version 20 installed. If not, follow the [instructions](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs) provided by Node.js.
 
 ### Dependencies
 
@@ -19,25 +19,25 @@ You can use either Yarn or NPM to install the dependencies. This document will u
 
 ### Polyfills
 
-Using the SDK with Node also requires the use of some polyfills. In your application's entrypoint (`main.ts`, `index.ts`, or something similar), you will need to register those polyfills:
+Using the SDK with Node.js also requires the use of some polyfills. In your application's entrypoint (`main.ts`, `index.ts`, or something similar), you will need to register those polyfills:
 
 ```ts
 // main.ts
 
-import wrtc = require('node-datachannel/polyfill');
+const wrtc = require('node-datachannel/polyfill');
 for (const key in wrtc) {
   (global as any)[key] = (wrtc as any)[key];
 }
 ```
 
 ### Transport
 
-Communicating with your Viam machine in Node requires the use of a custom transport. In your app's entrypoint, you will also need to register the custom transport:
+Communicating with your Viam machine in Node.js requires the use of a custom transport. In your app's entrypoint, you will also need to register the custom transport:
 
 ```ts
 // main.ts
 
-import connectNode = require('@connectrpc/connect-node');
+const connectNode = require('@connectrpc/connect-node');
 globalThis.VIAM = {
   GRPC_TRANSPORT_FACTORY: (opts: any) =>
     connectNode.createGrpcTransport({ httpVersion: '2', ...opts }),
@@ -51,9 +51,9 @@ To use the SDK, you can use similar instructions to those found on the [document
 ```ts
 // main.ts
 
-import VIAM = require('@viamrobotics/sdk');
-import wrtc = require('node-datachannel/polyfill');
-import connectNode = require('@connectrpc/connect-node');
+const VIAM = require('@viamrobotics/sdk');
+const wrtc = require('node-datachannel/polyfill');
+const connectNode = require('@connectrpc/connect-node');
 globalThis.VIAM = {
   GRPC_TRANSPORT_FACTORY: (opts: any) =>
     connectNode.createGrpcTransport({ httpVersion: '2', ...opts }),

e2e/tests/connect-and-status.spec.ts

@@ -7,12 +7,12 @@ test('check resource names and multiple statuses', async ({ page }) => {
   const resourceNames = page
     .getByTestId('resource-names')
     .getByTestId('resource-name');
-  await expect(resourceNames).toHaveCount(4);
+  await expect(resourceNames).toHaveCount(3);
   await expect(resourceNames.getByText('base1')).toHaveCount(1);
   await expect(resourceNames.getByText('servo1')).toHaveCount(1);
-  await expect(resourceNames.getByText('builtin')).toHaveCount(2);
+  await expect(resourceNames.getByText('builtin')).toHaveCount(1);
 
-  // 3 status iterations * 4 resource names (see main.ts for loop)
+  // 3 status iterations * 3 resource names (see main.ts for loop)
   const statuses = page.getByTestId('statuses').getByTestId('status');
-  await expect(statuses).toHaveCount(12);
+  await expect(statuses).toHaveCount(9);
 });

examples/node/README.md

@@ -1,10 +1,10 @@
-# Viam SDK Quickstart - Node
+# Viam SDK Quickstart - Node.js
 
 This example demonstrates how to connect to a machine using Node.js.
 
 ## Usage
 
-You must have a `.env` file in this directory with the following connection info which can be easily found in the TypeScript code sample for your machine.
+You must have a `.env` file in this directory with the following connection info which can be easily found in the TypeScript code sample for your machine. Use the `authEntity` value from the Code Sample as the `API_KEY_ID` and the `payload` value as the `API_KEY`.
 
 ```
 HOST="<HOST>"
@@ -42,18 +42,18 @@ The `main.ts` file was updated to include the following polyfills and updates:
 - WebRTC Polyfills:
 
   ```js
-import wrtc = require('node-datachannel/polyfill');
-for (const key in wrtc) {
-  (global as any)[key] = (wrtc as any)[key];
-}
+  const wrtc = require('node-datachannel/polyfill');
+  for (const key in wrtc) {
+    (global as any)[key] = (wrtc as any)[key];
+  }
   ```
 
 - GRPC connection configuration
   ```js
-import VIAM = require('@viamrobotics/sdk');
-globalThis.VIAM = {
-  // @ts-ignore
-  GRPC_TRANSPORT_FACTORY: (opts: any) =>
-    connectNode.createGrpcTransport({ httpVersion: '2', ...opts }),
-};
+  const VIAM = require('@viamrobotics/sdk');
+  globalThis.VIAM = {
+    // @ts-ignore
+    GRPC_TRANSPORT_FACTORY: (opts: any) =>
+      connectNode.createGrpcTransport({ httpVersion: '2', ...opts }),
+  };
   ```