How to Host a React App on a VPS With Nginx

TL;DR

Build the React application with npm run build, install Nginx on an Ubuntu VPS, and upload the generated build files to /var/www using FileZilla. Before deployment, restore React Router, replace anchor navigation with Link components, remove the GitHub Pages configuration, and test every feature locally. A custom domain can then be purchased and pointed toward the server.

Transcript

So guys we have fun in the previous video. We did a free hosting of our React application. And we did it very easily. We didn't have to involve in other matters, as we had a package gh-pages. Which helped us very much. And our whole react app, by making another branch, and in that doing deploy and settings of Github. It did all these work and made ... Read More

Key Insights

• GitHub Pages configuration is unnecessary for normal VPS hosting. The homepage entry is removed from package.json, and the gh-pages package is uninstalled because deployment will use Nginx on a server instead of a special GitHub branch.
• React Router must wrap components that use Link. The error stating that Link should not be used outside a router appears when Navbar is rendered outside the router, and correcting the component placement allows the application to compile and navigate normally.
• Client-side navigation should use Link and to in this application. Anchor elements using a and href are changed back because the earlier substitutions were made only while adapting the project to GitHub Pages routing limitations.
• Local testing should precede the production build. The demonstrated checks cover uppercase conversion, lowercase conversion, text clearing, text copying, removal of extra spaces, dark mode, and the About component before npm run build is executed.
• The production bundle is created with npm run build. The command generates an optimized production build inside the build folder, which contains the static files later transferred to the web server.
• A DigitalOcean Droplet can be rebuilt with Ubuntu before deployment. Rebuilding reinstalls Ubuntu on the existing Droplet, while a forgotten root password can be replaced through the Access section and delivered by email.
• Nginx serves the React application's static production files. After apt update and Nginx installation, visiting the server IP displays the Nginx welcome page, confirming that the web server is available before application files are uploaded.
• FileZilla transfers the build files into /var/www on the VPS. The existing file in that location is deleted, the contents of the React build are uploaded, and the application becomes accessible through the server IP address.

Questions & Answers

Q: How do you prepare a GitHub Pages React app for VPS hosting?

Restore the router and any components that were disabled for GitHub Pages, then change navigation elements from a with href back to Link with to. Remove the homepage entry from package.json and uninstall gh-pages because the application will no longer use GitHub Pages deployment. Start the development server and test the application before creating the production build.

Q: How do you fix the Link outside a router error in React?

The error occurs when a component containing Link is rendered outside the router. In the demonstrated application, Navbar was placed in the wrong location after previously commented code was restored. The fix is to ensure Navbar and every other component using Link are included inside the router, then compile and test the application again.

Q: How do you create a production build of a React app?

Run npm run build after the application works correctly in the development server. The command creates an optimized production build in the build folder. The demonstrated workflow tests uppercase conversion, lowercase conversion, clearing, copying, extra-space removal, dark mode, and navigation first, then transfers the generated static build files to the VPS.

Q: How do you prepare a DigitalOcean Droplet for React hosting?

Rebuild the existing Droplet to install Ubuntu, after first checking that it contains nothing currently needed. Copy its IPv4 address and connect from PowerShell with ssh root@ followed by that address. If the root password is forgotten, use Reset root password under Access, retrieve the replacement password from email, and complete the login process.

Q: How do you install Nginx on an Ubuntu VPS?

Connect to the Ubuntu server through SSH, run apt update, and then run sudo apt install nginx. Confirm the installation when prompted by pressing Y and Enter. After installation finishes, open the server's IP address in a browser. The Welcome to nginx page confirms that Nginx is installed and responding to requests.

Q: How do you upload a React build to Nginx with FileZilla?

Connect FileZilla to the DigitalOcean host using the server details and root account. Navigate to /var/www on the VPS, remove the existing file shown there, and upload the contents produced in the React project's build folder. After the transfer, visit the server IP to verify that the static React application is being served.

Q: What should you test before deploying a React application?

Test the application through its local development server after restoring the normal router configuration. The demonstrated checks include uppercase and lowercase text conversion, clearing text, copying text, removing extra spaces, enabling and disabling dark mode, and opening the About component. Routing errors and unfinished presentation issues should be identified before npm run build is executed.

Q: How do you purchase a custom domain for a hosted React app?

Search for the preferred domain through GoDaddy and try a variation when the exact name is unavailable. The demonstration checks textutils.com, then considers names such as mytextutils.com and mytextutils.in. During checkout, choose the registration period carefully and decline unwanted additions such as a website builder or professional email before completing payment.

Summary & Key Takeaways

• The React application is converted from its GitHub Pages configuration back to a normal deployment setup. React Router, Navbar, About, Route, and Switch are restored, while anchor elements using href are changed back to Link components using to. The homepage field and gh-pages package are removed before local testing begins.

• After confirming that text conversion, clearing, copying, extra-space removal, dark mode, and navigation work, npm run build creates an optimized production build. A DigitalOcean Droplet is rebuilt with Ubuntu, accessed through SSH as root, and prepared by running apt update followed by installation of the Nginx web server.

• The Nginx welcome page confirms that the server is responding at its IPv4 address. FileZilla connects to the VPS with the root account, the existing content under /var/www is removed, and the React build files are uploaded there. A GoDaddy domain purchase is then started for a custom address.

• Key Insights