docs: add tutorial for custom SSL certificates (#2724)

apps/docs/app/self-hosting/custom-ssl/page.mdx

@@ -0,0 +1,140 @@
+export const metadata = {
+  title: "Add Custom SSL Certificate to Formbricks",
+  description: "Learn how to add a custom SSL certificate to your Formbricks self-hosted instance.",
+};
+
+# Using Formbricks One-Click Setup with a Custom SSL Certificate
+
+<Note>
+  Formbricks One-Click setup already comes with a valid SSL certificate using Let's Encrypt. This guide is
+  only if you already have a valid SSL certificate that you need to use due to company policy or other
+  requirements.
+</Note>
+
+## Introduction
+
+While Formbricks' One-Click setup can automatically create a valid SSL certificate using Let's Encrypt, there are scenarios where a custom SSL certificate is necessary. This is particularly relevant for environments like intranets or other setups with specific certificate requirements, where an internal or custom certificate authority (CA) might be used.
+
+### Step 1: Navigate to the Formbricks Folder
+
+Navigate into the "formbricks" folder that contains all the files from the Formbricks One-Click setup.
+
+```sh
+cd formbricks
+```
+
+### Step 2: Create a Folder for SSL Certificates
+
+Create a new folder named "certs" within the "formbricks" folder. Place your SSL certificate files (`fullchain.crt` and `cert.key`) in this directory.
+
+```sh
+mkdir certs
+# Move your SSL certificate files to the certs folder
+mv /path/to/your/fullchain.crt certs/
+mv /path/to/your/cert.key certs/
+```
+
+### Step 3: Understand SSL Certificate Files
+
+For a custom SSL setup, you need the following files:
+
+- **fullchain.crt**: This file contains your SSL certificate along with the entire certificate chain. The certificate chain includes intermediate certificates that link your SSL certificate to a trusted root certificate.
+- **cert.key**: This is your private key file. It is used to encrypt and decrypt data sent between your server and clients.
+
+### Step 4: Update File Permissions
+
+Ensure the directory and files have appropriate permissions:
+
+```sh
+sudo chown root:root certs/*
+sudo chmod 600 certs/*
+```
+
+### Step 5: Update `traefik.yaml`
+
+Update your `traefik.yaml` file to define entry points for HTTP and HTTPS traffic and set up a provider for Traefik to use Docker and a file-based configuration.
+
+```yaml
+entryPoints:
+  web:
+    address: ":80"
+    http:
+      redirections:
+        entryPoint:
+          to: websecure
+          scheme: https
+          permanent: true
+  websecure:
+    address: ":443"
+
+providers:
+  docker:
+    watch: true
+    exposedByDefault: false
+  file:
+    directory: /etc/traefik/dynamic
+```
+
+### Step 6: Create `certs-traefik.yaml`
+
+Create a `certs-traefik.yaml` file that specifies the path to your custom SSL certificate and key.
+
+```yaml
+tls:
+  certificates:
+    - certFile: /certs/fullchain.crt
+      keyFile: /certs/cert.key
+```
+
+### Step 7: Update `docker-compose.yml`
+
+Update your `docker-compose.yml` file to enforce TLS and link to your custom SSL certificate. Here's an example configuration for both the Formbricks and Traefik services. The rest of the configuration should remain the same as the One-Click setup:
+
+```yaml
+services:
+  formbricks:
+    restart: always
+    image: ghcr.io/formbricks/formbricks:latest
+    depends_on:
+      - postgres
+    labels:
+      - "traefik.enable=true"  # Enable Traefik for this service
+      - "traefik.http.routers.formbricks.rule=Host(`my-domain.com`)"  # Use your actual domain or IP
+      - "traefik.http.routers.formbricks.entrypoints=websecure"  # Use the websecure entrypoint (port 443 with TLS)
+      - "traefik.http.routers.formbricks.tls=true"  # Enable TLS
+      - "traefik.http.services.formbricks.loadbalancer.server.port=3000"  # Forward traffic to Formbricks on port 3000
+    ports:
+      - 3000:3000
+    volumes:
+      - uploads:/home/nextjs/apps/web/uploads/
+    <<: *environment
+
+  traefik:
+    image: "traefik:v2.7"
+    restart: always
+    container_name: "traefik"
+    depends_on:
+      - formbricks
+    ports:
+      - "80:80"
+      - "443:443"
+      - "8080:8080"
+    volumes:
+      - ./traefik.yaml:/traefik.yaml
+      - ./acme.json:/acme.json
+      - /var/run/docker.sock:/var/run/docker.sock:ro
+      - ./certs:/certs
+      - ./certs-traefik.yaml:/etc/traefik/dynamic/certs-traefik.yaml
+```
+
+### Summary
+
+1. **Navigate to the Formbricks Folder**: Move into the "formbricks" directory.
+2. **Create a Folder for SSL Certificates**: Create a "certs" folder and place your `fullchain.crt` and `cert.key` files inside it.
+3. **Understand SSL Certificate Files**: Ensure you have the `fullchain.crt` and `cert.key` files.
+4. **Update File Permissions**: Ensure the certificate files have the correct permissions.
+5. **Update `traefik.yaml`**: Define entry points and remove certificate resolvers.
+6. **Create `certs-traefik.yaml`**: Specify the paths to your SSL certificate and key.
+7. **Update `docker-compose.yml`**: Configure Traefik labels to enforce TLS and mount the certificate directory.
+
+This setup ensures that Formbricks uses your custom SSL certificate for secure communications, suitable for environments with special certificate requirements.

apps/docs/lib/navigation.ts

@@ -107,6 +107,7 @@ export const navigation: Array<NavGroup> = [
     links: [
       { title: "Overview", href: "/self-hosting/overview" },
       { title: "One-Click Setup", href: "/self-hosting/one-click" },
+      { title: "Custom SSL Certificate", href: "/self-hosting/custom-ssl" },
       { title: "Docker Setup", href: "/self-hosting/docker" },
       { title: "Migration Guide", href: "/self-hosting/migration-guide" },
       { title: "Configuration", href: "/self-hosting/configuration" },