Host the ui manually on a subdomain folder path

NOTE: Replace example.com with your actual domain name where applicable

Step 1: Build the Vue.js Application

Modify Vue.js vue.config.js (if required):

You need to configure the publicPath in Vue.js to ensure that the assets are correctly loaded from the subdomain folder /ditui. Add or modify the vue.config.js file to include:

module.exports = {
  publicPath: '/ditui/', // This ensures the assets are correctly resolved
};

Build the Vue.js app:

After modifying the publicPath, build the Vue.js app for production:

npm run build

This will generate a dist folder containing your built Vue.js files.

Step 2: Serve Vue.js Files with Nginx

Move the Vue.js build files:

After building the Vue.js app, move the files in the dist folder to a directory where Nginx can serve them, e.g., /var/www/ditui.

sudo mkdir -p /var/www/ditui
sudo cp -r dist/* /var/www/ditui

Install Nginx (if not already installed):

sudo apt update
sudo apt install nginx

Create or modify your Nginx configuration to serve the Vue.js app from the subdomain path /ditui alongside your Django app.

Open or create your Nginx configuration file for the site /etc/nginx/sites-available/example.com and add a new location block for the Vue.js app:

server {
    listen 80;
    server_name example.com;

    # Django app on /ditapi
    location /ditapi/ {
        proxy_pass http://127.0.0.1:8000/;
        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;
    }
    # Serve Vue.js app on /ditui
    location /ditui/ {
        root /var/www/ditui; # Location where Vue.js files are hosted
        try_files $uri $uri/ /index.html;
    }

    # Optional: serve static and media files for Django
    location /ditapi/static/ {
        alias /path/to/django/static/;
    }
    location /ditapi/media/ {
        alias /path/to/django/media/;
    }
}

The Vue.js app is being served from /ditui and will serve the index.html for any route (thanks to the try_files directive).

The Django app continues to be served on /ditapi.

Enable the Nginx configuration:

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/

Test and reload Nginx:

After configuring Nginx, test the configuration and reload the service:

sudo nginx -t
sudo systemctl reload nginx

Step 3: Test the Application

Now, you should be able to access:

Your Django API at http://example.com/ditapi/(replace⁠ example.com) with your domain name Your Vue.js UI at http://example.com/ditui/(replace⁠ example.com) with your domain name

Step 4: Optional — Configure HTTPS

If you're using HTTPS with Certbot, you'll need to reconfigure it to include the Vue.js path. You can do this by running Certbot and selecting the appropriate domains.

Install Certbot:

sudo apt install certbot python3-certbot-nginx

Obtain an SSL certificate:

sudo certbot --nginx -d example.com

Certbot will automatically update your Nginx configuration to include HTTPS.