How to host a static site or a React/Vue app

Static sites and single-page apps (React, Vue, Svelte) are just files: fast, cheap and easy to serve with Nginx.

1. Build it

npm run build

The result is a directory (usually dist or build) with HTML, CSS and JS files.

2. Copy the files to the server

scp -r dist/* root@SERVER_IP:/var/www/mysite/

3. Nginx server block

For a simple static site:

server {
    listen 80;
    server_name example.com;
    root /var/www/mysite;
    index index.html;
}

4. Routing for single-page apps

React/Vue apps route on the client. Without this line, refreshing on a route gives a 404:

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

nginx -t && systemctl reload nginx

Add a domain and HTTPS: see How to point a domain and Free SSL certificate.