Create React Version of the js/Ice/Greeter Demo #514

Copilot · 2025-06-04T13:58:55Z

This PR implements a React-based version of the existing js/Ice/greeter demo as requested in the issue.

What's Added

New js/Ice/greeter-react/ directory with a complete React application
Modern React setup using Vite, TypeScript, and React 18
Web UI with an input field (defaulting to "React"), button, and response display area
Ice integration using the @zeroc/ice package from the ZeroC nightly NPM feed
Proper error handling and loading states for user feedback
Comprehensive documentation in README.md with setup and usage instructions

Key Features

The React application provides:

Input field to enter a name with "React" as the default value
Button to send greet requests to the Ice server
Real-time display of server responses in the UI
Error handling for connection issues
Loading indicators during requests
Clean, responsive design with proper styling

Technical Implementation

Uses the same Greeter.ice Slice definition as the original demo
Properly manages Ice communicator lifecycle (create → use → destroy)
Includes browser polyfills for Node.js modules required by Ice
Modern build system with Vite for development and production builds
TypeScript support throughout the application

Usage

Install dependencies: npm install
Build the application: npm run build
Start development server: npm run dev
Open browser to the provided URL (typically http://localhost:5173)

The application expects a Greeter server to be running on localhost:4061 (same as the original demo).

Documentation Updates

Updated js/README.md to include the new React demo in the demos table.

Fixes #513.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

http://168.63.129.16:80/machine/
- Triggering command: /usr/bin/python3 -u bin/WALinuxAgent-2.13.1.1-py3.9.egg -collect-logs (http block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to my firewall allow list

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: bernardnormier <[email protected]>

CLAassistant · 2025-06-04T14:06:48Z

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

js/Ice/greeter-react/src/App.tsx

js/Ice/greeter-react/package.json

js/Ice/greeter-react/src/App.tsx

js/Ice/greeter-react/README.md

bernardnormier

Please review and fix @pepone comments.

…ator management Co-authored-by: bernardnormier <[email protected]>

Copilot · 2025-06-04T14:32:04Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

http://168.63.129.16:80/machine/
- Triggering command: /usr/bin/python3 -u bin/WALinuxAgent-2.13.1.1-py3.9.egg -collect-logs (http block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to my firewall allow list

bernardnormier · 2025-06-04T14:36:12Z

Make sure every file added by this PR ends with a newline character.

Co-authored-by: bernardnormier <[email protected]>

Copilot · 2025-06-04T14:51:31Z

Make sure every file added by this PR ends with a newline character.

Added missing newlines to all files in the greeter-react demo in commit 5d79ec3.

…x-513

externl

state message boxes have too much bottom padding.
entering no name after getting a successful response doesn't dismiss the previous server response

externl · 2025-06-10T17:54:26Z

js/Ice/greeter-react/README.md

+- Navigate to the demo directory:
+
+  ```shell
+  cd js/Ice/greeter


This dir is incorrect.

fixed, renamed to react-greeter for consistency with android-greeter

The directory path js/Ice/react-greeter is correct - the demo was renamed from greeter-react to react-greeter in recent commits.

js/Ice/greeter-react/README.md

js/Ice/greeter-react/src/App.tsx

pepone · 2025-06-10T20:22:49Z

state message boxes have too much bottom padding.

Cleanup the css

entering no name after getting a successful response doesn't dismiss the previous server response

Updated the demo to use a StatusMessage which better handle this to only allow one state, loading, greeting, or error.

Copilot

Pull Request Overview

This pull request implements a new React-based version of the Ice Greeter demo, integrating modern frameworks and tooling (Vite, TypeScript, React 18) with Ice for communication.

Introduces a new directory for the React demo with full integration of Ice including proper error handling and loading states.
Adds updated documentation and configuration files to support a modern build system and browser environment.
Updates the main README to include the new React demo alongside existing demos.

Reviewed Changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
js/README.md	Updated demos table to include the new Ice React Greeter demo.
js/Ice/react-greeter/vite.config.ts	New Vite configuration for the React application.
js/Ice/react-greeter/tsconfig.json	New TypeScript configuration tailored for a Vite and React environment.
js/Ice/react-greeter/src/*	Entire React application including main entry points, styling, and status messaging.
js/Ice/react-greeter/Greeter.ice	Greeter Slice definition for the React demo.
js/Ice/react-greeter/package.json	Dependency and script definitions for the React demo.
js/Ice/react-greeter/index.html	HTML entry point for the React application.
js/Ice/react-greeter/README.md	Documentation updated to guide development and usage of the React demo.
js/Ice/react-greeter/.npmrc	NPM registry configuration for ZeroC packages.
js/Ice/react-greeter/.gitignore	Git ignore configuration for generated and build files.
js/Ice/greeter/README.md	Minor documentation updates in the existing Greeter demo.

Comments suppressed due to low confidence (1)

js/Ice/react-greeter/src/App.tsx:35

Double-check that instantiating the Greeter proxy using 'new' is consistent with the expected API for the @zeroc/ice package, as factory methods are sometimes preferred.

const greeter = new VisitorCenter.GreeterPrx(communicator, "greeter:ws -h localhost -p 4061");

Copilot · 2025-06-10T20:23:36Z

js/Ice/react-greeter/src/App.tsx

+            }));
+        }
+
+        return () => {


[nitpick] Consider explicitly handling the promise returned by the asynchronous cleanup function within the useEffect cleanup to ensure that any potential errors during communicator destruction are properly managed.

… name Co-authored-by: pepone <[email protected]>

Copilot · 2025-06-10T20:30:44Z

state message boxes have too much bottom padding.

entering no name after getting a successful response doesn't dismiss the previous server response

Fixed both issues in commit 55a6a54:

Reduced padding for state message boxes from 1rem to 0.75rem 1rem
Now clears previous server response when entering empty name

externl · 2025-06-11T14:50:19Z

js/Ice/react-greeter/src/App.tsx

+            const cleanup = async () => {
+                try {
+                    if (communicatorRef.current) {
+                        await communicatorRef.current.destroy();
+                    }
+                } catch (err) {
+                    console.warn("Failed to destroy communicator:", err);
+                }
+            };
+            // Kick off the async cleanup, but don't return the promise
+            cleanup();


Is this extra step necessary?

Need to check, it is definitely ugly.

The callback returned by useEffect must be not async

src/App.tsx:27:15 - error TS2345: Argument of type '() => () => Promise<void>' is not assignable to parameter of type 'EffectCallback'. Type '() => Promise<void>' is not assignable to type 'void | Destructor'. Type '() => Promise<void>' is not assignable to type 'Destructor'. Type 'Promise<void>' is not assignable to type 'void | { [UNDEFINED_VOID_ONLY]: never; }'. 27 useEffect(() => { ~~~~~~~

If we call destroy directly and not await it we can end up with an unhalted promise rejection.

another alternative is:

return () => { const communicator = communicatorRef.current; communicatorRef.current = null; // Clean up the communicator when the component unmounts if (communicator) { communicator.destroy().catch((err) => { console.error("Error destroying Ice communicator:", err); }); } };

Either one is fine with me.

bernardnormier · 2025-06-12T02:01:07Z

js/Ice/react-greeter/src/App.tsx

@@ -0,0 +1,124 @@
+import React, { useState, useCallback, useEffect, useRef } from "react";


Missing copyright

bernardnormier · 2025-06-12T02:01:18Z

js/Ice/react-greeter/src/App.tsx

+
+import StatusMessage from "./StatusMessage";
+
+interface AppState {


Too few comments

bernardnormier · 2025-06-12T02:01:42Z

js/Ice/react-greeter/src/StatusMessage.tsx

@@ -0,0 +1,29 @@
+import React from "react";


Needs copyright and comments

Initial plan for issue

8988ef0

Copilot AI assigned Copilot and bernardnormier Jun 4, 2025

Copilot started work on behalf of bernardnormier June 4, 2025 13:59 View session

bernardnormier assigned pepone Jun 4, 2025

Create React version of js/Ice/Greeter demo

3e8862d

Co-authored-by: bernardnormier <[email protected]>

Copilot AI changed the title ~~[WIP] Create React Version of the js/Ice/Greeter Demo~~ Create React Version of the js/Ice/Greeter Demo Jun 4, 2025

Copilot AI requested a review from bernardnormier June 4, 2025 14:08

Copilot finished work on behalf of bernardnormier June 4, 2025 14:08

pepone reviewed Jun 4, 2025

View reviewed changes

js/Ice/greeter-react/src/App.tsx Outdated Show resolved Hide resolved

js/Ice/greeter-react/package.json Outdated Show resolved Hide resolved

js/Ice/greeter-react/src/App.tsx Outdated Show resolved Hide resolved

js/Ice/greeter-react/README.md Outdated Show resolved Hide resolved

bernardnormier reviewed Jun 4, 2025

View reviewed changes

Copilot started work on behalf of bernardnormier June 4, 2025 14:23 View session

Address review feedback: use WebSocket transport and improve communic…

f5b7ca0

…ator management Co-authored-by: bernardnormier <[email protected]>

Copilot finished work on behalf of bernardnormier June 4, 2025 14:32

Copilot started work on behalf of bernardnormier June 4, 2025 14:36 View session

Add missing newlines to all files in greeter-react demo

5d79ec3

Co-authored-by: bernardnormier <[email protected]>

Copilot finished work on behalf of bernardnormier June 4, 2025 14:52

pepone added 2 commits June 5, 2025 16:07

Review fixes

77f07b9

Merge remote-tracking branch 'origin/copilot/fix-513' into copilot/fi…

5a807f2

…x-513

pepone requested review from Copilot and externl June 5, 2025 14:14

README formatting

1764840

This comment was marked as outdated.

Sign in to view

Exclude TypeScript incremental build .tsbuildinfo file

1f2abc7

pepone marked this pull request as ready for review June 6, 2025 09:54

pepone requested a review from bernardnormier June 6, 2025 10:06

externl requested changes Jun 10, 2025

View reviewed changes

Review fixes

0a4d8cd

Copilot started work on behalf of pepone June 10, 2025 20:20 View session

pepone requested review from Copilot, externl and pepone and removed request for pepone June 10, 2025 20:23

Copilot AI reviewed Jun 10, 2025

View reviewed changes

pepone removed their request for review June 10, 2025 20:23

pepone unassigned Copilot Jun 10, 2025

Fix UI issues: reduce message box padding and clear greeting on empty…

55a6a54

… name Co-authored-by: pepone <[email protected]>

Copilot finished work on behalf of pepone June 10, 2025 20:32

externl approved these changes Jun 11, 2025

View reviewed changes

pepone added 2 commits June 11, 2025 19:17

Merge remote-tracking branch 'origin/main' into copilot/fix-513

a09add5

Cleanup destroy callback

b919a31

bernardnormier approved these changes Jun 12, 2025

View reviewed changes

bernardnormier removed their assignment Jun 12, 2025

pepone added 2 commits June 12, 2025 12:03

Add comments and rename components

025ff19

Cleanup

8f8924e

pepone merged commit 94fb689 into main Jun 12, 2025
10 of 11 checks passed

		@@ -0,0 +1,124 @@
		import React, { useState, useCallback, useEffect, useRef } from "react";


		import StatusMessage from "./StatusMessage";

		interface AppState {

Create React Version of the js/Ice/Greeter Demo #514

Create React Version of the js/Ice/Greeter Demo #514

Uh oh!

Conversation

Copilot AI commented Jun 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What's Added

Key Features

Technical Implementation

Usage

Documentation Updates

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

CLAassistant commented Jun 4, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bernardnormier left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Jun 4, 2025

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

bernardnormier commented Jun 4, 2025

Uh oh!

Copilot AI commented Jun 4, 2025

Uh oh!

This comment was marked as outdated.

Uh oh!

externl left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jun 10, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pepone commented Jun 10, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Jun 10, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Jun 10, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

Copilot AI commented Jun 4, 2025 •

edited

Loading