fix(docker-usage): init

README.md

@@ -28,10 +28,11 @@
 - [Installation](#installation)
   - [Getting Started with Docker (Recommended)](#getting-started-with-docker-recommended)
   - [Non-Docker Installation](#non-docker-installation)
+  - [Nginx Reverse Proxy](#nginx-reverse-proxy)
   - [Ollama Connection Errors](#ollama-connection-errors)
 - [Using as a Search Engine](#using-as-a-search-engine)
 - [Using Perplexica's API](#using-perplexicas-api)
-- [Expose Perplexica to a network](#expose-perplexica-to-network)
+- [Expose Perplexica to a Network](#expose-perplexica-to-a-network)
 - [One-Click Deployment](#one-click-deployment)
 - [Upcoming Features](#upcoming-features)
 - [Support Us](#support-us)
@@ -118,6 +119,17 @@ There are mainly 2 ways of installing Perplexica - With Docker, Without Docker.
 
 See the [installation documentation](https://github.com/ItzCrazyKns/Perplexica/tree/master/docs/installation) for more information like exposing it your network, etc.
 
+### Nginx Reverse Proxy
+
+Perplexica includes an Nginx reverse proxy that provides several key benefits:
+
+- **Single Port Access**: Access both frontend and backend through a single port (8080)
+- **Dynamic Configuration**: Works with any domain or IP without rebuilding
+- **WebSocket Support**: Automatic WebSocket URL configuration based on the current domain
+- **Security Headers**: Enhanced security with proper HTTP headers
+
+When using Docker, the reverse proxy is automatically configured. Access Perplexica at `http://localhost:8080` or `http://your-ip:8080` after starting the containers.
+
 ### Ollama Connection Errors
 
 If you're encountering an Ollama connection error, it is likely due to the backend being unable to connect to Ollama's API. To fix this issue you can:
@@ -143,7 +155,7 @@ If you wish to use Perplexica as an alternative to traditional search engines li
 
 1. Open your browser's settings.
 2. Navigate to the 'Search Engines' section.
-3. Add a new site search with the following URL: `http://localhost:3000/?q=%s`. Replace `localhost` with your IP address or domain name, and `3000` with the port number if Perplexica is not hosted locally.
+3. Add a new site search with the following URL: `http://localhost:8080/?q=%s`. Replace `localhost` with your IP address or domain name if needed.
 4. Click the add button. Now, you can use Perplexica directly from your browser's search bar.
 
 ## Using Perplexica's API
@@ -152,9 +164,15 @@ Perplexica also provides an API for developers looking to integrate its powerful
 
 For more details, check out the full documentation [here](https://github.com/ItzCrazyKns/Perplexica/tree/master/docs/API/SEARCH.md).
 
-## Expose Perplexica to network
+## Expose Perplexica to a Network
 
-You can access Perplexica over your home network by following our networking guide [here](https://github.com/ItzCrazyKns/Perplexica/blob/master/docs/installation/NETWORKING.md).
+Perplexica can be easily accessed over your home network or exposed to the internet through the Nginx reverse proxy. With this setup:
+
+1. **Local Network Access**: Access Perplexica from any device on your network using `http://server-ip:8080`
+2. **Domain Configuration**: If you have a domain name, point it to your server and access Perplexica with `http://your-domain.com:8080`
+3. **SSL Support**: Configure SSL certificates in Nginx for secure `https://` access
+
+For more network configuration details, see our [networking guide](https://github.com/ItzCrazyKns/Perplexica/blob/master/docs/installation/NETWORKING.md).
 
 ## One-Click Deployment
 

docker-compose.yaml

@@ -35,8 +35,8 @@ services:
       context: .
       dockerfile: app.dockerfile
       args:
-        - NEXT_PUBLIC_API_URL=http://127.0.0.1:3001/api
+        - NEXT_PUBLIC_API_URL=/api
-        - NEXT_PUBLIC_WS_URL=ws://127.0.0.1:3001
+        - NEXT_PUBLIC_WS_URL=auto
     image: itzcrazykns1337/perplexica-frontend:main
     depends_on:
       - perplexica-backend
@@ -46,6 +46,19 @@ services:
       - perplexica-network
     restart: unless-stopped
 
+  nginx:
+    image: nginx:alpine
+    ports:
+      - "8080:80"
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf:ro
+    depends_on:
+      - perplexica-frontend
+      - perplexica-backend
+    networks:
+      - perplexica-network
+    restart: unless-stopped
+
 networks:
   perplexica-network:
 

docs/installation/NETWORKING.md

@@ -1,109 +1,106 @@
-# Expose Perplexica to a network
+# Exposing Perplexica to a Network
 
-This guide will show you how to make Perplexica available over a network. Follow these steps to allow computers on the same network to interact with Perplexica. Choose the instructions that match the operating system you are using.
+This guide explains how to make Perplexica available over a network using the built-in Nginx reverse proxy.
 
-## Windows
+## Accessing Perplexica Over a Network
 
-1. Open PowerShell as Administrator
+### Basic Access
 
-2. Navigate to the directory containing the `docker-compose.yaml` file
+With the Nginx reverse proxy, Perplexica is automatically accessible from any device on your network:
-
-3. Stop and remove the existing Perplexica containers and images:
 
+1. Start Perplexica using Docker Compose:
    ```bash
-   docker compose down --rmi all
+   docker compose up -d
    ```
 
-4. Open the `docker-compose.yaml` file in a text editor like Notepad++
+2. Find your server's IP address:
+   - **Windows**: `ipconfig` in Command Prompt
+   - **macOS**: `ifconfig | grep "inet "` in Terminal
+   - **Linux**: `ip addr show | grep "inet "` in Terminal
 
-5. Replace `127.0.0.1` with the IP address of the server Perplexica is running on in these two lines:
+3. Access Perplexica from any device on your network:
-
+   ```
-   ```bash
+   http://YOUR_SERVER_IP:8080
-   args:
-     - NEXT_PUBLIC_API_URL=http://127.0.0.1:3001/api
-     - NEXT_PUBLIC_WS_URL=ws://127.0.0.1:3001
    ```
 
-6. Save and close the `docker-compose.yaml` file
+### Domain Configuration
 
-7. Rebuild and restart the Perplexica container:
+If you have a domain name, you can point it to your server:
 
-   ```bash
+1. Configure your domain's DNS settings to point to your server IP
-   docker compose up -d --build
+
+2. Access Perplexica via:
+   ```
+   http://your-domain.com:8080
    ```
 
-## macOS
+## Advanced Configuration
 
-1. Open the Terminal application
+### Custom Port
 
-2. Navigate to the directory with the `docker-compose.yaml` file:
+If you need to use a different port instead of the default 8080:
 
-   ```bash
+1. Modify the `docker-compose.yaml` file:
-   cd /path/to/docker-compose.yaml
+   ```yaml
+   nginx:
+     ports:
+       - "YOUR_CUSTOM_PORT:80"
    ```
 
-3. Stop and remove existing containers and images:
+2. Restart the containers:
-
    ```bash
-   docker compose down --rmi all
+   docker compose down && docker compose up -d
    ```
 
-4. Open `docker-compose.yaml` in a text editor like Sublime Text:
+### SSL/HTTPS Configuration
 
-   ```bash
+For secure HTTPS access:
-   nano docker-compose.yaml
+
+1. Modify the Nginx configuration to include SSL:
+   ```nginx
+   # In nginx.conf
+   server {
+     listen 80;
+     listen 443 ssl;
+
+     ssl_certificate /path/to/certificate.crt;
+     ssl_certificate_key /path/to/private.key;
+
+     # Rest of configuration...
+   }
    ```
 
-5. Replace `127.0.0.1` with the server IP in these lines:
+2. Update the Docker volume to include your certificates:
-
+   ```yaml
-   ```bash
+   nginx:
-   args:
+     volumes:
-     - NEXT_PUBLIC_API_URL=http://127.0.0.1:3001/api
+       - ./nginx.conf:/etc/nginx/nginx.conf:ro
-     - NEXT_PUBLIC_WS_URL=ws://127.0.0.1:3001
+       - ./ssl:/path/to/ssl:ro
    ```
 
-6. Save and exit the editor
+3. Restart the containers:
-
-7. Rebuild and restart Perplexica:
-
    ```bash
-   docker compose up -d --build
+   docker compose down && docker compose up -d
    ```
 
-## Linux
+4. Or just use another reverse proxy on top of this one...
 
-1. Open the terminal
+## Troubleshooting
 
-2. Navigate to the `docker-compose.yaml` directory:
+If you encounter issues accessing Perplexica over your network:
 
+1. **Firewall Settings**: Ensure port 8080 (or your custom port) is allowed in your firewall
+
+2. **Docker Network**: Check if Docker's network settings allow external connections:
    ```bash
-   cd /path/to/docker-compose.yaml
+   docker network inspect perplexica_perplexica-network
    ```
 
-3. Stop and remove containers and images:
+3. **Nginx Logs**: Check for any connection issues:
-
    ```bash
-   docker compose down --rmi all
+   docker logs perplexica-nginx-1
    ```
 
-4. Edit `docker-compose.yaml`:
+4. **Direct Access**: Verify if you can access the services directly:
-
+   - Frontend: http://YOUR_SERVER_IP:3000
-   ```bash
+   - Backend: http://YOUR_SERVER_IP:3001
-   nano docker-compose.yaml
-   ```
-
-5. Replace `127.0.0.1` with the server IP:
-
-   ```bash
-   args:
-     - NEXT_PUBLIC_API_URL=http://127.0.0.1:3001/api
-     - NEXT_PUBLIC_WS_URL=ws://127.0.0.1:3001
-   ```
-
-6. Save and exit the editor
-
-7. Rebuild and restart Perplexica:
-
-   ```bash
-   docker compose up -d --build
-   ```

nginx.conf

@@ -0,0 +1,50 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    port_in_redirect on;
+    absolute_redirect off;
+
+    server {
+        listen 80;
+        server_name localhost:8080;
+
+        # API requests
+        location /api {
+            proxy_pass http://perplexica-backend:3001;
+            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-Forwarded-Proto $scheme;
+        }
+
+        # WebSocket requests
+        location /ws {
+            proxy_pass http://perplexica-backend:3001;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+            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-Forwarded-Proto $scheme;
+        }
+
+        # Frontend requests
+        location / {
+            proxy_pass http://perplexica-frontend:3000;
+            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-Forwarded-Proto $scheme;
+        }
+
+        # Security headers
+        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
+        add_header X-XSS-Protection "1; mode=block" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        server_tokens off;
+    }
+}

ui/components/ChatWindow.tsx

@@ -368,7 +368,7 @@ const loadMessages = async (
 
 const ChatWindow = ({ id }: { id?: string }) => {
   const searchParams = useSearchParams();
-  const initialMessage = searchParams.get('q');
+  const initialMessage = searchParams?.get('q');
 
   const [chatId, setChatId] = useState<string | undefined>(id);
   const [newChatCreated, setNewChatCreated] = useState(false);
@@ -378,7 +378,9 @@ const ChatWindow = ({ id }: { id?: string }) => {
 
   const [isWSReady, setIsWSReady] = useState(false);
   const ws = useSocket(
-    process.env.NEXT_PUBLIC_WS_URL!,
+    process.env.NEXT_PUBLIC_WS_URL === 'auto'
+      ? `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.host}/ws`
+      : process.env.NEXT_PUBLIC_WS_URL!,
     setIsWSReady,
     setHasError,
   );