Deploy React + Node.js on Nuxit

Complete guide to deploying your full-stack application on Nuxit hosting

About Nuxit Deployment

Nuxit is a European hosting provider offering VPS and shared hosting solutions. This guide covers deploying both your React frontend and Node.js backend on Nuxit servers.

Prerequisites

1

Server Setup

Connect to your Nuxit server via SSH:

ssh root@your-nuxit-server-ip

Update system packages and install essential software:

sudo apt update && sudo apt upgrade -y
sudo apt install -y git nginx

Install Node.js (using NVM recommended):

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
source ~/.bashrc
nvm install 16
nvm use 16

Install PM2 for process management:

npm install -g pm2
2

Application Setup

Create a directory for your application:

mkdir -p /var/www/your-app
cd /var/www/your-app

Clone your repository (or upload files):

git clone https://github.com/your-username/your-repo.git .
cd backend # assuming your Node.js code is in a backend folder
npm install
cd ../frontend # assuming your React code is in a frontend folder
npm install
npm run build

Create a .env file for production environment variables:

nano /var/www/your-app/backend/.env

Add your production database credentials and other environment variables here

3

Configure Node.js Backend

Test your Node.js server runs correctly:

cd /var/www/your-app/backend
node server.js

Set up PM2 to manage your Node.js process:

pm2 start server.js --name "your-app-backend"
pm2 save
pm2 startup

Configure PM2 to start on server reboot:

sudo env PATH=$PATH:/home/your-user/.nvm/versions/node/v16.20.0/bin /home/your-user/.nvm/versions/node/v16.20.0/lib/node_modules/pm2/bin/pm2 startup systemd -u your-user --hp /home/your-user

Adjust paths according to your Node.js version and username

4

Configure Nginx

Create a new Nginx configuration file:

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

Add the following configuration (adjust as needed):

server {
  listen 80;
  server_name your-domain.com www.your-domain.com;

  location / {
    root /var/www/your-app/frontend/build;
    try_files $uri /index.html;
  }

  location /api {
    proxy_pass http://localhost:5000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
  }
}

Enable the configuration and test Nginx:

sudo ln -s /etc/nginx/sites-available/your-app /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx
5

SSL Certificate (HTTPS)

Install Certbot for Let's Encrypt certificates:

sudo apt install -y certbot python3-certbot-nginx

Obtain and install SSL certificate:

sudo certbot --nginx -d your-domain.com -d www.your-domain.com

Set up automatic renewal:

sudo certbot renew --dry-run

Certbot will automatically update your Nginx configuration

Post-Deployment Checklist

Troubleshooting Common Issues

502 Bad Gateway

Usually means Nginx can't connect to your Node.js backend. Check:

  • Is your Node.js server running? (pm2 list)
  • Does the port in Nginx config match your Node.js server port?
  • Check Nginx error logs: sudo tail -f /var/log/nginx/error.log

React App Shows Blank Page

Common causes and solutions:

  • Verify the build folder path in Nginx config is correct
  • Check for JavaScript errors in browser console
  • Ensure API endpoints in your React app use relative paths (/api instead of http://localhost:5000)

Environment Variables Not Working

Remember that environment variables need to be:

  • Set in your server's .env file
  • Accessed via process.env in Node.js
  • For React, you need to prefix with REACT_APP_ and rebuild

Made with DeepSite LogoDeepSite - 🧬 Remix