How to Host a Vite+React App on a VPS

Hosting your Vite+React application on a Virtual Private Server (VPS) is a great way to gain full control over your application's environment. This guide will walk you through the steps required to get your Vite+React app up and running on a VPS.

Prerequisites

Before we start, make sure you have the following:

1. A VPS (e.g., from providers like DigitalOcean, AWS, Linode, etc.)

2. A domain name (optional, but recommended)

3. Basic knowledge of SSH and Linux command line

4. Node.js and npm installed on your local machine

5. Git installed on your local machine

Step 1: Set Up Your VPS

First, you need to set up your VPS. If you haven't already, sign up with a VPS provider and create a new server instance. Choose an operating system (typically Ubuntu) and make a note of your server's IP address.

Connect to Your VPS

Open your terminal and connect to your VPS using SSH:

ssh your_username@your_server_ip

Replace your_username and your_server_ip with your actual username and server IP address.

Update and Upgrade Your VPS

Once connected, update and upgrade the server packages:

sudo apt update
sudo apt upgrade -y

Step 2: Install Node.js and npm

Next, install Node.js and npm on your VPS:

curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt install -y nodejs

Verify the installation:

node -v
npm -v

Step 3: Install Git

You will need Git to clone your Vite+React app repository:

sudo apt install git -y

Step 4: Clone Your Vite+React App

Navigate to the directory where you want to host your application and clone your app's repository:

cd /var/www
sudo git clone https://github.com/yourusername/your-vite-react-app.git
cd your-vite-react-app

Replace the repository URL with the actual URL of your repository.

Step 5: Install Dependencies and Build the App

Install your app's dependencies and build the app:

npm install
npm run build

This will generate a dist folder containing your static files.

Step 6: Set Up a Web Server (Nginx)

Install Nginx, which will serve your Vite+React app:

sudo apt install nginx -y

Configure Nginx to serve your app. Create a new configuration file:

sudo nano /etc/nginx/sites-available/your-vite-react-app

Add the following content to the file:

server {
    listen 80;
    server_name your_domain_or_ip;

    root /var/www/your-vite-react-app/dist;
    index index.html;

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

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /var/www/html;
    }
}

Save and close the file. Enable the new configuration:

sudo ln -s /etc/nginx/sites-available/your-vite-react-app /etc/nginx/sites-enabled/
sudo unlink /etc/nginx/sites-enabled/default

Test the Nginx configuration and restart the service:

sudo nginx -t
sudo systemctl restart nginx

Step 7: Set Up a Firewall

Ensure your firewall allows HTTP and HTTPS traffic:

sudo ufw allow 'Nginx Full'
sudo ufw enable

Step 8: Access Your App

Now, your Vite+React app should be accessible via your domain name or server IP address. Open a web browser and navigate to http://your_domain_or_ip.

Conclusion

Congratulations! You've successfully hosted your Vite+React application on a VPS. This setup gives you a robust and scalable environment for your app, with the flexibility to tweak and optimize as needed.