Improvements for Docker parametrization (#398)

Co-authored-by: keul <[email protected]>
Co-authored-by: noelalonso <[email protected]>

Dockerfile

@@ -1,23 +1,27 @@
+ARG pathPrefix="/"
+
 FROM node:lts-alpine3.18 AS build-step
 ARG DYNAMIC_CONFIG=true
+ARG historyMode="history"
+ARG pathPrefix
 
 WORKDIR /app
 COPY package*.json ./
 RUN npm install
 COPY . .
-RUN \[ "${DYNAMIC_CONFIG}" == "true" \] && sed -i 's/<!-- <script defer="defer" src=".\/config.js"><\/script> -->/<script defer="defer" src=".\/config.js"><\/script>/g' public/index.html
-RUN npm run build
+RUN \[ "${DYNAMIC_CONFIG}" == "true" \] && sed -i "s|<!-- <script defer=\"defer\" src=\"/config.js\"></script> -->|<script defer=\"defer\" src=\"${pathPrefix}config.js\"></script>|g" public/index.html
+RUN npm run build -- --historyMode="${historyMode}" --pathPrefix="${pathPrefix}"
 
 
 FROM nginx:1-alpine-slim
+ARG pathPrefix
 
-COPY --from=build-step /app/dist /usr/share/nginx/html
-COPY ./config.schema.json /etc/nginx/conf.d/config.schema.json
+RUN apk add jq pcre-tools
 
-# change default port to 8080
-RUN apk add jq pcre-tools && \
-    sed -i 's/\s*listen\s*80;/    listen 8080;/' /etc/nginx/conf.d/default.conf && \
-    sed -i 's/\s*location \/ {/    location \/ {\n        try_files $uri $uri\/ \/index.html;/' /etc/nginx/conf.d/default.conf
+COPY ./config.schema.json /etc/nginx/conf.d/config.schema.json
+COPY --from=build-step /app/dist /usr/share/nginx/html
+COPY --from=build-step /app/docker/default.conf /etc/nginx/conf.d/default.conf
+RUN sed -i "s|<pathPrefix>|${pathPrefix}|" /etc/nginx/conf.d/default.conf
 
 EXPOSE 8080
 

README.md

@@ -242,21 +242,51 @@ STAC Browser supports some non-standardized extensions to the STAC specification
 
 ## Docker
 
-When building the Dockerfile, you can add the [`catalogUrl`](docs/options.md#catalogurl) 
-as a [build argument](https://docs.docker.com/engine/reference/commandline/build/#set-build-time-variables---build-arg). For example:
+Building the Dockerfile without changing any build options:
 
 ```bash
-docker build -t stac-browser:v1 --build-arg catalogURL=https://planetarycomputer.microsoft.com/api/stac/v1/ .
+docker build -t stac-browser:v1 .
 ```
 
-If more arguments need to be passed to `npm run build`, you can add them to the Dockerfile as needed.
+Run the container for a specific URL:
 
-To run the container:
+```bash
+docker run -p 8080:8080 -e SB_catalogUrl="https://earth-search.aws.element84.com/v1/" stac-browser:v1
+```
+
+STAC Browser is now available at `http://localhost:8080`
+
+---
+
+You can pass further options to STAC Browser to customize it to your needs.
+
+The build-only options
+[`pathPrefix`](docs/options.md#pathprefix) and [`historyMode`](docs/options.md#historymode)
+can be provided as a
+[build argument](https://docs.docker.com/engine/reference/commandline/build#set-build-time-variables---build-arg)
+when building the Dockerfile.
+
+For example:
 
 ```bash
-docker run -p 8080:8080 stac-browser:v1
+docker build -t stac-browser:v1 --build-arg pathPrefix="/browser/" --build-arg historyMode=hash .
 ```
 
+All other options, except the ones that are explicitly excluded from CLI/ENV usage,
+can be passed as environment variables when running the container.
+For example, to run the container with a pre-defined
+[`catalogUrl`](docs/options.md#catalogurl) and [`catalogTitle`](docs/options.md#catalogtitle):
+
+```bash
+docker run -p 8080:8080 -e SB_catalogUrl="https://earth-search.aws.element84.com/v1/" -e SB_catalogTitle="Earth Search" -e pathPrefix="/browser/" stac-browser:v1
+```
+
+Please note that if given the `pathPrefix` also needs to be repeated in the `docker run` command.
+
+If you want to pass all the other arguments to `npm run build` directly, you can modify to the Dockerfile as needed.
+
+STAC browser is now available at `http://localhost:8080/browser`
+
 ## Contributing
 
 We are happy to review and accept Pull Requests.

docker/default.conf

@@ -0,0 +1,15 @@
+server {
+    listen 8080;
+    server_name  localhost;
+
+    location <pathPrefix> {
+        alias  /usr/share/nginx/html/;
+        index  index.html;
+        try_files $uri $uri/ <pathPrefix>index.html;
+    }
+
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}

public/index.html

@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta id="meta-description" name="description" content="">
-    <!-- <script defer="defer" src="./config.js"></script> -->
+    <!-- <script defer="defer" src="/config.js"></script> -->
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>