docs(https): add screenshots of the NPM forms

The guide described every field in prose and left the reader to find it
in an unfamiliar admin UI. Seven screenshots now cover the path that
matters: the proxy host details, both certificate routes, and all four
steps of putting a login in front of the instance.

Captured from a real NPM 2.15.1, filled in and cancelled without saving,
so nothing in the running configuration was touched. Everything shown is
example data - mesh.example.com, meshuser, and NPM's own placeholder API
token - and the password field is deliberately left empty.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0187QpThw1Y8n7aYDjHtMHax
This commit is contained in:
MarekWoandClaude Opus 5 committed 2026-08-03 09:20:58 +02:00
1 parent 75080de12e
commit 95e8d760f5
8 files changed
+39 -1

No files matched your search

+39 -1
View File
@@ -97,6 +97,10 @@ Go to **Hosts → Proxy Hosts → Add Proxy Host** and fill in the **Details** t
| Block Common Exploits | on |
| **Websockets Support** | **on — this one is not optional** |
<p align="center">
<img src="../images/npm-01-proxy-host-details.png" width="480" alt="Nginx Proxy Manager - Add Proxy Host, Details tab filled in">
</p>
> ### Websockets Support must be on
>
> mc-webui pushes new messages to open pages over a WebSocket. Without this switch, nginx
@@ -133,6 +137,14 @@ router to this host.
Then edit the proxy host → **SSL** tab → pick the certificate from the list → enable
**Force SSL** and **HTTP/2 Support** → Save.
<p align="center">
<img src="../images/npm-02-ssl-letsencrypt.png" width="480" alt="Nginx Proxy Manager - SSL tab with Force SSL and HTTP/2 enabled">
</p>
The screenshot shows the shortcut mentioned above: **Request a new Certificate** right on
the proxy host's SSL tab, which creates the certificate and attaches it in one step
instead of visiting the Certificates page first. Leave **HSTS Enabled** off for now.
That is it. The certificate is trusted by every browser and phone with no warnings, and
NPM renews it automatically.
@@ -177,6 +189,12 @@ Then, in NPM:
NPM warns, correctly, that this is stored in plain text in its database and in a file
on the server. Certbot needs to read it at every automatic renewal, which is why it is
kept — and why scoping the token to one zone matters.
<p align="center">
<img src="../images/npm-03-ssl-dns-challenge.png" width="480" alt="Nginx Proxy Manager - Use DNS Challenge with the Cloudflare credentials box">
</p>
The token shown in that box is NPM's own placeholder, not a real one — replace it.
6. Leave *Propagation Seconds* empty to use the plugin's default. If issuing fails on a
timeout, come back and try 60.
7. Save, and give it up to a minute. The certificate appears in the list with an expiry
@@ -298,14 +316,34 @@ front of everything.
on, satisfying *any one* condition is enough, which is not what you want when the
password is the only condition. Leave **Pass Auth to Upstream** off too; mc-webui does
not read the `Authorization` header, so there is nothing to pass on
<p align="center">
<img src="../images/npm-04-access-list-details.png" width="440" alt="Nginx Proxy Manager - Add Access List, Details tab">
</p>
3. On **Authorizations**, add a username and password. Add more than one if several people
use the instance — each gets their own
<p align="center">
<img src="../images/npm-05-access-list-users.png" width="440" alt="Nginx Proxy Manager - Add Access List, Authorizations tab">
</p>
4. **Rules** is optional: it allows or denies whole IP addresses and ranges, on top of the
password
5. Save, then go to **Hosts → Proxy Hosts**, open your host's **⋮ → Edit**, and set
**Access List** to the one you just created. Save
The host's **ACCESS** column should now name your list instead of *Publicly Accessible*.
<p align="center">
<img src="../images/npm-06-proxy-host-access-list.png" width="440" alt="Nginx Proxy Manager - Edit Proxy Host with the Access List selected">
</p>
The host's **ACCESS** column should now name your list instead of *Publicly Accessible*,
and the Access Lists page counts the hosts using it:
<p align="center">
<img src="../images/npm-07-access-lists-overview.png" width="700" alt="Nginx Proxy Manager - Access Lists page showing one user and one proxy host">
</p>
Every path is covered — the interface, the API, and the websocket — so there is no way in
that skips the prompt.
Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB