use healthcheck to verify runtime address

src/index.tsx

@@ -1,13 +1,14 @@
 // 1) Import React and React Dom libraries
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import dotenv from 'dotenv';
 
 import App from './components/App';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.bundle.min.js';
 import './styles/main.scss';
 
+import { mkRestClient } from "@marlowe.io/runtime-rest-client";
+
 let runtimeURL = process.env.MARLOWE_RUNTIME_WEB_URL;
 await fetch(`/config.json`).then(async (res) => {
   if (res.status === 200) {
@@ -18,21 +19,26 @@ await fetch(`/config.json`).then(async (res) => {
   }
 });
 
-const hasValidRuntimeInstance = runtimeURL !== undefined && runtimeURL !== null && runtimeURL !== '' && runtimeURL.startsWith('http');
+if (runtimeURL === undefined || runtimeURL === null) {
+  alert("Missing valid config.json file with marloweWebServerUrl OR env keys are not set!")
+} else {
+  const restClient = mkRestClient(runtimeURL)
+  const hasValidRuntimeInstance = await restClient.healthcheck()
 
-//  2) Get a reference to the div with ID root
-const el = document.getElementById('root');
+  if (!hasValidRuntimeInstance) {
+    alert("Invalid runtime instance set!")
+  } else {
+    //  2) Get a reference to the div with ID root
+    const el = document.getElementById('root');
 
-if (!el) {
-  throw new Error('Root element not found');
-}
+    if (!el) {
+      throw new Error('Root element not found');
+    }
 
-//  3) Tell React to take control of that element
-const root = ReactDOM.createRoot(el);
+    //  3) Tell React to take control of that element
+    const root = ReactDOM.createRoot(el);
 
-// 4) Show the component on the screen
-if (hasValidRuntimeInstance && runtimeURL) {
-  root.render(<App runtimeURL={runtimeURL} />);
-} else {
-  alert("Missing valid config.json file with marloweWebServerUrl OR env keys are not set")
+    // 4) Show the component on the screen
+    root.render(<App runtimeURL={runtimeURL} />);
+  }
 }