iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Antihost offers Linux VPS plans with full root access, unlimited traffic on a 1 Gbps port and a 14-day free trial.
To deploy a client-rendered React app on Ubuntu, create its production output, copy that complete output into an Nginx document root, and configure an Ubuntu server block with try_files $uri $uri/ /index.html;. That fallback is what lets React Router serve deep links instead of returning a 404. Test the configuration with sudo nginx -t, reload Nginx, then verify both the home page and a nested route over the public hostname or IP.
What this deployment actually does
A typical React single-page application (SPA) is compiled into static files: an index.html file plus JavaScript, CSS, images, fonts and other generated assets. Nginx does not run React code. It serves those files over HTTP and HTTPS. Once the browser downloads index.html and the JavaScript bundle, the React application renders in the browser and handles navigation.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
The deployment therefore has two separate parts:
- Build time: your project’s toolchain turns source code into a production directory.
- Server time: Nginx serves that directory and sends unknown application paths back to
index.htmlfor client-side routing.
This guide covers a static React build served directly by Nginx on Ubuntu. If the project uses server-side rendering (SSR), server components or another Node.js runtime, it is not a static-only deployment; the runtime must stay running and Nginx should proxy requests to it instead.
React’s current documentation recommends starting a new app or website with a framework. Existing Create React App, Vite and similar projects can still be deployed as static output when their own documentation says they produce a browser-ready build.
#1 Best Overall
- Powerful Turbo Fan:CAGIWIRU Electric Air Duster have reached speed up to 130000RPM,Can efficient remove dust and debris.With LED light and Three Adjustable Speed to meet with different cleaning tasks.
- With Attached USB C Fasting Charging cable.Charing 3 hours,Enjoy up to 240 minutes of use on the lowest setting, For third speed can use for 25mins.with four charging options to meet with your needs.
- Wide Application: attached 5 different nozzles,making it suitable for a variety of scenes, such as car,pet, pc, keyboards, and other electronic devices. It also serves for office and home clean duster.
- Handy Design & Portable:Cordless air duster electric nozzle is Light weight and small size, design and comfortable to hold and space saving, convenient to carry around. You can put it in your room or inside the car without taking up space.
- Economical &Reusable: Built durable materials with a long-lasting battery,our CAGIWIRU air duster it's a sustainable alternative to disposable air cans.
Choose the right deployment model first
| Project type | What Nginx serves | What the Nginx configuration needs | Typical output |
|---|---|---|---|
| Static SPA (Create React App, Vite and comparable tools) | Generated HTML, JavaScript, CSS and assets from disk | root, index index.html and an SPA fallback with try_files |
build/ for Create React App; commonly dist/ for Vite |
| SSR or framework runtime | A running application process | A reverse-proxy location such as proxy_pass, plus the framework’s process and deployment requirements |
Framework-specific; not necessarily a self-contained static directory |
| Static site with an API | Frontend files from disk and API responses from another service | Static SPA configuration plus a separate /api/ reverse-proxy location |
Frontend output directory and an independently running API |
Do not assume that every React project creates a directory named build. Check the project’s build script and the command’s final output. Point Nginx at the directory that contains the generated index.html, not at the project’s source directory.
Prerequisites on the Ubuntu server
- An Ubuntu server with a public IP address or public DNS name.
- SSH access with an account that can use
sudo. - A completed React project and its documented production build command.
- A domain name whose DNS can point to the server if you plan to use a domain or HTTPS certificate.
- Inbound firewall access for HTTP (port 80) and, once enabled, HTTPS (port 443).
Use a supported Ubuntu release and keep the operating system updated. The exact package version can vary by Ubuntu release, so treat the commands below as the normal apt workflow rather than a promise of one particular Nginx version.
Free tools Windows power users keep installed
One-click scans. No signup required.
Step 1: Create the production React build
Run the command documented by the project from the directory containing package.json. For many projects this is:
npm install
npm run buildSome projects use another package manager or a different script. Use the lockfile and scripts that the project supplies. When the command completes, inspect the result:
ls -la
find build -maxdepth 2 -type f | headReplace build in the inspection command with dist or the actual output directory. You should find an index.html and generated asset directories. If there is no index.html, you may have run a development command, selected an SSR target, or looked in the wrong directory.
Build-time paths and environment values
Static assets are addressed by the browser after compilation. Confirm that the project’s configured base path matches how it will be published. A site at the domain root normally uses root-relative or correctly generated paths; a site mounted under a subdirectory needs the toolchain’s base/public-path setting adjusted before building. An incorrect base path commonly appears as a page with missing JavaScript or CSS even though Nginx returns index.html.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Do not copy source files as the deployment
Nginx should receive the generated production output, not src/, node_modules/ or development configuration. Copy the complete output directory, including hashed asset folders and any files that the application expects at the root.
Rank #2
- Screen Cleaner is Your Screen’s New Bestfriend! - EVEO is proud to present a screen cleaner that’s perfectly suited for your TV. Meet your new screen cleaner, computer screen cleaner, laptop cleaner, iPad cleaner, Macbook,tv cleaner or any other electronic device. Our screen cleaner spray and wipe along with the included plush microfiber cloth, easily removes dust, fingerprints & other smudges on the screen’s surface. Clean effectively for a streak-free screen
- Gentle on your Screens - Our screen cleaner spray and wipes is compatible to be used even for the most sensitive LCD, LED, CRT, and OLED screens in proper use. Be at ease knowing that this product is compatible with all the major brands: LG, SONY, Samsung, Sharp, iPad, iPhone, Android screens, Kindle, PC monitors - we’ve got you covered! Can be used as LCD screen cleaner, tv cleaner, smart tv screen cleaner, and more
- Premium Super Soft Plush Microfiber Cloth - Included in this efficient screen cleaning kit. This screen cleaner spray and wipe has our signature plush microfiber cloth specially designed to comply with screens and monitors and leave them streak-free. Has been shown to effectively absorbs stubborn stains, zero streaks, and no fiber shedding. Always use this together with our screen cleaner for the best results
- Easy-to-Use Screen Cleaner Kit + microfiber cleaning cloth - The EVEO Screen Cleaning Kit will easily be your new favorite tool when it comes to taking care of the things you love most, quick and easy solution for a streak-free screen. Simply screw on the sprayer gun on the screen cleaner bottle. Spray the cleaning liquid onto the microfiber cloth, then wipe the screen until desired cleanliness & shine is achieved.
- Quality Screen Care Kit Worth Purchasing - Enjoy a convenient Screen Cleaner anytime, anywhere you need it. Your satisfaction is our top priority. We stand behind the quality of our products and that’s why, you shouldn’t be worrying at all. We manufacture the Best Screen Cleaner. and can be used for laptop cleaning kit, laptop screen cleaner, tv screen cleaner for smart tv. MacBook screen cleaner, monitor cleaner or screen cleaner spray for electronic devices with microfiber cleaning cloth
Step 2: Install and start Nginx on Ubuntu
Ubuntu uses Nginx server blocks for site-specific settings. Its default site serves /var/www/html. Install the package and start it:
sudo apt update
sudo apt install nginx
sudo systemctl enable --now nginx
sudo systemctl status nginxThe status command should show an active service. If the service fails, read the system journal before changing application files:
sudo journalctl -u nginx --no-pager -n 100At this point, opening the server’s public IP should show Nginx’s default page, assuming DNS and the firewall point to this machine.
Recommended Free Tools
Step 3: Create a document root and copy the build
The Nginx root directive determines where files are read from. Create a separate directory for the site and copy the contents of the build output into it. The trailing /. in the copy command means “copy the contents,” including hidden files, rather than creating an extra nested directory:
sudo mkdir -p /var/www/example.com/html
sudo cp -a build/. /var/www/example.com/html/Use dist instead of build when that is the project’s output. Verify the result:
ls -la /var/www/example.com/html
sudo test -f /var/www/example.com/html/index.html && echo "index.html is present"For a static site, Nginx only needs read access. A conventional ownership arrangement is to keep deployment files owned by an administrative account while allowing the web server to read them:
sudo chown -R $USER:www-data /var/www/example.com
sudo find /var/www/example.com -type d -exec chmod 755 {} ;
sudo find /var/www/example.com -type f -exec chmod 644 {} ;These permissions are examples, not a substitute for your organization’s security policy. Avoid making the document root world-writable. If you deploy with a separate release user or automation account, assign ownership and group access accordingly.
Rank #3
- 【Large size】：Measuring 800 x 300 mm/ 31. 5×12 inches, which is wider and taller than others. Large mouse pad can perfectly fit your keyboard and mouse of any size, and there is also ample space for peripherals such as phones, tablets, etc.
- 【LED backlight mouse pad】：Blade Hawks RGB mouse pad provides 7 static modes and 7 dynamic modes will give you the options you are looking for. Power-off memory function remembers the last lighting mode you selected. The super glow fiber Chroma will give you a colorful gaming setup that you want.
- 【Anti-slip rubber base】：Made from Natural rubber, this gaming mousepad will firmly grip your desktop, allowing you to enjoy the ultimate precision in the games you are most passionate about. It also comes with a texture that enhances this ability even further.
- 【Smooth and waterproof surface】: Micro-textured cloth surface, for extremely precise mouse control and a smooth movement. When liquid splashes on the gaming mouse pad, it forms water droplets and slides down. Will not delay your work or gameplay.
- 【Plug and play】: This mouse and keyboard pad is powered by USB, plug and play, no driver required. One button control light modes. Press one time to change the lighting mode, press twice to change the brightness, press and hold about 3 seconds turn ON/OFF.
Step 4: Add an Ubuntu Nginx server block for the React SPA
Create a site file in /etc/nginx/sites-available/:
sudo nano /etc/nginx/sites-available/example.comUse this minimal configuration for a domain served from the root path:
server {
listen 80;
listen [::]:80;
server_name example.com www.example.com;
root /var/www/example.com/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}What each directive means
listen 80andlisten [::]:80accept IPv4 and IPv6 HTTP traffic.server_nameselects this block for the requested hostname. Replace both names with the names you actually control; omitwwwif you do not use it.rootmust be the directory that directly contains the generatedindex.html.index index.htmltells Nginx which file to return for a directory request.try_files $uri $uri/ /index.html;first checks for a real file or directory. If neither exists, it returns the SPA entry point so React Router can resolve the path in the browser.
Why the fallback prevents React Router 404 errors
Suppose the application has a client route at /dashboard. Clicking to that route inside the already-loaded app can work because React Router handles the history change. A direct request to /dashboard, however, reaches Nginx first. Without the fallback, Nginx looks for a physical file or directory named dashboard and returns 404. With try_files, Nginx returns index.html; the browser loads the bundle, and React Router displays the dashboard route.
The fallback should not hide genuinely missing static assets. Because try_files checks existing files first, a request for a real JavaScript or image file is served directly, while an application URL is sent to the entry point.
Step 5: Enable the site, test the configuration and reload
Enable the server block with the Ubuntu sites-available/sites-enabled pattern:
sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/example.com
sudo nginx -t
sudo systemctl reload nginxnginx -t must report a successful syntax and configuration test before you reload. A reload applies the new configuration without stopping existing connections. If the default site is catching requests unexpectedly, disable its symlink after confirming that no other site depends on it:
sudo rm /etc/nginx/sites-enabled/default
sudo nginx -t
sudo systemctl reload nginxRemoving the default symlink is optional when the server hosts other sites. In a multi-site setup, keep one server block per hostname and give each block its own document root. Avoid overlapping or duplicate server_name values, which can make Nginx select a different block than you expect.
Step 6: Point DNS and verify the public endpoint
Create an A record for the domain’s IPv4 address and, if you use IPv6, an AAAA record for the server’s IPv6 address. DNS changes can take time to appear according to the record’s TTL. You can test the site by hostname or by the server’s public IP while DNS is being updated.
Rank #4
- 【Softer and More Comfortable】Vaydeer wrist rest has unique diamond pattern, which is the combination of softness and aesthetics. The materials of wrist rest are improved into higher quality memory foam and covered with silky smooth lycra. The computer wrist rest makes you as comfortable and cushiony as like rest your wrists on clouds.
- 【Ergonomic Wrist Saver】The wrist rests for keyboard and mouse comes with a 17.32×3.15×0.83 inch keyboard wrist pad and a 5.94×3.15×0.83 inch mouse wrist support. Based on ergonomic design, the unique concave shape is the perfect fit for your wrist joints. The wrist rest pad fits most computer keyboards and laptops, improve hand and wrist posture, release your wrist and arm stress.
- 【Non-Slip Rubber Bottom】Featuring an anti-skid silicone base on the bottom, this wrist keyboard support stays firmly in place on your desk, preventing the padding from sliding around, ensuring stable and consistent wrist support during extended computer sessions.
- 【Better Experience & Pain Relief】Our keyboard arm rest is beneficial to alleviate the soreness caused by direct contact and friction between your arm and a hard desk surface, reducing the risk of wrist fatigue or carpal tunnel. The soft texture of memory foam can evenly distribute the pressure around your wrists and provide good support with just enough give.
- 【Helpful in Multiple Scenarios】Whether you're working, studying, writing, typing, gaming, this keyboard and mouse rest combo is an essential accessory to add comfort and support to your hands and wrists. It’s also a great gift for men, women, family, friend, coworker, gamer, teacher, etc.
- Open
http://example.comand confirm that the React home page renders. - Open a known nested route such as
http://example.com/dashboarddirectly in a new tab. - Refresh that nested route. It should still render rather than return an Nginx 404.
- Open the browser’s developer tools and inspect the Network panel for JavaScript, CSS, font and image requests that return 404.
- Check the server response and the Nginx logs if the result differs from the local build.
Useful diagnostics include:
curl -I http://example.com/
curl -I http://example.com/dashboard
sudo tail -f /var/log/nginx/access.log /var/log/nginx/error.logA successful document response does not prove that every asset path is correct. A page that displays only a blank shell often means the HTML loaded but the compiled JavaScript URL points to the wrong base path or was not copied to the document root.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallStep 7: Add HTTPS for a production site
HTTPS is a separate step from building the React assets. Obtain a certificate from a certificate authority such as Let’s Encrypt, then configure an Nginx TLS server block with the certificate and private-key paths. A typical arrangement keeps the SPA configuration on port 443 and redirects HTTP on port 80:
server {
listen 80;
listen [::]:80;
server_name example.com www.example.com;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
listen [::]:443 ssl;
server_name example.com www.example.com;
root /var/www/example.com/html;
index index.html;
ssl_certificate /path/to/fullchain.pem;
ssl_certificate_key /path/to/privkey.pem;
location / {
try_files $uri $uri/ /index.html;
}
}Use the certificate manager’s actual paths and any renewal instructions it supplies; do not copy the example paths literally. Permit port 443 in the server firewall, test with sudo nginx -t, reload Nginx, and then verify that an HTTP request redirects to the HTTPS URL and that a deep route works over HTTPS.
Optional tuning after the basic deployment works
Make one change at a time and retest. Optimization should not obscure a basic routing or asset-path problem.
Compression
Nginx can gzip text-based responses such as HTML, CSS, JavaScript and JSON. Enable compression according to the Ubuntu/Nginx version and your organization’s policy, and confirm in the browser that the response is compressed. Do not treat compression as a fix for missing files.
Cache headers for generated assets
Many React toolchains put content hashes in JavaScript and CSS filenames. Those files can generally receive a long-lived cache policy because a changed build creates a new name, while index.html should be revalidated more frequently so visitors discover the newest asset names. Match the cache rule to the filenames your build actually produces; never assign an immutable policy to files whose names can be overwritten in place.
Security headers
Headers such as a carefully designed Content-Security-Policy, Referrer-Policy, X-Content-Type-Options and a suitable frame policy can reduce browser-side risk. Introduce them after checking the application’s scripts, fonts, APIs and embedded content, because an overly strict policy can break a working app.
Best Value
- 【No Drill Mounted】Cable management tray can be assembled in as little as 3 minutes or less-simply. Side clips easily clampe the edge of desk, pass through the holes on the sides, and secure excess cables with baskets. Desk cable management supports inward or outward installation to meet your needs in different scenarios, and provides you with great convenience when collecting and organizing wires.
- 【Rubber Pad Protects Desk】Wire organizer under desk built-in soft rubber pads on the clamp protect your desk from scratches, so you will not damage your furniture or office.
- 【Sturdy and Beautiful】Cord management under desk is made of high-quality carbon steel and holds about 15 lbs. The wire basket has 2 holes on each side of the tray to enable your cables to pass freely. Cable baskets are suitable for desk thickness use from 0.4" to 2.4".
- 【Space Saving & Keep Organized】Desk cable management tray holds all your power cords, outlet strips, USB hubs and computer transformers hidden from your feet, and the data cables will not enter the vacuum cleaner to keep your desk clean and tidy. Desk wire organizer is also suitable for use in the kitchen and outdoors.
- 【Reduce Safety Risks】Cable tray under desk keeps all plugs away from your kids, no more worry about tripping. Using 2 holes wire tray saves extra space, helps you easily cabling and wire protection. The mesh design is not easy to accumulate dust, but avoids safety accidents caused by messy wires.
Proxying an API
If the frontend calls an API on the same public origin, a separate location can proxy that path to the API process:
location /api/ {
proxy_pass http://127.0.0.1:3000/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}The upstream address, trailing-slash behavior and authentication requirements are application-specific. Place the API location alongside the static location and verify that API requests are not accidentally sent to index.html.
Common failures and precise fixes
| Symptom | Likely cause | What to check or change |
|---|---|---|
| Home page is an Nginx 404 | The root directory is wrong or lacks index.html. |
Run sudo ls -la /var/www/example.com/html; make the root point to the directory containing the file and reload after testing. |
Home page works, but refreshing /dashboard returns 404 |
No SPA fallback in the active server block. | Add try_files $uri $uri/ /index.html; inside location /, run sudo nginx -t, then reload. |
| Blank page and JavaScript/CSS 404s | Wrong build base path, incomplete copy, or an extra directory level. | Inspect the generated HTML URLs, browser Network panel and document-root listing. Copy the contents of the output directory, not the directory itself. |
| Nginx reports “permission denied” | The web-server user cannot traverse a parent directory or read a file. | Check directory execute permissions and file read permissions; use namei -l /var/www/example.com/html/index.html to inspect every path component. |
| The wrong site appears | The default server block is still selected, DNS points elsewhere, or hostnames overlap. | Check enabled symlinks, server_name values, DNS resolution and the response headers; then test the intended block with the correct hostname. |
nginx -t fails |
Syntax error, missing semicolon, duplicate/conflicting directive or invalid certificate path. | Read the exact file and line number in the test output, correct that item, rerun the test and only then reload. |
| HTTPS works for the home page but not an API | The API proxy, CORS policy or upstream process is not configured for the TLS server block. | Review the active /api/ location, upstream status and browser Network errors; do not route API failures to the SPA fallback. |
Static serving versus runtime proxying
Static serving is the simplest and most resilient option when the build contains everything the browser needs. Nginx can serve it without Node.js remaining online, and a release can be rolled back by replacing the document-root contents with a previous build. This model does not execute server-side React code and cannot provide per-request rendering from the server.
A runtime proxy is required when the framework’s deployment target is SSR, when pages depend on server-only code, or when the application itself listens on a port. In that design, Nginx terminates HTTP/HTTPS and forwards requests to the running process. Keep the process manager, environment variables, health checks and log rotation separate from the Nginx static-file configuration.
Single-site and multi-site layouts
For one site, a dedicated root such as /var/www/example.com/html and one enabled server block keep ownership clear. For several sites, repeat the pattern with a unique file, hostname and root for each:
/etc/nginx/sites-available/site-a.example→/var/www/site-a.example/html/etc/nginx/sites-available/site-b.example→/var/www/site-b.example/html
Each block should have the correct server_name. A request’s Host header determines which block Nginx chooses; the filesystem directory alone does not.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →A repeatable release checklist
- Confirm the project’s documented production command and output directory.
- Build from the intended commit and verify that the output contains
index.html. - Copy the output contents into the directory named by Nginx’s
root. - Confirm read and directory-traverse permissions.
- Check that the server block has the correct hostnames and
try_filesfallback. - Run
sudo nginx -tbefore every reload. - Reload Nginx and inspect its status.
- Test the public home page, a deep route and representative asset URLs.
- For production, verify the certificate, HTTP-to-HTTPS redirect and port 443 access.
- Keep the previous build available so a failed release can be restored quickly.
The key boundary is simple: the build tool decides what files exist, while Nginx decides how requests map to those files. Correctly joining those two decisions—especially the document root and SPA fallback—eliminates most React-on-Nginx deployment errors.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
