Unifying Two Sites Under a Single Domain with CapRover: A Seamless Integration Guide 🌐✨

Imagine a scenario where you're running two distinct web applications that need to share the same domain. For instance, your main site lives at "example.com", and you wish to integrate a second application, such as a custom API, accessible via "example.com/site2/". With CapRover, orchestrating this setup becomes a streamlined process

This could be usefull if you want to have a custom API on the same domain for exemple !

🛠 CapRover Setup Essentials

Assuming you've already deployed both applications on CapRover, let's dive into how to configure them to coexist harmoniously.

image of caprover deployed app.png

For this example, consider Site 1 as formenu and Site 2 as api-formenu.

Initial Reconnaissance

Navigate to the configuration page of Site 2 (your secondary application) to note its internal name or URL, along with its running port (the same one you'd typically input in the Container HTTP Port)

image of caprover internal app name.png

Our target detail here is http://srv-captain--api-formenu and it's port 1339

🚀 Configuring Site 1 for Dual Hosting

Domain Configuration: Set up the desired domain for Site 1, ensuring all traffic is directed to it. Activate HTTPS and enforce it for secure connections.

caprover, custom domain name for app.png

Nginx Configuration Adjustment: Edit the default Nginx configuration for Site 1 to incorporate Site 2 under the same domain. Insert the following block in the configuration file, right before the location / { directive:

    # Specify the path for `Site 2` access (e.g., /api/)
    location /api/ {
        # Adjust the rewrite rule to match your designated path
        rewrite ^/api/?(.*)$ /$1 break;
        # Insert `Site 2`'s internal URL and port obtained earlier
        proxy_pass http://srv-captain--api-formenu:1339;
        proxy_set_header Host $http_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;
    }

This configuration acts as a reverse proxy, redirecting requests for "/api/*" directly to Site 2. The rewrite rule ensures Site 2 receives requests without the prefixed /api/, making the integration seamless.

🧩 How It Works

Nginx evaluates incoming requests to determine their destination. By default, all traffic goes to the root (/), directed to the primary app. However, with our custom location directive, requests that match the specified path ("/api/") are rerouted to Site 2. Thanks to our clever rewrite rule, Site 2 processes these requests oblivious to the original /api/ prefix.

Traffic Flow Breakdown

Request Path -> Proxied To -> Viewed by App As

example.com/hello -> Site 1 -> /hello
example.com/test/coolthing -> Site 1 -> /test/coolthing
example.com/api/ -> Site 2 -> /
example.com/api/super/feature -> Site 2 -> /super/feature

This technique not only consolidates multiple services under one domain but also maintains clean URLs without resorting to subdomains. While CapRover automatically assigns a subdomain for each deployed app, this setup ensures your user-facing URLs remain elegant and intuitive.

Embrace the synergy of multiple web applications under a unified domain with CapRover, streamlining your web presence without compromising on organization or functionality.