Skip to content

Add download-beta page with live build progress #555

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
elee1766 wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add download-beta page with live build progress #555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
23c89d0
Add download-beta page with live build progress
elee1766 Jul 8, 2026
31c7c7b
Handle reset event on build page for worker retries
elee1766 Jul 8, 2026
e0267c0
Add PGO profile selection and upload to download page
elee1766 Jul 8, 2026
4faa593
Revert "Add PGO profile selection and upload to download page"
elee1766 Jul 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions src/download-beta/build/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<title>Building Caddy</title>
{{import "/old/includes/head.html"}}
{{template "head"}}
<link rel="stylesheet" href="/old/resources/css/download.css{{template "cacheBust"}}">
<link rel="stylesheet" href="/resources/css/download-beta.css{{template "cacheBust"}}">
<script src="/resources/js/download-beta-build.js{{template "cacheBust"}}"></script>
</head>
<body>
<div class="wrapper">
<header>
<div id="logo-container">
<a href="/"><img src="/old/resources/images/caddy-logo.svg" id="logo" alt="Caddy"></a>
<div id="zerossl-project">a <a href="https://zerossl.com"><img src="/old/resources/images/zerossl-logo.svg" id="zerossl-logo"></a> project</div>
</div>
{{include "/old/includes/header-nav.html"}}
</header>

<div id="build-page">
<h1 id="build-title">Building Caddy...</h1>
<p id="build-subtitle" style="color:#888;">Your custom build is in progress. This page will update automatically.</p>

<div id="build-progress">
<div id="current-step" class="stage-label">Waiting for build to start...</div>
<div class="progress-bar">
<div class="progress-bar-fill" id="progress-fill"></div>
</div>
</div>

<div id="build-log-container">
<div id="build-log"></div>
</div>

<div id="build-result" class="hidden">
<div id="result-success" class="hidden">
<h2>Build Complete</h2>
<p style="font-size:14px;color:#888;"><a id="download-link" href="#">Click here if the download did not start automatically.</a></p>
<p style="font-size:14px;color:#888;display:none;" id="darwin-note">
Run the following against the downloaded binary:
<code>xattr -d com.apple.quarantine caddy</code>
</p>
</div>
<div id="result-error" class="hidden">
<h2>Build Failed</h2>
<p id="error-message" class="text-error"></p>
<a href="/download-beta" class="blue button">Try Again</a>
</div>
</div>
</div>
</div>

{{include "/old/includes/footer.html"}}
</body>
</html>
90 changes: 90 additions & 0 deletions src/download-beta/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<title>Download Caddy</title>
{{import "/old/includes/head.html"}}
{{template "head"}}
<link rel="stylesheet" href="/old/resources/css/download.css{{template "cacheBust"}}">
<link rel="stylesheet" href="/resources/css/download-beta.css{{template "cacheBust"}}">
<script src="/resources/js/download-beta.js{{template "cacheBust"}}"></script>
</head>
<body>
<div class="wrapper">
<header>
<div id="logo-container">
<a href="/"><img src="/old/resources/images/caddy-logo.svg" id="logo" alt="Caddy"></a>
<div id="zerossl-project">a <a href="https://zerossl.com"><img src="/old/resources/images/zerossl-logo.svg" id="zerossl-logo"></a> project</div>
</div>
{{include "/old/includes/header-nav.html"}}
</header>

<div class="download-bar">
<div>
<div>
<b>Platform:</b>
<select size="1" id="platform" selected="linux-amd64">
<option value="dragonfly-amd64">Dragonfly amd64</option>
<option value="freebsd-amd64">FreeBSD amd64</option>
<option value="freebsd-arm-6">FreeBSD arm 6</option>
<option value="freebsd-arm-7">FreeBSD arm 7</option>
<option value="freebsd-arm64">FreeBSD arm64</option>
<option value="linux-amd64">Linux amd64</option>
<option value="linux-arm-5">Linux arm 5</option>
<option value="linux-arm-6">Linux arm 6</option>
<option value="linux-arm-7">Linux arm 7</option>
<option value="linux-arm64">Linux arm64</option>
<option value="linux-mips">Linux mips</option>
<option value="linux-mips64">Linux mips64</option>
<option value="linux-mips64le">Linux mips64le</option>
<option value="linux-mipsle">Linux mipsle</option>
<option value="linux-ppc64">Linux ppc64</option>
<option value="linux-ppc64le">Linux ppc64le</option>
<option value="linux-s390x">Linux s390x</option>
<option value="linux-loong64">Linux loong64</option>
<option value="darwin-amd64">macOS amd64 (Intel)</option>
<option value="darwin-arm64">macOS arm64 (Apple)</option>
<option value="openbsd-amd64">OpenBSD amd64</option>
<option value="openbsd-arm-6">OpenBSD arm 6</option>
<option value="openbsd-arm-7">OpenBSD arm 7</option>
<option value="openbsd-arm64">OpenBSD arm64</option>
<option value="windows-amd64">Windows amd64</option>
<option value="windows-arm-6">Windows arm 6</option>
<option value="windows-arm-7">Windows arm 7</option>
<option value="windows-arm64">Windows arm64</option>
</select>
</div>
</div>
<div>
<div>
<b>Standard features:</b> <span title="All official Caddy builds come with standard plugins">&#9745;&#65039;</span>
</div>
</div>
<div>
<div>
<b>Extra features:</b> <span id="package-count">0</span>
</div>
</div>
<div>
<a href="#" class="blue button" id="download">Download</a>
</div>
</div>

<input type="search" id="filter" placeholder="Filter packages and modules...">

<div class="text-center">
<span class="warning">Only choose plugins you need and trust</span>
</div>
<div class="text-center" id="darwin-warning">
<span class="warning">Run the following against the downloaded binary:
<code>xattr -d com.apple.quarantine </code>
</span>
</div>

<div id="optional-packages">
<!-- Populated by JavaScript -->
</div>
</div>

{{include "/old/includes/footer.html"}}
</body>
</html>
60 changes: 60 additions & 0 deletions src/resources/css/download-beta.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/* Download Beta - additions on top of /old/resources/css/download.css */

/* Build progress page */

#build-page {
max-width: 700px;
margin: 0 auto;
padding: 40px 20px;
}

.stage-label {
font-size: 22px;
font-weight: 600;
margin-bottom: 12px;
min-height: 1.4em;
transition: opacity 200ms ease;
}

.progress-bar {
width: 100%;
height: 8px;
background: #e8e8e8;
border-radius: 4px;
overflow: hidden;
margin: 0 0 16px;
}

.progress-bar-fill {
height: 100%;
background: rgb(25, 97, 192);
border-radius: 4px;
width: 0%;
transition: width 400ms ease;
}

#build-log-container {
background: #1a1a2e;
color: #ccc;
border-radius: 8px;
padding: 16px;
max-height: 300px;
overflow-y: auto;
font-family: 'PT Mono', monospace;
font-size: 12px;
line-height: 1.6;
margin: 16px 0;
}

#build-log {
white-space: pre-wrap;
word-break: break-all;
}

#build-result {
text-align: center;
margin-top: 24px;
}

.text-error { color: #cc0000; }
.hidden { display: none; }
132 changes: 132 additions & 0 deletions src/resources/js/download-beta-build.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
// Download Beta - Build progress page
// Connects to SSE at /api/build/{key}/events and shows live progress.
// Auto-downloads the artifact on completion.

var STEP_LABELS = {
'create_environment': 'Setting up build environment',
'initialize_module': 'Initializing Go module',
'pin_versions': 'Downloading dependencies',
'windows_resources': 'Generating Windows resources',
'tidy_module': 'Resolving modules',
'compile': 'Compiling',
'cleanup': 'Cleaning up',
};

var STEP_ORDER = [
'create_environment',
'initialize_module',
'pin_versions',
'tidy_module',
'compile',
'cleanup',
];

function getStepProgress(step) {
var idx = STEP_ORDER.indexOf(step);
if (idx === -1) return 0;
return Math.round(((idx + 1) / STEP_ORDER.length) * 100);
}

document.addEventListener('DOMContentLoaded', function() {
var params = new URLSearchParams(window.location.search);
var key = params.get('key');

if (!key) {
showError('No build key provided.');
return;
}

var downloadUrl = '/api/build/' + key + '/download';
document.getElementById('download-link').href = downloadUrl;

// connect to SSE
var evtSource = new EventSource('/api/build/' + key + '/events');
var logEl = document.getElementById('build-log');
var logContainer = document.getElementById('build-log-container');

evtSource.addEventListener('step', function(e) {
try {
var data = JSON.parse(e.data);
var label = STEP_LABELS[data.step] || data.step;
document.getElementById('current-step').textContent = label + '...';
document.getElementById('progress-fill').style.width = getStepProgress(data.step) + '%';
} catch(err) {}
});

evtSource.addEventListener('log', function(e) {
try {
var data = JSON.parse(e.data);
if (data.line) {
logEl.textContent += data.line + '\n';
logContainer.scrollTop = logContainer.scrollHeight;
}
} catch(err) {}
});

evtSource.addEventListener('reset', function(e) {
// server is retrying the build on another worker --
// clear the UI so we show fresh progress
logEl.textContent = '';
document.getElementById('current-step').textContent = 'Retrying build...';
document.getElementById('progress-fill').style.width = '0%';
document.getElementById('build-title').textContent = 'Building Caddy...';
document.getElementById('build-subtitle').textContent = 'Build worker was restarted, retrying on another server.';
});

evtSource.addEventListener('result', function(e) {
evtSource.close();
try {
var data = JSON.parse(e.data);
if (data.success) {
showSuccess(downloadUrl);
} else {
showError(data.error || 'Build failed.');
}
} catch(err) {
showError('Failed to parse build result.');
}
});

evtSource.onerror = function() {
evtSource.close();
// check if build completed while we were disconnected
fetch(downloadUrl, { method: 'HEAD' }).then(function(r) {
if (r.ok) {
showSuccess(downloadUrl);
} else {
showError('Lost connection to the build server.');
}
}).catch(function() {
showError('Lost connection to the build server.');
});
};
});

function showSuccess(downloadUrl) {
document.getElementById('build-title').textContent = 'Build Complete';
document.getElementById('build-subtitle').textContent = '';
document.getElementById('progress-fill').style.width = '100%';
document.getElementById('current-step').textContent = 'Done';

document.getElementById('build-result').classList.remove('hidden');
document.getElementById('result-success').classList.remove('hidden');

// auto-download via hidden link
var a = document.createElement('a');
a.href = downloadUrl;
a.download = '';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}

function showError(msg) {
document.getElementById('build-title').textContent = 'Build Failed';
document.getElementById('build-subtitle').textContent = '';
document.getElementById('progress-fill').style.width = '0%';
document.getElementById('current-step').textContent = '';

document.getElementById('build-result').classList.remove('hidden');
document.getElementById('result-error').classList.remove('hidden');
document.getElementById('error-message').textContent = msg;
}
Loading