feat: rewrite app system

.env.dist

@@ -1,3 +1,4 @@
 ARCAST_DESKTOP_ADDITIONAL_CHROME_ARGS=
 ARCAST_DESKTOP_INSTANCE_ID=
-ARCAST_DESKTOP_APPS=true
+ARCAST_DESKTOP_APPS=true
+ARCAST_DESKTOP_ALLOWED_ORIGINS="*"

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+    "java.project.sourcePaths": [
+        "apps/main/src"
+    ]
+}

Jenkinsfile

@@ -6,6 +6,7 @@ standardMakePipeline([
     'baseImage': 'reg.cadoles.com/proxy_cache/library/ubuntu:24.04',
     'dockerfileExtension': '''
     ARG GOLANG_VERSION=1.22.0
+    ARG NODEJS_VERSION=20.x
 
     ENV ANDROID_HOME=/opt/android-sdk-linux
     ENV ANDROID_SDK_ROOT=${ANDROID_HOME}
@@ -20,9 +21,14 @@ standardMakePipeline([
     RUN locale-gen en_US.UTF-8
     ENV LANG='en_US.UTF-8' LANGUAGE='en_US:en' LC_ALL='en_US.UTF-8'
 
+    # Install NodeJS
+    RUN wget -O- https://deb.nodesource.com/setup_${NODEJS_VERSION} | bash - \
+        && apt-get update -y \
+        && apt-get install -y nodejs
+
     # Install Golang
     RUN wget -O golang.tar.gz https://golang.org/dl/go${GOLANG_VERSION}.linux-amd64.tar.gz \
-    && tar -C /usr/local -xzf golang.tar.gz
+        && tar -C /usr/local -xzf golang.tar.gz
 
     # Install Android SDK/NDK
     RUN mkdir -p /opt/android-sdk-linux

Makefile

@@ -18,6 +18,8 @@ ANDROID_KEYSTORE_KEY_VALIDITY ?= 365000
 
 ANDROID_BUILD_TOOLS_VERSION ?= 34.0.0
 
+APPS := main
+
 watch: tools/modd/bin/modd deps ## Watching updated files - live reload
 	( set -o allexport && source .env && set +o allexport && tools/modd/bin/modd )
 
@@ -27,7 +29,12 @@ test: test-go ## Executing tests
 test-go: deps
 	( set -o allexport && source .env && set +o allexport && go test -v -count=1 $(GOTEST_ARGS) ./... )
 
-build: build-desktop build-android build-client ## Build artefacts
+build: build-apps build-desktop build-android build-client ## Build artefacts
+
+build-apps: $(foreach name,$(APPS),build-app-$(name))
+
+build-app-%:
+	$(MAKE) -C apps/$* build
 
 build-desktop: deps ## Build executable
 	CGO_ENABLED=0 GOARCH=$(GOARCH) go build \

apps.go

@@ -12,12 +12,14 @@ import (
 
 var (
 	DefaultApps []server.App
-	//go:embed apps/**
+	//go:embed apps/main/build/**
 	appsFS embed.FS
 )
 
 func init() {
-	defaultApps, err := loadApps("apps/*")
+	defaultApps, err := loadApps(
+		"apps/main/build",
+	)
 	if err != nil {
 		panic(errors.WithStack(err))
 	}
@@ -25,25 +27,11 @@ func init() {
 	DefaultApps = defaultApps
 }
 
-func loadApps(dirPattern string) ([]server.App, error) {
+func loadApps(appDirs ...string) ([]server.App, error) {
 	apps := make([]server.App, 0)
 
-	files, err := fs.Glob(appsFS, dirPattern)
+	for _, dir := range appDirs {
-	if err != nil {
+		rawManifest, err := fs.ReadFile(appsFS, filepath.Join(dir, "arcast-app.json"))
-		return nil, errors.WithStack(err)
-	}
-
-	for _, f := range files {
-		stat, err := fs.Stat(appsFS, f)
-		if err != nil {
-			return nil, errors.WithStack(err)
-		}
-
-		if !stat.IsDir() {
-			continue
-		}
-
-		rawManifest, err := fs.ReadFile(appsFS, filepath.Join(f, "manifest.json"))
 		if err != nil {
 			return nil, errors.WithStack(err)
 		}
@@ -54,9 +42,7 @@ func loadApps(dirPattern string) ([]server.App, error) {
 			return nil, errors.WithStack(err)
 		}
 
-		app.ID = filepath.Base(f)
+		fs, err := fs.Sub(appsFS, dir)
-
-		fs, err := fs.Sub(appsFS, "apps/"+app.ID)
 		if err != nil {
 			return nil, errors.WithStack(err)
 		}

apps/home/app.js

@@ -1,19 +0,0 @@
-fetch("/api/v1/apps")
-  .then((res) => res.json())
-  .then((res) => {
-    const defaultApp = res.data.defaultApp;
-    const apps = res.data.apps;
-
-    const container = document.createElement("div");
-    container.className = "container";
-    apps.forEach((app) => {
-      if (app.id === defaultApp || app.hidden) return;
-      const appLink = document.createElement("a");
-      appLink.className = "app-link";
-      appLink.href = "/apps/" + app.id + "/";
-      appLink.innerText = app.title["fr"];
-      container.appendChild(appLink);
-    });
-
-    document.getElementById("main").replaceWith(container);
-  });

apps/home/index.html

@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Arcast - Home</title>
-    <link rel="stylesheet" href="/apps/lib/style.css">
-    <link rel="stylesheet" href="style.css">
-    <script type="text/javascript" src="app.js" defer></script>
-</head>
-<body>
-    <div id="main" class="container">
-        <p class="text-center">Loading...</p>
-    </div>
-</body>
-</html>

apps/home/style.css

@@ -1,23 +0,0 @@
-.mt {
-    margin-top: 1em;
-    display: block;
-}
-
-.app-link {
-    display: block;
-    background: white;
-    border-radius: 5px;
-    width: 100px;
-    height: 100px;
-    box-shadow: 1px 1px 3px #ccc;
-    color: #333;
-    text-decoration: none;
-    text-align: center;
-    padding-top: 30px;
-}
-
-.app-link:hover {
-    background-color: #abdbdb;
-    box-shadow: 1px 1px 3px #aaa;
-    text-shadow: 1px 1px white;
-}

apps/lib/arcast-app.json

@@ -1,3 +1,4 @@
 {
+    "id": "lib",
     "hidden": true
 }

apps/main/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

apps/main/Makefile

@@ -0,0 +1,12 @@
+.PHONY: build
+build: node_modules
+	npm run build
+
+node_modules:
+	npm ci
+
+.env.development.local:
+	echo "REACT_APP_ARCAST_SERVER_BASE_URL=http://127.0.0.1:45555" > .env.development.local
+
+dev: .env.development.local
+	npm run start

apps/main/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "main",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@tanstack/react-query": "^5.32.0",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.96",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.23.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.9.5",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "homepage": "/apps/main"
+}

apps/main/public/arcast-app.json

@@ -1,4 +1,5 @@
 {
+    "id": "main",
     "title": {
         "fr": "Accueil",
         "en": "Home"

apps/main/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Main | Apps | Arcast</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

apps/main/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

apps/main/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

apps/main/src/App.tsx

@@ -0,0 +1,30 @@
+import React, { FunctionComponent } from "react";
+
+import { createHashRouter, RouterProvider } from "react-router-dom";
+import { Layout } from "./components/Layout/Layout";
+
+import { HomePage } from "./pages/HomePage/HomePage";
+import { ScreenSharingPage } from "./pages/ScreenSharingPage/ScreenSharingPage";
+
+const router = createHashRouter([
+  {
+    path: "/",
+    element: <Layout />,
+    children: [
+      {
+        path: "",
+        element: <HomePage />,
+      },
+      {
+        path: "/screen-sharing",
+        element: <ScreenSharingPage />,
+      },
+    ],
+  },
+]);
+
+export const App: FunctionComponent = () => {
+  return <RouterProvider router={router} />;
+};
+
+export default App;

apps/main/src/api/arcast.ts

@@ -0,0 +1,40 @@
+import { useQuery } from "@tanstack/react-query";
+
+const BASE_URL = process.env.REACT_APP_ARCAST_SERVER_BASE_URL ?? ""
+
+export interface AppInfos {
+    defaultApp: string;
+    apps: App[];
+}
+
+export interface App {
+    id: string;
+    title: { [lang: string]: string };
+    description: { [lang: string]: string };
+    icon: string;
+    hidden: boolean;
+}
+
+export const useAppInfos = () => {
+    return useQuery({
+        queryKey: ["appsInfos"],
+        queryFn: getAppInfos,
+        select: (appInfos) => appInfos ?? { apps: [], defaultApp: "main" }
+    })
+}
+
+export async function getAppInfos() {
+    const response = await fetch(`${BASE_URL}/api/v1/apps`);
+    const result = await response.json();
+    const appInfos = result.data as AppInfos;
+    return appInfos;
+}
+
+
+export interface Status {
+
+}
+
+export async function getStatus() {
+
+}

apps/main/src/components/Layout/Layout.module.css

@@ -0,0 +1,11 @@
+.root {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.container {
+    width: 50%;
+}
+

apps/main/src/components/Layout/Layout.tsx

@@ -0,0 +1,15 @@
+import { FunctionComponent, PropsWithChildren } from "react";
+import styles from "./Layout.module.css";
+import { Outlet } from "react-router-dom";
+
+export interface LayoutProps extends PropsWithChildren {}
+
+export const Layout: FunctionComponent<LayoutProps> = ({ children }) => {
+  return (
+    <div className={styles.root}>
+      <div className={styles.container}>
+        <Outlet />
+      </div>
+    </div>
+  );
+};

apps/main/src/components/Panel/Panel.module.css

@@ -0,0 +1,10 @@
+.root {
+    display: block;
+    background-color: #fff;
+    border-radius: 15px;
+    box-shadow: 10px 10px 10px #33333361;
+    position: relative;
+    padding: 30px 30px 30px 30px;
+    min-width: 33%;
+    color: #333;
+}

apps/main/src/components/Panel/Panel.tsx

@@ -0,0 +1,7 @@
+import { FunctionComponent, PropsWithChildren } from "react";
+import styles from "./Panel.module.css";
+export interface PanelProps extends PropsWithChildren {}
+
+export const Panel: FunctionComponent<PanelProps> = ({ children }) => {
+  return <div className={styles.root}>{children}</div>;
+};

apps/main/src/components/Tabs/Tabs.module.css

@@ -0,0 +1,3 @@
+.root {
+   
+}

apps/main/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,7 @@
+import { FunctionComponent, PropsWithChildren } from "react";
+import styles from "./Tabs.module.css";
+export interface TabsProps extends PropsWithChildren {}
+
+export const Tabs: FunctionComponent<TabsProps> = ({ children }) => {
+  return <div className={styles.root}>Tabs</div>;
+};

apps/main/src/index.css

@@ -0,0 +1,105 @@
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
+  width: 100%;
+  height: 100%;
+  background: rgb(76, 96, 188);
+  background: linear-gradient(
+    415deg,
+    rgba(4, 168, 243, 1),
+    rgb(76, 136, 188, 1),
+    rgba(76, 96, 188, 1),
+    rgb(115, 76, 188, 1),
+    rgb(87, 76, 188, 1)
+  );
+  background-size: 400% 400%;
+  animation: gradient 15s ease infinite;
+}
+
+@keyframes gradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
+#root {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ol,
+ul {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.panel {
+  display: block;
+  background-color: #fff;
+  border-radius: 5px;
+  padding: 10px 20px;
+  box-shadow: 2px 2px #3333331d;
+}
+
+.panel p, .panel ul {
+  margin-top: 10px;
+}
+
+.text-centered {
+  text-align: center;
+}
+
+.text-italic {
+  font-style: italic;
+}
+
+.text-small {
+  font-size: 0.8em;
+}
+
+.fullwidth {
+  width: 100%;
+}

apps/main/src/index.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+const root = ReactDOM.createRoot(
+  document.getElementById("root") as HTMLElement
+);
+root.render(
+  <React.StrictMode>
+    <QueryClientProvider client={queryClient}>
+      <App />
+    </QueryClientProvider>
+  </React.StrictMode>
+);

apps/main/src/pages/HomePage/HomePage.module.css

@@ -0,0 +1,3 @@
+.root {
+  height: 100%;
+}

apps/main/src/pages/HomePage/HomePage.tsx

@@ -0,0 +1,19 @@
+import { FunctionComponent } from "react";
+import styles from "./HomePage.module.css";
+import { Panel } from "../../components/Panel/Panel";
+import { Tabs } from "../../components/Tabs/Tabs";
+import { useAppInfos } from "../../api/arcast";
+
+export const HomePage: FunctionComponent = () => {
+  const query = useAppInfos();
+
+  console.log(query);
+
+  return (
+    <div className={styles.root}>
+      <Panel>
+        <Tabs></Tabs>
+      </Panel>
+    </div>
+  );
+};

apps/main/src/pages/ScreenSharingPage/ScreenSharingPage.module.css

@@ -0,0 +1,3 @@
+.root {
+  
+}

apps/main/src/pages/ScreenSharingPage/ScreenSharingPage.tsx

@@ -0,0 +1,6 @@
+import { FunctionComponent } from "react";
+import styles from "./ScreenSharingPage.module.css";
+
+export const ScreenSharingPage: FunctionComponent = () => {
+  return <div className={styles.root}>Screen sharing page</div>;
+};

apps/main/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

apps/main/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

apps/main/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}

apps/remote-control/arcast-app.json

@@ -1,4 +1,5 @@
 {
+    "id": "remote-control",
     "title": {
         "fr": "Contrôle à distance",
         "en": "Remote control"

apps/screen-sharing/arcast-app.json

@@ -1,4 +1,5 @@
 {
+    "id": "screen-sharing",
     "title": {
         "fr": "Partage d'écran",
         "en": "Screen sharing"

cmd/mobile/main.go

@@ -82,6 +82,7 @@ func main() {
 				server.WithTLSCertificate(&cert),
 				server.WithAddress(conf.HTTP.Address),
 				server.WithTLSAddress(conf.HTTPS.Address),
+				server.WithAllowedOrigins(conf.AllowedOrigins...),
 			)
 
 			if err := server.Start(); err != nil {

doc/configuration.md

@@ -44,7 +44,7 @@ Voici un exemple commenté du fichier de configuration:
     // Activer/désactiver les applications embarquées
     "enabled": true,
     // Application par défaut
-    "defaultApp": "home"
+    "defaultApp": "main"
   }
 }
 ```

go.mod

@@ -4,6 +4,7 @@ go 1.21.4
 
 require (
 	gioui.org v0.4.1
+	github.com/davecgh/go-spew v1.1.1
 	github.com/gioui-plugins/gio-plugins v0.0.0-20230625001848-8f18aae6c91c
 	github.com/go-chi/cors v1.2.1
 	github.com/gorilla/websocket v1.5.1

internal/command/player/run.go

@@ -61,6 +61,12 @@ func Run() *cli.Command {
 				EnvVars: []string{"ARCAST_DESKTOP_WINDOW_WIDTH"},
 				Value:   defaults.Width,
 			},
+
+			&cli.StringSliceFlag{
+				Name:    "allowed-origins",
+				EnvVars: []string{"ARCAST_DESKTOP_ALLOWED_ORIGINS"},
+				Value:   cli.NewStringSlice(),
+			},
 		},
 		Action: func(ctx *cli.Context) error {
 			configFile := ctx.String("config")
@@ -119,6 +125,10 @@ func Run() *cli.Command {
 				conf.HTTPS.Address = ctx.String("tls-address")
 			}
 
+			if ctx.IsSet("allowed-origins") {
+				conf.AllowedOrigins = ctx.StringSlice("allowed-origins")
+			}
+
 			server := server.New(browser,
 				server.WithInstanceID(conf.InstanceID),
 				server.WithAppsEnabled(conf.Apps.Enabled),
@@ -127,6 +137,7 @@ func Run() *cli.Command {
 				server.WithAddress(conf.HTTP.Address),
 				server.WithTLSAddress(conf.HTTPS.Address),
 				server.WithTLSCertificate(&cert),
+				server.WithAllowedOrigins(conf.AllowedOrigins...),
 			)
 
 			if err := server.Start(); err != nil {

modd.conf

@@ -1,6 +1,9 @@
+{
+    prep: make build-apps
+}
+
 **/*.go
 pkg/server/templates/**.gotmpl
-apps/**
 modd.conf
 .env {
     prep: make build-client

pkg/config/config.go

@@ -12,10 +12,11 @@ import (
 )
 
 type Config struct {
-	InstanceID string      `json:"instanceId"`
+	InstanceID     string      `json:"instanceId"`
-	HTTP       HTTPConfig  `json:"http"`
+	HTTP           HTTPConfig  `json:"http"`
-	HTTPS      HTTPSConfig `json:"https"`
+	HTTPS          HTTPSConfig `json:"https"`
-	Apps       AppsConfig  `json:"apps"`
+	Apps           AppsConfig  `json:"apps"`
+	AllowedOrigins []string    `json:"allowedOrigins"`
 }
 
 type HTTPConfig struct {
@@ -95,7 +96,8 @@ func LoadOrCreate(ctx context.Context, filename string, conf *Config, funcs ...T
 
 func DefaultConfig() *Config {
 	return &Config{
-		InstanceID: server.NewRandomInstanceID(),
+		InstanceID:     server.NewRandomInstanceID(),
+		AllowedOrigins: []string{},
 		HTTP: HTTPConfig{
 			Address: ":45555",
 		},
@@ -108,7 +110,7 @@ func DefaultConfig() *Config {
 		},
 		Apps: AppsConfig{
 			Enabled:    true,
-			DefaultApp: "home",
+			DefaultApp: "main",
 		},
 	}
 }

pkg/server/http.go

@@ -36,17 +36,24 @@ func init() {
 func (s *Server) startWebServers(ctx context.Context) error {
 	router := chi.NewRouter()
 
+	allowedOrigins := make([]string, 0)
+
 	if s.appsEnabled {
 		ips, err := network.GetLANIPv4Addrs()
 		if err != nil {
 			return errors.WithStack(err)
 		}
 
-		allowedOrigins := make([]string, len(ips))
+		for _, ip := range ips {
-		for idx, ip := range ips {
+			allowedOrigins = append(allowedOrigins, fmt.Sprintf("http://%s:%d", ip, s.port))
-			allowedOrigins[idx] = fmt.Sprintf("http://%s:%d", ip, s.port)
 		}
+	}
 
+	if len(s.allowedOrigins) > 0 {
+		allowedOrigins = append(allowedOrigins, s.allowedOrigins...)
+	}
+
+	if len(allowedOrigins) > 0 {
 		router.Use(cors.Handler(cors.Options{
 			AllowedOrigins:   allowedOrigins,
 			AllowedMethods:   []string{"GET", "POST", "PUT", "DELETE", "OPTIONS"},

pkg/server/options.go

@@ -26,6 +26,7 @@ type Options struct {
 	EnableServiceDiscovery bool
 	EnableApps             bool
 	DefaultApp             string
+	AllowedOrigins         []string
 	Apps                   []App
 }
 
@@ -39,6 +40,7 @@ func NewOptions(funcs ...OptionFunc) *Options {
 		EnableServiceDiscovery: true,
 		EnableApps:             false,
 		DefaultApp:             "",
+		AllowedOrigins:         make([]string, 0),
 		Apps:                   make([]App, 0),
 	}
 
@@ -67,6 +69,12 @@ func WithApps(apps ...App) OptionFunc {
 	}
 }
 
+func WithAllowedOrigins(origins ...string) OptionFunc {
+	return func(opts *Options) {
+		opts.AllowedOrigins = origins
+	}
+}
+
 func WithAddress(addr string) OptionFunc {
 	return func(opts *Options) {
 		opts.Address = addr

pkg/server/server.go

@@ -23,9 +23,10 @@ type Server struct {
 
 	serviceDiscoveryEnabled bool
 
-	appsEnabled bool
+	appsEnabled    bool
-	defaultApp  string
+	defaultApp     string
-	apps        []App
+	allowedOrigins []string
+	apps           []App
 
 	ctx    context.Context
 	cancel context.CancelFunc
@@ -85,6 +86,7 @@ func New(browser browser.Browser, funcs ...OptionFunc) *Server {
 		tlsAddress:              opts.TLSAddress,
 		tlsCert:                 opts.TLSCertificate,
 		appsEnabled:             opts.EnableApps,
+		allowedOrigins:          opts.AllowedOrigins,
 		defaultApp:              opts.DefaultApp,
 		apps:                    opts.Apps,
 		serviceDiscoveryEnabled: opts.EnableServiceDiscovery,

pkg/server/templates/idle.html.gotmpl

@@ -13,9 +13,9 @@
       }
 
       body {
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-          Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+          "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
-          "Segoe UI Symbol";
+          "Helvetica Neue", sans-serif;
         width: 100%;
         height: 100%;
         background: rgb(76, 96, 188);