How to Host a Full-Stack Application on a Server with XRDP and Nginx

Introduction

Welcome to this comprehensive guide where we’ll walk through the process of setting up a server with XRDP for remote desktop access, hosting a front-end application, setting up a back-end server, and configuring Nginx with SSL for secure access. This guide is designed to be professional yet beginner-friendly, providing clear explanations for each step.

Prerequisites

• A server running Ubuntu or a similar Linux distribution.
• Basic familiarity with command-line operations.
• A registered domain name (optional but recommended for SSL setup).

Using DigitalOcean as Your Hosting Provider

DigitalOcean offers straightforward and scalable cloud hosting solutions, making it an excellent choice for hosting your full-stack applications. Here’s how to leverage DigitalOcean for your project:

Create a DigitalOcean Account and Droplet:

• Sign up for an account at DigitalOcean.
• Create a new Droplet, which is a scalable virtual private server. Choose an image (like Ubuntu), a plan (size depends on your needs), and a datacenter region.

Access Your Droplet via SSH:

• Once your droplet is created, you’ll receive an IP address to access it.
• Use an SSH client with the command ssh root@your_droplet_ip to connect to your server. Replace your_droplet_ip with the IP address of your Droplet.

Setting Up the Server with XRDP

XRDP provides a graphical interface to your server, making it more accessible for those who prefer a GUI over command-line operations.

Update and Upgrade Your Server

sudo apt update && sudo apt upgrade

This command updates your package lists and upgrades installed packages to their latest versions.

Install XFCE4 and Tasksel

sudo apt install xfce4 tasksel -y

XFCE4 is a lightweight desktop environment. Tasksel allows easy installation of predefined sets of software.

Select XFCE4 in Tasksel

sudo tasksel

Run Tasksel and follow the prompts to select and install XFCE4.

Install and Configure XRDP

sudo apt install xrdp -y

sudo systemctl enable xrdp

sudo systemctl start xrdp

This installs XRDP and starts the XRDP service.

Configure XRDP Session

sudo nano /etc/xrdp/startwm.sh

Add the following lines above the “test -x /etc/X11/Xsession && exec /etc/X11/Xsession” line:

unset DBUS_SESSION_BUS_ADDRESS
unset XDG_RUNTIME_DIR

Then do this command in the terminal:

echo xfce4-session >> ~/.xsession

Then restart XRDP:

sudo systemctl restart xrdp

Hosting the Front End

Export Your Front-End Build

Move your built front-end files to /var/www/html. This directory serves as the root for your web content.

Hosting the Back End

Prepare Your Back-End Files

Place your back-end files in a preferred directory.

Install Dependencies and Run Your Back End

cd your-backend-directory
npm i
npm install pm2 -g
npm run build
pm2 start build/index.js

This installs necessary packages, builds your back-end, and starts it using PM2 for process management.

Setting Up Nginx and SSL

Install Nginx

sudo apt install nginx

Nginx acts as a web server and reverse proxy.

Configure Nginx for Your Domain

sudo nano /etc/nginx/sites-available/yourdomain.xyz

Replace yourdomain.xyz with your domain or IP address. Configure the server block as shown:

server {
    server_name yourdomain.xyz;
    root /var/www/html/Front/build;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://localhost:5290/;
        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;
    }
}

Link the configuration:

ln -s /etc/nginx/sites-available/yourdomain.xyz /etc/nginx/sites-enabled/

Test and Reload Nginx

sudo nginx -t
sudo systemctl reload nginx

Install SSL with Let’s Encrypt

sudo apt install certbot python3-certbot-nginx
sudo certbot --nginx -d yourdomain.xyz

This secures your site with HTTPS.

Conclusion

Congratulations! You’ve now successfully set up a full-stack application on a server with XRDP and Nginx. This setup provides a robust foundation for remote desktop access, hosting both front-end and back-end applications, and ensures a secure SSL configuration for your domain.

For more resources, tutorials, or to follow my journey in tech, visit my website at hidanz.dev. Additionally, I encourage you to follow me on Instagram for more updates and insights at @hidanzdev.

Your feedback and connections are invaluable as we continue to explore and grow in the dynamic world of technology together.