Merge pull request #303 from dsgnr/fix_301

Allow API service hostname to be defined

README.md

@@ -30,7 +30,7 @@ API routes and specification can be found at [portchecker.io/docs](https://portc
 ### Standalone
 
 #### Web
-> [!NOTE]  
+> [!NOTE]
 > Uses [Node](https://nodejs.org/) version 23 and newer. Requires [Yarn](https://classic.yarnpkg.com/en/)
 
 Bringing up the UI outside of Docker;
@@ -43,7 +43,7 @@ $ yarn dev
 portchecker.io front-end be running at [http://0.0.0.0:8080](http://0.0.0.0:8080).
 
 #### API
-> [!NOTE]  
+> [!NOTE]
 > Uses Python 3.12. The Python environment uses [Poetry](https://pypi.org/project/poetry/) for package management. This must be installed.
 
 ~~~
@@ -64,7 +64,7 @@ portchecker.io front-end will be running at [http://0.0.0.0:8080](http://0.0.0.0
 
 ## Production
 ### Docker
-> [!NOTE]  
+> [!NOTE]
 > Uses [ghcr.io/dsgnr/portcheckerio-web:latest](https://github.com/dsgnr/portchecker.io/pkgs/container/portcheckerio-web) and [ghcr.io/dsgnr/portcheckerio-api:latest](https://github.com/dsgnr/portchecker.io/pkgs/container/portcheckerio-api).
 
 ~~~
@@ -77,10 +77,11 @@ portchecker.io front-end will be running at [http://0.0.0.0:8080](http://0.0.0.0
 The following configuration options are available. These would be set within the Docker compose files, or in your environment if you're using portchecker standalone.
 
 ### Web
-| Name             | Required? | Default | Notes                                                      |
-|------------------|-----------|---------|------------------------------------------------------------|
-| 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 |
+| Name             | Required? | Default         | Notes                                                                                    |
+|------------------|-----------|-----------------|------------------------------------------------------------------------------------------|
+| DEFAULT_PORT     | No        | http://api:8000 | The URL of the API service if changed from the default. The scheme and port is required. |
+| 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                               |
 
 ### API
 | Name          | Required? | Default | Notes                                                                                                                                                                              |
@@ -139,6 +140,3 @@ The site is located on Digital Ocean. You can use the following referral link to
 ## License
 
 See the [LICENSE](LICENSE) file for more details on terms and conditions.
-
-
-

docker-compose-dev.yml

@@ -7,6 +7,7 @@ services:
     container_name: web
     environment:
       - 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
     ports:
       - 8080:8080

docker-compose.yml

@@ -5,6 +5,7 @@ services:
     container_name: web
     environment:
       - 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
     ports:
       - 8080:80

frontend/Dockerfile

@@ -1,5 +1,6 @@
 FROM node:23-alpine3.19 AS builder
-ARG DEFAULT_PORT GOOGLE_ANALYTICS
+ARG API_URL DEFAULT_PORT GOOGLE_ANALYTICS
+ENV API_URL=$API_URL
 ENV DEFAULT_PORT=$DEFAULT_PORT
 ENV GOOGLE_ANALYTICS=$GOOGLE_ANALYTICS
 
@@ -9,10 +10,11 @@ RUN yarn install && yarn build
 
 # production environment
 FROM nginx:stable-alpine-slim AS web
-ARG DEFAULT_PORT
+ARG API_URL DEFAULT_PORT
+ENV API_URL=$API_URL
 ENV DEFAULT_PORT=$DEFAULT_PORT
 COPY --from=builder /app/dist /usr/share/nginx/html
 COPY ./entrypoint.sh /entrypoint.sh
-COPY ./nginx/nginx.conf /etc/nginx/conf.d/default.conf
+COPY ./nginx/nginx.conf.template /etc/nginx/conf.d/default.conf.template
 EXPOSE 80
 CMD ["sh", "/entrypoint.sh"]

frontend/Dockerfile.dev

@@ -3,7 +3,8 @@ 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 DEFAULT_PORT
+ARG API_URL DEFAULT_PORT
+ENV API_URL=$API_URL
 ENV DEFAULT_PORT=$DEFAULT_PORT
 
 COPY web/package.json web/yarn.lock ./

frontend/entrypoint.sh

@@ -1,6 +1,10 @@
 #!/usr/bin/env sh
 set -e
 
+# Export API_URL so envsubst can use it
+: ${API_URL:="http://api:8000"}
+export API_URL
+
 # `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
@@ -13,4 +17,7 @@ else
     echo "DEFAULT_PORT is not set. No changes made."
 fi
 
+# Updates the `API_URL` variable in the Nginx config. Defaults to http://api:8000 if not set.
+envsubst "\$API_URL" < /etc/nginx/conf.d/default.conf.template > /etc/nginx/conf.d/default.conf
+
 exec nginx -g "daemon off;"

frontend/nginx/nginx.conf → frontend/nginx/nginx.conf.template

@@ -2,7 +2,7 @@ server {
     listen 80;
 
     location ~ ^/(api|docs) {
-        proxy_pass http://api:8000;
+        proxy_pass $API_URL;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

frontend/web/package.json

@@ -1,43 +1,43 @@
 {
-  "name": "portchecker.io",
-  "version": "3.0.0",
-  "description": "Single page site for portchecker.io",
-  "homepage": "https://github.com/dsgnr/portchecker.io#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/dsgnr/portchecker.io.git"
-  },
-  "author": "dsgnr <email@danielhand.io>",
-  "license": "MIT",
-  "engines": {
-    "node": ">=23",
-    "npm": ">=10"
-  },
-  "bugs": {
-    "url": "https://github.com/dsgnr/portchecker.io/issues",
-    "email": "email@danielhand.io"
-  },
-  "scripts": {
-    "dev": "GOOGLE_ANALYTICS=${GOOGLE_ANALYTICS} 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",
-    "lint": "npx eslint src",
-    "lint:fix": "npm run lint -- --fix",
-    "prettier": "npx prettier src --check",
-    "prettier:fix": "npm run prettier -- --write"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.15.0",
-    "copy-webpack-plugin": "^12.0.2",
-    "css-loader": "^7.1.2",
-    "css-minimizer-webpack-plugin": "^7.0.0",
-    "eslint": "^9.19.0",
-    "globals": "^15.12.0",
-    "html-webpack-plugin": "^5.6.0",
-    "mini-css-extract-plugin": "^2.9.0",
-    "prettier": "^3.4.2",
-    "uglifyjs-webpack-plugin": "^2.2.0",
-    "webpack": "^5.96.1",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^5.2.0"
-  }
+    "name": "portchecker.io",
+    "version": "3.0.0",
+    "description": "Single page site for portchecker.io",
+    "homepage": "https://github.com/dsgnr/portchecker.io#readme",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/dsgnr/portchecker.io.git"
+    },
+    "author": "dsgnr <email@danielhand.io>",
+    "license": "MIT",
+    "engines": {
+        "node": ">=23",
+        "npm": ">=10"
+    },
+    "bugs": {
+        "url": "https://github.com/dsgnr/portchecker.io/issues",
+        "email": "email@danielhand.io"
+    },
+    "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",
+        "lint": "npx eslint src",
+        "lint:fix": "npm run lint -- --fix",
+        "prettier": "npx prettier src --check",
+        "prettier:fix": "npm run prettier -- --write"
+    },
+    "devDependencies": {
+        "@eslint/js": "^9.15.0",
+        "copy-webpack-plugin": "^12.0.2",
+        "css-loader": "^7.1.2",
+        "css-minimizer-webpack-plugin": "^7.0.0",
+        "eslint": "^9.19.0",
+        "globals": "^15.12.0",
+        "html-webpack-plugin": "^5.6.0",
+        "mini-css-extract-plugin": "^2.9.0",
+        "prettier": "^3.4.2",
+        "uglifyjs-webpack-plugin": "^2.2.0",
+        "webpack": "^5.96.1",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^5.2.0"
+    }
 }

frontend/web/webpack.config.js

@@ -3,7 +3,7 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
 const HtmlWebpackPlugin = require("html-webpack-plugin");
-const CopyWebpackPlugin = require('copy-webpack-plugin');
+const CopyWebpackPlugin = require("copy-webpack-plugin");
 
 module.exports = {
     entry: {
@@ -32,19 +32,17 @@ module.exports = {
         }),
 
         new CopyWebpackPlugin({
-            patterns: [
-                { from: 'src/assets' }
-            ]
-        })
+            patterns: [{ from: "src/assets" }],
+        }),
     ],
     devServer: {
         port: 8080,
         proxy: [
             {
-                context: ['/api', '/docs'],
-                target: 'http://api:8000',
+                context: ["/api", "/docs"],
+                target: process.env.API_URL,
             },
-        ]
+        ],
     },
     optimization: {
         minimize: true,