Merge pull request #338 from dsgnr/default_host

Allow default host to be defined

Author: dsgnr

README.md

@@ -87,6 +87,7 @@ The following configuration options are available. These would be set within the
 | Name             | Required? | Default         | Notes                                                                                    |
 | ---------------- | --------- | --------------- | ---------------------------------------------------------------------------------------- |
 | API_URL          | No        | http://api:8000 | The URL of the API service if changed from the default. The scheme and port is required. |
+| DEFAULT_HOST     | No        |                 | Allows a default host address value to be prefille in the in the UI. Defaults to external/WAN IP if not set                                   |
 | DEFAULT_PORT     | No        | 443             | Allows a default port number to be prefilled in the UI                                   |
 | GOOGLE_ANALYTICS | No        |                 | Allows for a Google Analytics tracking code to be provided                               |
 

docker-compose-dev.yml

@@ -6,6 +6,7 @@ services:
       dockerfile: Dockerfile.dev
     container_name: web
     environment:
+      - DEFAULT_HOST=  # Optional, Populates a default host address value to be populataed in the in the UI input. Defaults to external/WAN IP.
       - DEFAULT_PORT=443  # Optional, Populates a default port value to be populataed in the in the UI input
       - API_URL=  # Optional, the URL of the API service. The scheme and port is required. Defaults to http://api:8000 if not set.
       - GOOGLE_ANALYTICS=  # Optional, set for Google Analytics integration

docker-compose.yml

@@ -4,6 +4,7 @@ services:
     image: ghcr.io/dsgnr/portcheckerio-web:latest
     container_name: web
     environment:
+      - DEFAULT_HOST=  # Optional, Populates a default host address value to be populataed in the in the UI input. Defaults to external/WAN IP.
       - DEFAULT_PORT=443  # Optional, Populates a default port value to be populataed in the in the UI input
       - API_URL=  # Optional, the URL of the API service. The scheme and port is required. Defaults to http://api:8000 if not set.
       - GOOGLE_ANALYTICS=  # Optional, set for Google Analytics integration

frontend/Dockerfile

@@ -1,6 +1,7 @@
 FROM node:23-alpine3.19 AS builder
-ARG API_URL DEFAULT_PORT GOOGLE_ANALYTICS
+ARG API_URL DEFAULT_HOST DEFAULT_PORT GOOGLE_ANALYTICS
 ENV API_URL=$API_URL
+ENV DEFAULT_HOST=$DEFAULT_HOST
 ENV DEFAULT_PORT=$DEFAULT_PORT
 ENV GOOGLE_ANALYTICS=$GOOGLE_ANALYTICS
 
@@ -10,8 +11,9 @@ RUN yarn install && yarn build
 
 # production environment
 FROM nginx:stable-alpine-slim AS web
-ARG API_URL DEFAULT_PORT
+ARG API_URL DEFAULT_HOST DEFAULT_PORT
 ENV API_URL=$API_URL
+ENV DEFAULT_HOST=$DEFAULT_HOST
 ENV DEFAULT_PORT=$DEFAULT_PORT
 COPY --from=builder /app/dist /usr/share/nginx/html
 COPY ./entrypoint.sh /entrypoint.sh

frontend/Dockerfile.dev

@@ -3,8 +3,9 @@ ENV PATH=$PATH:$PWD/node_modules/.bin
 
 # ALlows the user to define a default port to populate the UI.
 # Pass a desired value in your docker run/compose environment
-ARG API_URL DEFAULT_PORT
+ARG API_URL DEFAULT_HOST DEFAULT_PORT
 ENV API_URL=$API_URL
+ENV DEFAULT_HOST=$DEFAULT_HOST
 ENV DEFAULT_PORT=$DEFAULT_PORT
 
 COPY web/package.json web/yarn.lock ./

frontend/entrypoint.sh

@@ -5,6 +5,18 @@ set -e
 : ${API_URL:="http://api:8000"}
 export API_URL
 
+# `DEFAULT_HOST` is set by Webpack at container build time if the environment variable is provided.
+# If this variable is not set at that time (like for production images), we must modify the rendered HTML on container up.
+if [ -n "$DEFAULT_HOST" ]; then
+    if sed -i -E "s/(<input[^>]*id=\"host\"[^>]*value=\")[^\"]*\"/\\1${DEFAULT_HOST}\"/" /usr/share/nginx/html/index.html; then
+        echo "Updated DEFAULT_HOST value to $DEFAULT_HOST."
+    else
+        echo "An error occurred when attempting to set the DEFAULT_HOST value."
+    fi
+else
+    echo "DEFAULT_HOST is not set. No changes made."
+fi
+
 # `DEFAULT_PORT` is set by Webpack at container build time if the environment variable is provided.
 # If this variable is not set at that time (like for production images), we must modify the rendered HTML on container up.
 if [ -n "$DEFAULT_PORT" ]; then

frontend/web/package.json

@@ -18,8 +18,8 @@
         "email": "[email protected]"
     },
     "scripts": {
-        "dev": "GOOGLE_ANALYTICS=${GOOGLE_ANALYTICS} API_URL=${API_URL:-http://api:8000} DEFAULT_PORT=${DEFAULT_PORT} NODE_ENV=development webpack serve --history-api-fallback",
-        "build": "GOOGLE_ANALYTICS=${GOOGLE_ANALYTICS} DEFAULT_PORT=${DEFAULT_PORT} NODE_ENV=production webpack build",
+        "dev": "GOOGLE_ANALYTICS=${GOOGLE_ANALYTICS} API_URL=${API_URL:-http://api:8000} DEFAULT_HOST=${DEFAULT_HOST} DEFAULT_PORT=${DEFAULT_PORT} NODE_ENV=development webpack serve --history-api-fallback",
+        "build": "GOOGLE_ANALYTICS=${GOOGLE_ANALYTICS} DEFAULT_HOST=${DEFAULT_HOST} DEFAULT_PORT=${DEFAULT_PORT} NODE_ENV=production webpack build",
         "lint": "npx eslint src",
         "lint:fix": "npm run lint -- --fix",
         "prettier": "npx prettier src --check",

frontend/web/src/index.html

@@ -49,6 +49,7 @@
                                         class="form-control py-2"
                                         id="host"
                                         placeholder="Host"
+                                        value="<%= htmlWebpackPlugin.options.DEFAULT_HOST %>"
                                         pattern="^([\w-]+(\.[\w-]+)+)$"
                                         required
                                     />

frontend/web/src/js/index.js

@@ -5,7 +5,10 @@
 
 window.onload = () => {
     initializeState();
-    loadUserIp();
+
+    if (!document.getElementById("host").value) {
+        loadUserIp();
+    }
 
     const form = document.getElementById("form");
     form.addEventListener("submit", (event) => {

frontend/web/webpack.config.js

@@ -23,6 +23,7 @@ module.exports = {
             minify: {
                 collapseWhitespace: true,
             },
+            DEFAULT_HOST: process.env.DEFAULT_HOST,
             DEFAULT_PORT: process.env.DEFAULT_PORT,
             GOOGLE_ANALYTICS: process.env.GOOGLE_ANALYTICS,
         }),