[GH-ISSUE #170] Support Request: White screen and console errors for web UI

kerem commented

2026-03-15 12:38:16 +03:00

Owner

Originally created by @mbomb007 on GitHub (Sep 26, 2023).
Original GitHub issue: https://github.com/axllent/mailpit/issues/170

The issue

I'm trying to replace Mailhog with Mailpit. I installed it using the script.

sudo bash < <(curl -sL https://raw.githubusercontent.com/axllent/mailpit/develop/install.sh)

I followed the steps here for how to enable Mailpit as a service. Honestly, this should be added to the Wiki.

Then, after stopping Mailhog and starting the Mailpit service (which starts successfully) and visiting the UI, I get these errors in the browser console, and I only see a white screen.

Refused to apply style from 'https://myweburl.example.com/dist/app.css?v1.9.2' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
GET https://myweburl.example.com/dist/app.js?v1.9.2 net::ERR_ABORTED 404 (Not Found)
Refused to execute script from 'https://myweburl.example.com/dist/app.js?v1.9.2' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
GET https://myweburl.example.com/favicon.svg 404 (Not Found)

I don't know where those files are on the system, or how I need to configure Mailpit or Nginx to get them to load.

Sending mail works (I think). I don't see any errors when I send a test email.

Configuration info

PHP-FPM

The PHP config:

php_admin_value[sendmail_path] = /usr/local/bin/mailpit sendmail -t test@myweburl.example.com

In the above, I basically just replaced mailhog with mailpit.

Nginx

    ## Mailpit
    location ^~ /mailpit/ {
        proxy_pass http://localhost:8025/;
        proxy_set_header    Host             $host;
        proxy_set_header    X-Real-IP        $remote_addr;
        proxy_set_header    X-Forwarded-For  $proxy_add_x_forwarded_for;
        proxy_set_header    X-Client-Verify  SUCCESS;
        proxy_set_header    X-Client-DN      $ssl_client_s_dn;
        proxy_set_header    X-SSL-Subject    $ssl_client_s_dn;
        proxy_set_header    X-SSL-Issuer     $ssl_client_i_dn;
        proxy_read_timeout 1800;
        proxy_connect_timeout 1800;
        chunked_transfer_encoding on;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
        proxy_redirect off;
        proxy_buffering off;
    }

System info

Ubuntu 20.04
Nginx 1.18.0
PHP 8.2
Mailpit 1.9.2

Other notes

This issue looks similar to this one, but it's not exactly the same: https://github.com/axllent/mailpit/issues/137

Originally created by @mbomb007 on GitHub (Sep 26, 2023). Original GitHub issue: https://github.com/axllent/mailpit/issues/170 ## The issue I'm trying to replace Mailhog with Mailpit. I installed it using the script. ```bash sudo bash < <(curl -sL https://raw.githubusercontent.com/axllent/mailpit/develop/install.sh) ``` I followed the steps here for [how to enable Mailpit as a service](https://github.com/axllent/mailpit/issues/94#issuecomment-1515592242). Honestly, this should be added to the Wiki. Then, after stopping Mailhog and starting the Mailpit service (which starts successfully) and visiting the UI, I get these errors in the browser console, and I only see a white screen. ``` Refused to apply style from 'https://myweburl.example.com/dist/app.css?v1.9.2' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. GET https://myweburl.example.com/dist/app.js?v1.9.2 net::ERR_ABORTED 404 (Not Found) Refused to execute script from 'https://myweburl.example.com/dist/app.js?v1.9.2' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled. GET https://myweburl.example.com/favicon.svg 404 (Not Found) ``` I don't know where those files are on the system, or how I need to configure Mailpit or Nginx to get them to load. Sending mail works (I think). I don't see any errors when I send a test email. ## Configuration info ### PHP-FPM The PHP config: ```conf php_admin_value[sendmail_path] = /usr/local/bin/mailpit sendmail -t test@myweburl.example.com ``` In the above, I basically just replaced `mailhog` with `mailpit`. ### Nginx ```nginx ## Mailpit location ^~ /mailpit/ { proxy_pass http://localhost:8025/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Client-Verify SUCCESS; proxy_set_header X-Client-DN $ssl_client_s_dn; proxy_set_header X-SSL-Subject $ssl_client_s_dn; proxy_set_header X-SSL-Issuer $ssl_client_i_dn; proxy_read_timeout 1800; proxy_connect_timeout 1800; chunked_transfer_encoding on; proxy_set_header X-NginX-Proxy true; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_http_version 1.1; proxy_redirect off; proxy_buffering off; } ``` ### System info - Ubuntu 20.04 - Nginx 1.18.0 - PHP 8.2 - Mailpit 1.9.2 ## Other notes This issue looks similar to this one, but it's not exactly the same: https://github.com/axllent/mailpit/issues/137

kerem closed this issue

2026-03-15 12:38:22 +03:00

kerem commented

2026-03-15 12:38:28 +03:00

Author

Owner

@axllent commented on GitHub (Sep 26, 2023):

I see you are routing /mailpit/ to Mailpit via nginx, but did you set the Mailpit webroot to that too when you started it via your service? If not, then try adding a --webroot /mailpit/ to the ExecStart command to the existing line and see if that works?

I'll definitely consider adding that systemd config to the wiki.

@axllent commented on GitHub (Sep 26, 2023): I see you are routing `/mailpit/ ` to Mailpit via nginx, but did you set the Mailpit webroot to that too when you started it via your service? If not, then try adding a `--webroot /mailpit/` to the ExecStart command to the existing line and see if that works? I'll definitely consider adding that systemd config to the wiki.

kerem commented

2026-03-15 12:38:33 +03:00

Author

Owner

@mbomb007 commented on GitHub (Sep 26, 2023):

I added that and restarted the service. I now get just a simple 404 error from Nginx: 404 page not found.

My website is still up, and I don't see any Nginx or PHP log errors. Test emails still seem to be sent fine, both by the website and from CLI. However, I don't know how to fix the UI, and I don't know enough about Nginx proxies to know what's wrong.

If I switch back my settings and start Mailhog, the server still works with Mailhog.

Is there a way to troubleshoot the UI with Nginx or from the CLI?

Mailpit service status:

● mailpit.service - Mailpit
     Loaded: loaded (/etc/systemd/system/mailpit.service; disabled; vendor preset: enabled)
     Active: active (running) since Tue 2023-09-26 13:27:42 CDT; 56min ago
       Docs: https://github.com/axllent/mailpit
   Main PID: 597026 (mailpit)
      Tasks: 9 (limit: 4557)
     Memory: 8.4M
        CPU: 144ms
     CGroup: /system.slice/mailpit.service
             └─597026 /usr/local/bin/mailpit --webroot /mailpit/ --block-remote-css-and-fonts

Sep 26 13:27:42 REDACTED systemd[1]: Started Mailpit.
Sep 26 13:27:43 REDACTED mailpit[597026]: INFO[2023/09/26 13:27:43] [smtpd] starting on 0.0.0.0:1025
Sep 26 13:27:43 REDACTED mailpit[597026]: INFO[2023/09/26 13:27:43] [http] starting server on http://localhost:8025/mailpit/

@mbomb007 commented on GitHub (Sep 26, 2023): I added that and restarted the service. I now get just a simple 404 error from Nginx: `404 page not found`. My website is still up, and I don't see any Nginx or PHP log errors. Test emails still seem to be sent fine, both by the website and from CLI. However, I don't know how to fix the UI, and I don't know enough about Nginx proxies to know what's wrong. If I switch back my settings and start Mailhog, the server still works with Mailhog. Is there a way to troubleshoot the UI with Nginx or from the CLI? ### Mailpit service status: ``` ● mailpit.service - Mailpit Loaded: loaded (/etc/systemd/system/mailpit.service; disabled; vendor preset: enabled) Active: active (running) since Tue 2023-09-26 13:27:42 CDT; 56min ago Docs: https://github.com/axllent/mailpit Main PID: 597026 (mailpit) Tasks: 9 (limit: 4557) Memory: 8.4M CPU: 144ms CGroup: /system.slice/mailpit.service └─597026 /usr/local/bin/mailpit --webroot /mailpit/ --block-remote-css-and-fonts Sep 26 13:27:42 REDACTED systemd[1]: Started Mailpit. Sep 26 13:27:43 REDACTED mailpit[597026]: INFO[2023/09/26 13:27:43] [smtpd] starting on 0.0.0.0:1025 Sep 26 13:27:43 REDACTED mailpit[597026]: INFO[2023/09/26 13:27:43] [http] starting server on http://localhost:8025/mailpit/ ```

kerem commented

2026-03-15 12:38:38 +03:00

Author

Owner

@axllent commented on GitHub (Sep 26, 2023):

Do you have direct access to the Mailpit server without Nginx? What I mean is, if it is local - can you access Mailpit via http://localhost:8025/mailpit/ or whatever IP address it is? Mailpit appears to be running as expected, and listening on port 1025. On the local machine (assuming you do not have access to Mailpit directly from "outside") should respond to curl http://localhost:8025/mailpit/

@axllent commented on GitHub (Sep 26, 2023): Do you have direct access to the Mailpit server without Nginx? What I mean is, if it is local - can you access Mailpit via `http://localhost:8025/mailpit/` or whatever IP address it is? Mailpit appears to be running as expected, and listening on port 1025. On the local machine (assuming you do not have access to Mailpit directly from "outside") should respond to `curl http://localhost:8025/mailpit/`

kerem commented

2026-03-15 12:38:43 +03:00

Author

Owner

@mbomb007 commented on GitHub (Sep 26, 2023):

Ah, yes. That does seem to show the page when I run curl.

<!DOCTYPE html>
<html lang="en" class="h-100">

<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <meta name="referrer" content="no-referrer">
        <meta name="robots" content="noindex, nofollow, noarchive">
        <link rel="icon" href="/mailpit/favicon.svg">
        <title>Mailpit</title>
        <link rel=stylesheet href="/mailpit/dist/app.css?v1.9.2">
</head>

<body class="h-100">
        <div class="container-fluid h-100 d-flex flex-column" id="app" data-webroot="/mailpit/">
                <noscript>You require JavaScript to use this app.</noscript>
        </div>

        <script src="/mailpit/dist/app.js?v1.9.2"></script>
</body>

</html>

@mbomb007 commented on GitHub (Sep 26, 2023): Ah, yes. That does seem to show the page when I run curl. ``` <!DOCTYPE html> <html lang="en" class="h-100"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="referrer" content="no-referrer"> <meta name="robots" content="noindex, nofollow, noarchive"> <link rel="icon" href="/mailpit/favicon.svg"> <title>Mailpit</title> <link rel=stylesheet href="/mailpit/dist/app.css?v1.9.2"> </head> <body class="h-100"> <div class="container-fluid h-100 d-flex flex-column" id="app" data-webroot="/mailpit/"> <noscript>You require JavaScript to use this app.</noscript> </div> <script src="/mailpit/dist/app.js?v1.9.2"></script> </body> </html> ```

kerem commented

2026-03-15 12:38:48 +03:00

Author

Owner

@axllent commented on GitHub (Sep 26, 2023):

And I assume that curl http://localhost:8025/mailpit/dist/app.jsv1.9.2 returns a whole bunch of JavaScript code? No need to paste the output of that, but there should be a lot?

@axllent commented on GitHub (Sep 26, 2023): And I assume that `curl http://localhost:8025/mailpit/dist/app.jsv1.9.2` returns a whole bunch of JavaScript code? No need to paste the output of that, but there should be a lot?

kerem commented

2026-03-15 12:38:53 +03:00

Author

Owner

@mbomb007 commented on GitHub (Sep 26, 2023):

I had to add a missing ? and run curl http://localhost:8025/mailpit/dist/app.js?v1.9.2, but yes it does.

@mbomb007 commented on GitHub (Sep 26, 2023): I had to add a missing `?` and run `curl http://localhost:8025/mailpit/dist/app.js?v1.9.2`, but yes it does.

kerem commented

2026-03-15 12:38:58 +03:00

Author

Owner

@mbomb007 commented on GitHub (Sep 26, 2023):

So it must be something related to Nginx... but I really don't know what, as my configuration works with Mailhog.

@mbomb007 commented on GitHub (Sep 26, 2023): So it must be something related to Nginx... but I really don't know what, as my configuration works with Mailhog.

kerem commented

2026-03-15 12:39:03 +03:00

Author

Owner

@ulken commented on GitHub (Sep 26, 2023):

I'm not 100 % sure, but I had the same problem earlier today. First missing setting the web root, then 404:ing. My problem was I stripped /mailpit from the URL after the proxy handled it. I think you're doing the same thing. Try appending /mailpit to proxy_pass.

@ulken commented on GitHub (Sep 26, 2023): I'm not 100 % sure, but I had the same problem earlier today. First missing setting the web root, then 404:ing. My problem was I stripped `/mailpit` from the URL after the proxy handled it. I think you're doing the same thing. Try appending `/mailpit` to `proxy_pass`.

kerem commented

2026-03-15 12:39:08 +03:00

Author

Owner

@mbomb007 commented on GitHub (Sep 26, 2023):

Yes! @ulken, that fixed it!

    ## Mailpit
    location ^~ /mailpit/ {
        proxy_pass http://localhost:8025/mailpit/;
        ...
    }

@mbomb007 commented on GitHub (Sep 26, 2023): Yes! @ulken, that fixed it! ```nginx ## Mailpit location ^~ /mailpit/ { proxy_pass http://localhost:8025/mailpit/; ... } ```

kerem commented

2026-03-15 12:39:13 +03:00

Author

Owner

@mbomb007 commented on GitHub (Sep 26, 2023):

So basically, something is different between Mailhog and Mailpit with the webroot and how you have to configure the proxy.

@axllent It'd be great if this difference or an example Nginx configuration could include this information and solution. Or it could be added to the troubleshooting section of the Wiki.

@mbomb007 commented on GitHub (Sep 26, 2023): So basically, something is different between Mailhog and Mailpit with the webroot and how you have to configure the proxy. @axllent It'd be great if this difference or an example Nginx configuration could include this information and solution. Or it could be added to the troubleshooting section of the Wiki.

kerem commented

2026-03-15 12:39:18 +03:00

Author

Owner

@axllent commented on GitHub (Sep 26, 2023):

Thanks for the feedback, and the helpful tip @ulken! Glad it's working, and I'll try remember to add something to the Wiki.

@axllent commented on GitHub (Sep 26, 2023): Thanks for the feedback, and the helpful tip @ulken! Glad it's working, and I'll try remember to add something to the Wiki.

kerem commented

2026-03-15 12:39:24 +03:00

Author

Owner

@ulken commented on GitHub (Sep 26, 2023):

Yeah, I was a little surprised by that as well. Grafana for example doesn't work that way.

@ulken commented on GitHub (Sep 26, 2023): Yeah, I was a little surprised by that as well. Grafana for example doesn't work that way.

kerem commented

2026-03-15 12:39:29 +03:00

Author

Owner

@mbomb007 commented on GitHub (Sep 26, 2023):

I basically converted to Mailpit because DDEV did so, and then I saw how much greater than Mailhog it is. Thanks for your work to create this wonderful tool!

@mbomb007 commented on GitHub (Sep 26, 2023): I basically converted to Mailpit because DDEV did so, and then I saw how much greater than Mailhog it is. Thanks for your work to create this wonderful tool!

kerem commented

2026-03-15 12:39:34 +03:00

Author

Owner

@Alex4Codes commented on GitHub (Dec 22, 2023):

Please add information about nginx configuration to the documentation

@Alex4Codes commented on GitHub (Dec 22, 2023): Please add information about nginx configuration to the documentation

kerem commented

2026-03-15 12:39:39 +03:00

Author

Owner

@axllent commented on GitHub (Dec 23, 2023):

@Alex4Codes see https://mailpit.axllent.org/docs/configuration/proxy/

@axllent commented on GitHub (Dec 23, 2023): @Alex4Codes see https://mailpit.axllent.org/docs/configuration/proxy/

kerem referenced this issue

2026-03-15 14:19:22 +03:00

[PR #114] [MERGED] UI: check for secure context instead of https #446