.gitignore

@@ -1,4 +1,5 @@
 .*
+!.env
 !.sh
 !.gitignore
 output/

docker/.env

@@ -0,0 +1,2 @@
+PREVIEW_PORT=6565
+WEBUI_PORT=5000

docker/.sh/entrypoint.sh

@@ -43,7 +43,9 @@ start_server() {
   cat /tmp/build_logs_fifo >&2 &
   cat /tmp/build_logs_fifo2 >&2 &
 
+  PREVIEW_PORT="${PREVIEW_PORT:-3000}"
   echo "Starting preview HTTP server on port 3000..."
+  echo "Preview host port is set to: ${PREVIEW_PORT}"
   python3 -u -m http.server 3000 -d /app/output &
   SERVER_PID=$!
 

docker/docker-compose.yaml

@@ -2,10 +2,15 @@ services:
   lumeex:
     container_name: lmx
     build: ..
+    env_file:
+      - .env
+    environment:
+      - PREVIEW_PORT=${PREVIEW_PORT:-3000} # port for preview server - set it in .env file
+      - WEBUI_PORT=${WEBUI_PORT:-5000} # port for webui server - set it in .env file
     volumes:
       - ../config:/app/config  # mount config directory
       - ../output:/app/output  # mount output directory
     ports:
-      - "3000:3000"
+      - "${PREVIEW_PORT:-3000}:3000"
-      - "5000:5000"
+      - "${WEBUI_PORT:-5000}:5000"
       

src/py/webui/webui.py

@@ -30,6 +30,8 @@ app = Flask(
     static_url_path=""
 )
 
+WEBUI_PORT = int(os.getenv("WEBUI_PORT", 5000))
+
 # --- Config paths ---
 SITE_YAML = Path(__file__).resolve().parents[3] / "config" / "site.yaml"
 PHOTOS_DIR = Path(__file__).resolve().parents[3] / "config" / "photos"
@@ -72,9 +74,14 @@ def get_local_fonts(theme_name):
 def index():
     return render_template("index.html")
 
+PREVIEW_PORT = int(os.getenv("PREVIEW_PORT", 3000))
+
 @app.context_processor
 def inject_version():
-    return dict(lumeex_version=lumeex_version)
+    return dict(
+        lumeex_version=lumeex_version,
+        preview_port=PREVIEW_PORT
+    )
 
 # --- Gallery & Hero API ---
 @app.route("/gallery-editor")
@@ -488,4 +495,5 @@ def download_output_zip():
 # --- Run server ---
 if __name__ == "__main__":
     logging.info("Starting WebUI at http://0.0.0.0:5000")
+    logging.info(f"Host port is {WEBUI_PORT}")
     app.run(host="0.0.0.0", port=5000, debug=True)

src/webui/js/build.js

@@ -92,6 +92,18 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   }
 
+  // Preview Site button
+  const previewBtn = document.getElementById("preview-site-btn");
+  if (previewBtn) {
+    const previewPort = previewBtn.getAttribute("data-preview-port") || "3000";
+    previewBtn.onclick = () => {
+      const host = window.location.hostname;
+      const protocol = window.location.protocol;
+      const url = `${protocol}//${host}:${previewPort}/`;
+      window.open(url, "_blank");
+    };
+  }
+  
   // Modal close logic
   if (buildModal && buildModalClose) {
     buildModalClose.onclick = () => {

src/webui/style/style.css

@@ -416,6 +416,14 @@ h2 {
   display: flex;
 }
 
+.modal-actions-row {
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  justify-content: center; /* Center horizontally */
+  align-items: center;     /* Center vertically */
+}
+
 .flex-column {
   flex-direction: column;
 }

src/webui/template/base.html

@@ -48,7 +48,10 @@
                         <span id="build-success-modal-close" class="modal-close">&times;</span>
                         <h3>✅ Build completed!</h3>
                         <p>Your files are available in the output folder.</p>
-                        <button id="download-zip-btn" class="modal-btn">Download ZIP</button>
+                        <div class="modal-actions-row">
+                            <button id="preview-site-btn" class="modal-btn" data-preview-port="{{ preview_port }}">🔎 Preview Site</button>
+                            <button id="download-zip-btn" class="modal-btn">📦 Download ZIP</button>
+                        </div>
                         <div id="zip-loader" style="display:none;">Creating ZIP...</div>
                     </div>
                 </div>