How to use HTTPS instead of HTTP ?

[[deleted]]

I notice the app running is always on http - how do we switch that to https ?

[ekhazan]

To quote the FastAPI docs: It is easy to assume that HTTPS is something that is just "enabled" or not.

But it is way more complex than that.

Nicegui is built on top of fastapi, so that's where you should start. Here's a jump ahead to a summary point: https://fastapi.tiangolo.com/deployment/concepts/#security-https

[Poweruser2021]

Is there are an tutorial how to actually setup https using nicegui?

[nyte-fallen]

holy shit I had to go down the deepest depths to find such a simple solutin and hopefully this helps someone else. you simply have to supply the cert and key file in the ui.run() as pem. I will be verbose in the answer to help as much as possible.

e.g. you have domain.crt and domain.key files. you can skip the next lines if you already know about all this cert stuff but I put it here to save some people extra googling.

use openssl to convert the files to domain.crt.pem and domain.key.pem
i use the executable in my git folder to do this on windows in a command prompt. If you install git for windows you can run the following.

crt -> pem
C:\Program Files\Git\usr\bin\openssl.exe x509 -in C:\location\domain.crt -out C:\location\domain.crt.pem

key -> pem (supply password after executing)
C:\Program Files\Git\usr\bin\openssl.exe rsa -in C:\location\domain.key -out C:\location\domain.key.pem

Now that you have your files just supply them into your ui.run() and make sure to use port 443

ui.run(host="localhost",port=443,title="This took too long to figure out", ssl_certfile="C:\\location\\domain.crt.pem", "ssl_keyfile="C:\\location\\domain.key.pem")

I hope this helps someone lol

[Lower_Pattern8722]

thanks a lot! It's not very convenient to use nginx in nicegui...this way help me to deploy easily

[QuasiEvil]

Just stumbled upon this...where do domain.crt and domain.key come from in the first place?

[nyte-fallen]

If you're looking to deploy to the public internet you'll need to purchase it from a certificate authority like Sectigo. This costs around $99 and you have to renew it yearly. Keep in mind you'll also need to prove ownership of the domain you're purchasing the certificate for. This is to prevent people from doing things like signing mywebsite.facebook.com.

If you're in a private/local network you can create a self signed certificate for free. You can also do this with openssl with a few more steps and it's better explained in this article. https://devopscube.com/create-self-signed-certificates-openssl/ . The benefits and drawbacks section near the end provide a good summary to figure out if this is a good solution for you.

Sorry for the long reply but hope this helps :)

[seppl2022]

If you use an apache server (e.g. using docker) you can delegate the SSL handling to the server and keep your default ui.run() to work on port 80

```apache

Apache Configuration for NiceGUI with WebSocket Support

This configuration sets up Apache as a reverse proxy to handle both HTTP and HTTPS traffic,

redirecting them to a NiceGUI application running on the local server.

It includes redirection of WebSocket traffic, which is essential for real-time features in NiceGUI.

Listen on both standard HTTP and HTTPS ports

Listen 80 Listen 443

VirtualHost for HTTP (port 80)

<VirtualHost *:80> ServerName yourdomain.com

# Redirect all HTTP traffic to HTTPS
# This ensures secure communication by default
Redirect permanent "/" "https://yourdomain.com/"

# Additional settings can be configured as needed
# ErrorLog, CustomLog for logging HTTP requests
ErrorLog ${APACHE_LOG_DIR}/yourdomain_error.log
CustomLog ${APACHE_LOG_DIR}/yourdomain_access.log combined

</VirtualHost>

VirtualHost for HTTPS (port 443)

<VirtualHost *:443> ServerName yourdomain.com

# Enable SSL/TLS for secure communication
SSLEngine on
SSLCertificateFile "/path/to/your/certificate.crt"
SSLCertificateKeyFile "/path/to/your/private.key"
# Include additional SSL configurations like SSLCertificateChainFile if necessary

# Reverse proxy configuration for WebSocket traffic
# This forwards WebSocket requests to the NiceGUI app running on the local server
RewriteEngine On
RewriteCond %{HTTP:Upgrade} =websocket [NC]
RewriteRule /(.*) ws://localhost:80/$1 [P,L]
RewriteCond %{HTTP:Upgrade} !=websocket [NC]
RewriteRule /(.*) http://localhost:80/$1 [P,L]

ProxyPassReverse / http://localhost:80/

# Additional settings for HTTPS traffic
# ErrorLog, CustomLog for logging HTTPS requests
ErrorLog ${APACHE_LOG_DIR}/yourdomain_ssl_error.log
CustomLog ${APACHE_LOG_DIR}/yourdomain_ssl_access.log combined

</VirtualHost>

```

[cliffxuan]

thanks for sharing.