If you want to install ReactJS on Ubuntu 26.04, you are in the right place. This guide walks you through the entire process from a clean Ubuntu 26.04 LTS system to a live React application served by Nginx. Whether you are setting up a local development environment or preparing a production server, you will have a working React setup by the end of this tutorial.
Ubuntu 26.04 LTS (code-named “Plucky Puffin”) ships with a modern Linux kernel and updated system libraries that pair well with current JavaScript toolchains. That makes it one of the strongest base systems for running a React development environment in 2026. Before we start, there is one critical thing you need to know: create-react-app is deprecated. The React team officially dropped support for it, and the current recommended toolchain is Vite. This guide uses Vite throughout.
Prerequisites
Before you start, confirm the following:
- Operating system: Ubuntu 26.04 LTS (fresh install or existing system with sudo access)
- User privileges: A non-root user with
sudorights (running npm as root causes permission conflicts and is a security risk) - RAM: Minimum 1 GB (2 GB recommended for smoother builds)
- Disk space: At least 5 GB free
- Network: Active internet connection to pull packages and NVM scripts
- Basic terminal knowledge: You should be comfortable running commands and navigating directories
You do not need to pre-install Node.js. This guide handles that with NVM, which gives you full version control over your Node.js environment.
Step 1: Update Your Ubuntu 26.04 LTS System
Every reliable Linux server tutorial starts here, and for good reason. Running apt update refreshes your local package index so Ubuntu knows what versions are available in its repositories. Running apt upgrade applies any pending security patches.
This step matters more than it looks. Stale package indexes cause dependency resolution failures when you add third-party repositories later. Updated OpenSSL and glibc libraries also prevent silent TLS handshake errors during npm package downloads.
sudo apt update && sudo apt upgrade -yAfter the upgrade finishes, check if a kernel update was applied. If so, reboot before moving on:
sudo rebootOnce the system is back up, confirm your Ubuntu version:
lsb_release -aExpected output:
Distributor ID: Ubuntu
Description: Ubuntu 26.04 LTS
Release: 26.04
Codename: pluckyInstall a few essential build tools that Node.js native modules may depend on. These tools are often missing from minimal Ubuntu installs:
sudo apt install -y curl git build-essentialWhy build-essential: Some npm packages compile native C++ bindings during installation. Without gcc and make, those installations silently fail and produce confusing errors later.
Step 2: Install Node.js on Ubuntu 26.04 Using NVM
You have three ways to install Node.js on Ubuntu: the default apt repository, NodeSource PPA, or NVM (Node Version Manager). For any serious development work, NVM is the right choice.
Here is why. The apt repository often ships an outdated Node.js version. NodeSource works fine but ties your system to a fixed major version. NVM lets you install multiple Node.js versions side by side and switch between them per project. That matters when you maintain multiple codebases with different Node.js requirements.
Install NVM
Download and run the official NVM install script:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bashThe script appends NVM’s initialization code to your ~/.bashrc file. Now reload your shell so the nvm command becomes available without logging out:
source ~/.bashrcVerify NVM installed correctly:
nvm --versionExpected output:
0.40.3Install Node.js LTS (v24)
Node.js 24 is the current LTS (Long-Term Support) release as of 2026. LTS versions receive 30 months of active support and security patches, which makes them the right choice for anything beyond a weekend experiment.
nvm install --ltsSet this version as your default so it stays active in every new terminal session:
nvm alias default nodeConfirm both Node.js and npm are installed:
node -v
npm -vExpected output:
v24.x.x
10.x.xWhy set a default alias: Without this, NVM resets to the system Node.js version every time you open a new terminal. That breaks your dev server silently, and debugging it wastes time.
Step 3: Create a ReactJS App on Ubuntu 26.04 with Vite
Now that Node.js is ready, you can scaffold your React project. As mentioned earlier, create-react-app is no longer maintained, so this guide uses Vite as the build tool.
Vite uses native ES modules and Rollup under the hood. The practical result is sub-second hot module replacement (HMR) compared to the multi-second rebuilds you get from the old Webpack-based CRA setup. On a Linux server or developer workstation, the difference in iteration speed is noticeable from day one.
Scaffold the React Project
Run the Vite scaffolding command. Replace my-react-app with your actual project name:
npm create vite@latest my-react-app -- --template reactVite will ask a few questions if you run it without the --template flag. Using --template react skips the prompts and immediately generates a JavaScript React project.
Navigate into your project directory:
cd my-react-appInstall Project Dependencies
npm installWhy this step is not optional: The scaffold only creates a package.json manifest that lists what the project needs. Running npm install actually downloads all those packages into a local node_modules/ folder. Skipping this and jumping straight to npm run dev produces a wall of “Cannot find module” errors.
Start the Development Server
npm run devExpected output:
VITE v5.x.x ready in 300 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to exposeOpen http://localhost:5173 in your browser. You should see the default Vite + React welcome page with a counter button.
Why port 5173: Vite defaults to this port to avoid conflicts with other common local services like Node APIs (3000), Ruby on Rails (3000), or Flask (5000). If port 5173 is already occupied, Vite automatically increments to 5174, 5175, and so on.
Step 4: Understand the ReactJS Project Structure
Before you move to production, take five minutes to understand what Vite generated. Sysadmins who skip this step often make a critical deployment mistake: serving the src/ folder directly via a web server instead of the compiled dist/ folder.
Here is what the project directory looks like:
my-react-app/
├── public/ # Static assets served as-is (favicons, robots.txt)
├── src/ # Your React source code
│ ├── App.jsx # Root React component
│ ├── main.jsx # App entry point, mounts React to the DOM
│ └── assets/ # Images and fonts imported by your components
├── index.html # Vite's entry HTML file
├── vite.config.js # Build and dev server configuration
└── package.json # Project metadata and scriptsKey points to remember:
- src/ is source code, not the deployable artifact. It contains JSX, modern JavaScript, and imports that browsers cannot process directly.
- dist/ is what you deploy. It gets created when you run the build command. This folder contains browser-ready HTML, CSS, and minified JavaScript.
- node_modules/ should never go to production. Add it to
.gitignoreimmediately if it is not already there.
Step 5: Build the ReactJS App for Production
The development server is great for writing code, but it is not suitable for production. It serves unminified code, keeps source maps exposed, and runs a WebSocket connection for HMR. None of that belongs on a public server.
Run the production build:
npm run buildVite compiles your React code, tree-shakes unused modules, minifies JavaScript and CSS, and hashes all asset filenames for cache-busting. The output lands in a dist/ folder.
Verify the build output looks correct:
ls -lh dist/Expected output:
total 20K
drwxr-xr-x 2 user user 4.0K May 13 15:00 assets
-rw-r--r-- 1 user user 460 May 13 15:00 index.htmlPreview the Production Build Locally
Always preview the production build before deploying. Some environment variable issues and broken asset paths only appear in the production bundle:
npm run previewThis serves the dist/ folder on http://localhost:4173. If it loads without errors, you are ready to deploy.
Step 6: Deploy ReactJS on Ubuntu 26.04 with Nginx
A React production build is entirely static files: HTML, CSS, and JavaScript. Nginx is the ideal web server for this job. It serves static files with a tiny memory footprint, handles thousands of concurrent connections efficiently, and integrates cleanly with SSL.
Install Nginx
sudo apt install nginx -y
sudo systemctl enable --now nginxConfirm Nginx is running:
sudo systemctl status nginxYou should see active (running) in green.
Copy Build Files to the Web Root
Create a directory for your app and copy the production build into it:
sudo mkdir -p /var/www/my-react-app
sudo cp -r dist/* /var/www/my-react-app/Set correct file ownership so Nginx can read the files:
sudo chown -R www-data:www-data /var/www/my-react-appWhy chown to www-data: Nginx worker processes run under the www-data user. If the files belong to your personal user account, Nginx cannot read them and returns 403 Forbidden errors to visitors. This is one of the most common ReactJS on Ubuntu 26.04 setup mistakes.
Configure a Nginx Virtual Host
Create a new Nginx server block configuration file:
sudo nano /etc/nginx/sites-available/my-react-appPaste this configuration. Replace yourdomain.com with your actual domain or server IP address:
server {
listen 80;
server_name yourdomain.com;
root /var/www/my-react-app;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
error_page 404 /index.html;
gzip on;
gzip_types text/plain text/css application/json application/javascript;
}Why try_files $uri $uri/ /index.html: React Router manages routing on the client side. When a user refreshes a page at /dashboard or /settings, Nginx looks for a physical file at that path. That file does not exist. Without the try_files directive falling back to index.html, Nginx returns a 404 instead of letting React Router handle the route. This single line prevents the most confusing production bug in React deployments.
Why gzip on: Enabling gzip compression reduces the size of JavaScript and CSS files by 60 to 80 percent. This speeds up initial page loads, which directly impacts SEO and user experience.
Enable the configuration by creating a symbolic link:
sudo ln -s /etc/nginx/sites-available/my-react-app /etc/nginx/sites-enabled/Test the Nginx configuration for syntax errors:
sudo nginx -tExpected output:
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successfulReload Nginx to apply the changes:
sudo systemctl reload nginxStep 7: Configure UFW Firewall on Ubuntu 26.04
Ubuntu 26.04 LTS activates UFW (Uncomplicated Firewall) by default on many server configurations. If Nginx is running but your browser cannot reach the app, a UFW rule is likely blocking the traffic.
Allow HTTP and HTTPS traffic through the firewall:
sudo ufw allow 'Nginx Full'
sudo ufw reload
sudo ufw statusExpected output:
Status: active
To Action From
-- ------ ----
Nginx Full ALLOW Anywhere
Nginx Full (v6) ALLOW Anywhere (v6)Security note: Only open port 5173 on development machines. The Vite dev server was never designed for public internet exposure. It has no authentication, rate limiting, or TLS. Exposing it on a VPS is a security risk.
If you need to open the dev server only temporarily:
sudo ufw allow 5173/tcpRemove that rule once you are done testing:
sudo ufw delete allow 5173/tcpStep 8: Verify Your ReactJS Installation on Ubuntu 26.04
Open a browser and visit http://yourdomain.com or your server’s IP address. You should see your React app loading from the Nginx-served production build.
Run a final checklist from the terminal:
# Check Node.js and npm versions
node -v && npm -v
# Check Nginx is active
sudo systemctl status nginx
# Inspect recent Nginx logs for errors
sudo tail -20 /var/log/nginx/error.log
# Confirm build files are present
ls -lh /var/www/my-react-app/If error.log is clean and the files are there, your ReactJS on Ubuntu 26.04 setup is complete and production-ready.
Troubleshooting Common ReactJS Installation Errors on Ubuntu 26.04
Even with a clean setup, things sometimes go wrong. Here are the five most common problems you will encounter when you configure ReactJS on Ubuntu 26.04, along with their exact fixes.
1. nvm: command not found after installation
NVM was installed, but your current shell session has not loaded it yet. Run:
source ~/.bashrcIf you use Zsh instead of Bash, run source ~/.zshrc instead.
2. EACCES: permission denied when running npm
You ran npm as the root user. This creates files owned by root inside your project, and subsequent commands as a regular user fail. Fix it by switching to your non-root user and resetting the directory:
sudo chown -R $USER:$USER ~/my-react-appDo not use sudo npm install. Ever.
3. Cannot GET /your-route after Nginx deployment
Your Nginx config is missing the try_files $uri $uri/ /index.html; line in the location / block. Open your Nginx config, add that line, test with sudo nginx -t, and reload with sudo systemctl reload nginx.
4. Port 5173 is already in use
Another process is holding port 5173. Find and kill it:
lsof -i :5173
kill -9 <PID>Then restart your dev server.
5. npm ERR! EBADPLATFORM or npm ERR! notsup
Your Node.js version does not meet a package’s minimum version requirement. Check the failing package’s documentation, then install the correct Node.js version:
nvm install 22
nvm use 22
npm installHow To Update or Remove ReactJS on Ubuntu 26.04 LTS
Update Node.js to the Latest LTS
nvm install --lts
nvm alias default nodeThis installs the newest LTS release and sets it as your default. Your existing projects stay untouched.
Uninstall ReactJS and Clean Up
To fully remove a React project and its associated Nginx configuration:
# Remove project files
rm -rf ~/my-react-app
# Remove web root
sudo rm -rf /var/www/my-react-app
# Remove Nginx config
sudo rm /etc/nginx/sites-enabled/my-react-app
sudo rm /etc/nginx/sites-available/my-react-app
sudo systemctl reload nginxTo remove a specific Node.js version via NVM:
nvm uninstall 24This keeps your system clean and prevents leftover configurations from interfering with future projects.
Congratulations! You have successfully installed ReactJS. Thanks for using this tutorial for installing ReactJS on the Ubuntu 26.04 LTS (Resolute Raccoon) system. For additional help or useful information, we recommend you check the official ReactJS website.
