Hello, friends! In this article, we will go through how to set up a React development server on a VPS with external access and HTTPS. The main focus will be on development mode, because this is exactly the environment where you test your application on a real domain while integrating with external services such as Telegram WebApp, Shopify, or any APIs.
It is important to understand the goal: we want the application to run directly in development mode on a VPS, with external HTTPS access, while still remaining convenient for development and testing.
As a result, you will get:
a React development server on a VPS, accessible externally via HTTPS;
the ability to test integrations with external services;
a convenient application structure based on React and Vite;
In short, by the end you will have a working React development server that behaves almost like production, but with full freedom to change the code and test any integrations.
Preparing a VPS for a React development server
Alright, friends, we have a fresh VPS — clean like a blank notebook. Now it’s time to prepare it so that we can run our application and access it from the outside. Let’s do everything step by step to avoid any surprises later.
Checking basic software for the React development server
First of all, let’s make sure that Node.js, npm, and Git are installed on the VPS. Without them, a React application simply won’t run. To do this, update the packages and install the required tools:
sudo apt update
sudo apt install nodejs npm git -y
node -v
npm -v
git --version
If the versions are displayed, then everything is ready for the next step. Sometimes, on fresh VPS instances, Node.js may be an older version, but for development mode this is usually not critical. However, if needed, you can install a newer version via NodeSource or nvm.
Creating a React project for the development server
Now let’s move on to creating a new project called MyApp using Vite. If you already have an existing project, you can skip this step and simply clone your repository:
mkdir ~/myapp && cd ~/myapp
npm create vite@latest . -- --template react
npm install
As a result, we get a clean React application powered by Vite. The structure is simple, clear, and perfectly suited for running a React development server.
To be safe, make sure that the folder contains package.json and Vite is installed, otherwise the server may fail to start.
Opening a port for external access
Next, we need to make sure that our server is accessible from the outside. By default, Vite listens on port 5173, but VPS servers are often protected by a firewall. Therefore, let’s allow incoming connections:
sudo ufw allow 5173/tcp
sudo ufw status
After that, the port will be open, and the server will be accessible from any device via the VPS IP. This is especially convenient for testing on a phone or tablet — make sure to connect via VPS-IP:5173, not localhost, to ensure everything works correctly.
At this point, the VPS is prepared, the project is created, and the port is open — so we can move on to the next step and configure HTTPS for the server.
Configuring HTTPS for the React development server using NGINX and Certbot
So, friends, our server is already running on the VPS via HTTP — which is cool, but not enough. To make integrations with Telegram, Shopify, and other services work properly, we need HTTPS. Therefore, it’s time to make everything official and secure.
Installing NGINX and Certbot for the development server
NGINX will act as our reverse proxy, accepting HTTPS requests and forwarding them to Vite, while Certbot is a free tool used to obtain Let’s Encrypt certificates.
sudo apt update
sudo apt install nginx certbot python3-certbot-nginx -y
systemctl status nginx
Next, make sure that the firewall is not blocking ports 80 and 443:
sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw reload
Obtaining an SSL certificate for the React development server
Let’s assume that you already have a registered domain that is pointed to your VPS server. This is easily done in your hosting control panel. In our case, the domain is myapp.wtemu.ru.
certbot --nginx -d myapp.wtemu.ru
Certbot will verify the domain, issue the certificate, and attempt to automatically adjust the NGINX configuration so that all traffic goes through HTTPS.
If you don’t have a public domain yet, you can temporarily use a self-signed certificate. However, Telegram and some browsers may show warnings. Therefore, it’s strongly recommended to use a real domain right away.
Configuring NGINX as a proxy for the React development server
sudo nano /etc/nginx/sites-available/myapp
Insert the following configuration:
server {
listen 443 ssl;
server_name myapp.wtemu.ru;
ssl_certificate /etc/letsencrypt/live/myapp.wtemu.ru/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/myapp.wtemu.ru/privkey.pem;
location / {
proxy_pass http://127.0.0.1:5173;
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;
}
}
server {
listen 80;
server_name myapp.wtemu.ru;
return 301 https://$host$request_uri;
}
Important: the first block listens on port 443 and proxies requests to the development server; the second block catches HTTP requests and redirects them to HTTPS. The proxy_set_header and Upgrade directives are required to ensure that WebSocket connections and hot-reload work correctly.
Enabling the configuration and reloading NGINX
sudo ln -s /etc/nginx/sites-available/myapp /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx
If nginx -t reports “syntax is ok” and systemctl reload nginx produces no errors, HTTPS is working and the server is ready to accept secure connections.
Checking the React development server
Open your browser and go to:
https://myapp.wtemu.ru
Boom! Your React development server is now accessible via HTTPS. You can safely test Telegram WebApp and any other integrations — no more “insecure connection” warnings.
If Vite shows that “HMR is not working” or the page does not update, the issue is most likely related to the proxy configuration. It is crucial to keep these lines:
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
This ensures that hot-reload and WebSocket connections work correctly.
Stable operation of the React development server with PM2
So, friends, we already have a React development server on a VPS, accessible via HTTPS through NGINX. Everything works, but there is one caveat: in development mode, the server can unexpectedly close connections or crash — especially if you close your SSH session or your network changes.
To prevent the MyApp application from “dying” during such interruptions, we will use PM2 — a reliable process manager for Node.js. It monitors the server, restarts it if it crashes, and allows it to run as a service that starts automatically with the VPS.
Installing PM2
sudo npm install -g pm2
pm2 -v
Running the development server via PM2
pm2 start npm --name "myapp-dev" -- run dev -- --host 0.0.0.0
What’s important here:
--name "myapp-dev" — a convenient process name;
-- run dev -- --host 0.0.0.0 — the launch command with external access enabled.
If you have multiple projects on the same VPS, simply change the process name. PM2 can manage any number of servers without issues.
Autostarting the React development server after VPS reboot
pm2 save
pm2 startup
The command will output instructions — copy and execute them. After that, the server will automatically start even after a VPS reboot.
Monitoring and managing the server with PM2
pm2 list # list of processes
pm2 logs myapp-dev # server logs
pm2 restart myapp-dev # restart if needed
pm2 stop myapp-dev # stop the process
In development mode, you can safely close your SSH session — PM2 will keep the server alive, and the React development server will remain accessible via HTTPS.
Conclusion
So, friends, we’ve gone through the entire journey:
prepared the VPS and installed all the required tools;
launched a React development server with external access;
configured HTTPS using NGINX and Certbot so that Telegram and other services work without issues;
ensured stable operation with PM2 so that the server doesn’t crash and stays online.
Now you have a fully functional development server on a VPS that behaves almost like production. You can test integrations, modify the code, and be confident that everything will remain in place even during connection interruptions.
A tip for the future: when the time comes to build a production version for Telegram or other services, you can add a few additional fine-tuned settings. However, at the development stage, this is not critical — the most important thing is that everything works stably and securely.
As a result, your VPS is fully ready for real work with MyApp, and now you can calmly test any integrations and experiment with the code.