From 35f3d01b11b74df07c3a2fe4e8b81066cf85ca38 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hubert=20Figui=C3=A8re?= <hub@collabora.com>
Date: Tue, 19 Sep 2023 13:51:24 -0400
Subject: [PATCH] reactjs: add cert support for reactjs

Issue #14
---
 webapp/reactjs/README.md           | 24 ++++++++++++++++++++++++
 webapp/reactjs/bin/www             |  4 ++--
 webapp/reactjs/client/package.json |  1 +
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/webapp/reactjs/README.md b/webapp/reactjs/README.md
index 4e06385..d8a4bd1 100644
--- a/webapp/reactjs/README.md
+++ b/webapp/reactjs/README.md
@@ -37,6 +37,30 @@ and forwarding api request to the Express server listening by default on port 30
    * `wopi PutFile endpoint`  - the PutFile wopi endpoint has been triggered
    * ` Hello World! Hi!` - the updated file content has been successfully received
     
+### Certificates
+
+It is highly recommended to setup TLS certificates for https.
+
+If you don't have a key pair, I recommend using
+[minica](https://github.com/jsha/minica) to generate a self-signed
+one.
+
+**THIS IS ONLY FOR TEST AND DEVELOPMENT. NEVER USE SELF SIGNED
+CERTIFICATE IN A PRODUCTION ENVIRONMENT**
+
+Then set the environment to indicate where to load the certificate from.
+
+- `COOL_CERT_PRIVKEY` contains the path to the private key. If you used
+  the `minica` tool mentionned above, it's the path to the
+  `minica-key.pem` file.
+- `COOL_CERT_PUBCERT` contains the path to the public certificate. If you used
+  the `minica` tool mentionned above, it's the path to the
+  `minica.pem` file.
+
+To use self-signed certificate, NodeJS requires to set the environment
+`NODE_TLS_REJECT_UNAUTHORIZED='0'`, otherwise it will throw a
+`'SELF_SIGNED_CERT_IN_CHAIN'` error.
+
 ## Note
 
 By default the [body-parser][] node.js package used as middleware for the `PutFile` endpoint has a limit option which 
diff --git a/webapp/reactjs/bin/www b/webapp/reactjs/bin/www
index 26bb2ab..f479243 100755
--- a/webapp/reactjs/bin/www
+++ b/webapp/reactjs/bin/www
@@ -85,6 +85,6 @@ function onListening() {
   var addr = server.address();
   var bind = typeof addr === 'string'
     ? 'pipe ' + addr
-    : 'port ' + addr.port;
-  debug('Listening on ' + bind);
+    : `http://localhost:${addr.port}/`;
+  console.log(`Listening on ${bind}`);
 }
diff --git a/webapp/reactjs/client/package.json b/webapp/reactjs/client/package.json
index 281f90a..98dc8ea 100644
--- a/webapp/reactjs/client/package.json
+++ b/webapp/reactjs/client/package.json
@@ -19,6 +19,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
+    "start:debug": "react-scripts --inspect-brk start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"