feat: add support for configuring the base URL (#248)

Dockerfile

@@ -1,6 +1,32 @@
+# Use a UUID as placeholder value to have a unique string to replace. 
+ARG BASE_URL_PLACEHOLDER=189b303e-37a0-4f6f-8c0a-50333bc3c36e
+
 FROM docker.io/library/node:16.13.2 as build
+
+ARG BASE_URL_PLACEHOLDER
+
+COPY package.json package-lock.json ./
+RUN npm install --frozen-lockfile
+
 COPY ./ ./
-RUN npm install && npm run build
+# Set the React PUBLIC_URL to our placeholder value so that
+# that it can easily be replaced with the actual base URL
+# in the entrypoint script below.
+RUN PUBLIC_URL=${BASE_URL_PLACEHOLDER} npm run build
+
+FROM docker.io/library/nginx:1.21.5-alpine as runtime
+
+ARG BASE_URL_PLACEHOLDER
+# The base Nginx image automatically executes all shell scripts 
+# within the /docker-entrypoint.d/ directory ("entrypoint scripts")
+# when the container is started. See the relevant logic at
+# https://github.com/nginxinc/docker-nginx/blob/master/entrypoint/docker-entrypoint.sh#L16.
+ARG ENTRYPOINT_SCRIPT=/docker-entrypoint.d/set-public-url.sh
 
-FROM docker.io/library/nginx:1.21.5-alpine
 COPY --from=build /build /usr/share/nginx/html/
+# Add an entrypoint script that replaces all occurences of the 
+# placeholder value by the configured base URL. If no base URL
+# is configured we assume the application is running at '/'.
+RUN echo "find /usr/share/nginx/html/ -type f -print0 | xargs -0 sed -i \"s|${BASE_URL_PLACEHOLDER}|\${BASE_URL}|g\"" > $ENTRYPOINT_SCRIPT && chmod +x $ENTRYPOINT_SCRIPT
+
+FROM runtime

README.md

@@ -62,6 +62,13 @@ and then go to [http://localhost:8000](http://localhost:8000).
 The `asyncapi/studio` image is based on the official `nginx` image.
 Please refer to the [Nginx documentation](https://registry.hub.docker.com/_/nginx/) to learn how to e.g. pass a custom `nginx` configuration or plug in additional volumes.
 
+In some hosting scenarios (e.g. Docker Compose, Kubernetes) the container might not be exposed at the root path of the host.
+Set the environment variable `BASE_URL` to let AsyncAPI Studio know from where to resolve static assets:
+
+```bash
+docker run -it -p 8000:80 -e BASE_URL=/a/custom/path asyncapi/studio
+```
+
 ## Development
 
 1. Setup project by installing dependencies `npm install`

public/index.html

@@ -16,15 +16,15 @@
     <meta property="og:url" content="https://studio.asyncapi.com/">
     <meta property="og:title" content="AsyncAPI Studio">
     <meta property="og:description" content="Studio for AsyncAPI specification, where you can validate, view preview documentation, and generate templates from AsyncAPI document.">
-    <meta property="og:image" content="/img/meta-studio-og-image.jpg">
+    <meta property="og:image" content="%PUBLIC_URL%/img/meta-studio-og-image.jpg">
 
     <!-- Twitter -->
     <meta property="twitter:card" content="summary_large_image">
     <meta property="twitter:site" content="@AsyncAPISpec">
     <meta property="twitter:domain" content="https://studio.asyncapi.com">
     <meta property="twitter:title" content="AsyncAPI Studio">
     <meta property="twitter:description" content="Studio for AsyncAPI specification, where you can validate, view preview documentation, and generate templates from AsyncAPI document.">
-    <meta property="twitter:image" content="/img/meta-studio-og-image.jpg">
+    <meta property="twitter:image" content="%PUBLIC_URL%/img/meta-studio-og-image.jpg">
 
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon-194x194.png" />
 
@@ -38,7 +38,7 @@
         <div>
           <img
             class="inline-block h-24"
-            src="/img/logo-horizontal-white.svg"
+            src="%PUBLIC_URL%/img/logo-horizontal-white.svg"
             alt="AsyncAPI Logo"
           />
           <span class="inline-block text-xl text-pink-500 font-normal italic tracking-wide -ml-2 transform translate-y-1">

src/components/Toolbar.tsx

@@ -12,7 +12,7 @@ export const Toolbar: React.FunctionComponent<ToolbarProps> = () => {
             <div className="flex-shrink-0">
               <img
                 className="inline-block h-20"
-                src="/img/logo-horizontal-white.svg"
+                src={`${process.env.PUBLIC_URL}/img/logo-horizontal-white.svg`}
                 alt="AsyncAPI Logo"
               />
               <span className="inline-block text-xl text-pink-500 font-normal italic tracking-wide -ml-1 transform translate-y-0.5">

src/index.tsx

@@ -10,14 +10,14 @@ window.MonacoEnvironment = window.MonacoEnvironment || {
   getWorkerUrl(_: string, label: string) {
     // for json worker
     if (label === 'json') {
-      return '../../js/monaco/json.worker.bundle.js';
+      return `${process.env.PUBLIC_URL}/js/monaco/json.worker.bundle.js`;
     }
     // for yaml worker
     if (label === 'yaml' || label === 'yml') {
-      return '../../js/monaco/yaml.worker.bundle.js';
+      return `${process.env.PUBLIC_URL}/js/monaco/yaml.worker.bundle.js`;
     }
     // for core editor worker
-    return '../../js/monaco/editor.worker.bundle.js';
+    return `${process.env.PUBLIC_URL}/js/monaco/editor.worker.bundle.js`;
   },
 };