Kinda works

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "build": "stencil build",
     "dev": "stencil build --dev --watch",
-    "server": "nodemon server/index.js 0.0.0.0 3000",
+    "server": "nodemon --watch server server/index.js",
     "start": "npm-run-all -p -r dev server",
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",

server/index.js

@@ -3,8 +3,9 @@ require("dotenv").config()
 const express = require('express');
 const app = express();
 
+
 app.use('/', express.static('./www'))
 console.log(process.env.API_URL);
 app.get('/apiurl', (req, res) => res.send(process.env.API_URL));
 
-app.listen(3000, '0.0.0.0');
+app.listen(process.env.PORT || 3000, process.env.HOST || 'localhost');

src/components/api.ts

@@ -0,0 +1,81 @@
+
+class ApiController {
+    token: string;
+    apiurl: string;
+    
+
+    async getApiurl() {
+        let response = await fetch(`${window.location.href}apiurl`)
+        if(await response.ok) {
+            this.apiurl = await response.text();
+            console.log(this.apiurl);
+        } else { 
+            console.log("Failed to get apiurl");
+        }
+    }
+
+
+    async login(username: string , password: string) {
+        let promise = await fetch(`http://localhost:8000/token/`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded",
+                "accept": "application/json", 
+                "access-control-allow-origin": "*",
+                "Access-Control-Allow-Methods": "POST", 
+                "Access-Control-Allow-Credentials": "true",                     
+            },
+            body: new URLSearchParams({
+                username: username, 
+                password: password
+            })
+
+        });
+        if(await promise.ok) {
+            this.token = (await promise.json())['access_token'];
+           console.log(this.token);
+        } else {
+            console.log("Failed to login");
+        }
+    }
+
+    async get(path) {
+        console.log(this.token);
+        let promise = await fetch(`${this.apiurl}${path}/`, {
+            method: "GET", 
+            headers: {
+                "accept": "application/json",       
+                "Authorization": `Bearer ${this.token}`,
+                "Access-Control-Allow-Origin": "http://localhost:8000",
+                "Access-Control-Allow-Methods": "GET", 
+                "Access-Control-Allow-Credentials": "true",
+            }
+        });
+        if(await promise.ok) {
+            let data = await promise.json();
+            return data;
+        }
+    }
+
+    async post(path){
+        let promise = await fetch(`${this.apiurl}${path}/`, {
+            method: "POST", 
+            headers: {
+                "accept": "application/json",       
+                "Authorization": `Bearer ${this.token}`,
+                "Access-Control-Allow-Origin": "http://localhost:8000",
+                "Access-Control-Allow-Methods": "POST", 
+                "Access-Control-Allow-Credentials": "true",
+            }
+        });
+        if(await promise.ok) {
+            let data = await promise.json();
+            return data;
+        }
+
+    }
+
+    
+}
+
+export const Api = new ApiController();

src/components/app-home/app-home.tsx

@@ -1,4 +1,5 @@
-import { Component, h } from '@stencil/core';
+import { Component, h} from '@stencil/core';
+import { Api } from '../api';
 
 @Component({
   tag: 'app-home',
@@ -6,6 +7,21 @@ import { Component, h } from '@stencil/core';
   shadow: true,
 })
 export class AppHome {
+  constructor() {
+    this.start();
+    
+  }
+
+  async start() {
+    await Api.login('test', 'test');
+    let data = await Api.get("/users/me");
+    console.log(data);
+    data = await Api.post("/server/dummy/start");
+    console.log(data);
+    data = await Api.post("/server/dummy/stop");
+    console.log(data);
+  }
+
   render() {
     return (
       <div class="app-home">

src/global/app.ts

@@ -1,7 +1,9 @@
+import { Api } from "../components/api"
 export default async () => {
   /**
    * The code to be executed should be placed within a default function that is
    * exported by the global script. Ensure all of the code in the global script
    * is wrapped in the function() that is exported.
    */
+  Api.getApiurl();
 };