Purchasing a Domain + Hosting TextUtils on a VPS | Complete React Course in Hindi #18

Summary

In this tutorial, the presenter guides viewers through the process of hosting a React application on paid hosting after previously using GitHub Pages. Key steps include uncommenting code for routing, transitioning from the `gh-pages` package, and setting up a Virtual Private Server (VPS) on DigitalOcean. The video covers installing Nginx, deploying the React build, purchasing a domain from GoDaddy, and configuring DNS settings. The importance of adding an SSL certificate is also highlighted. Viewers are encouraged to explore the React playlist for more in-depth learning, making this a valuable resource for anyone looking to host their React applications.

Takeaways

• 😀 The previous video demonstrated how to host a React application for free using GitHub Pages with the gh-pages package.
• 🔄 In today's video, the focus shifts to hosting the application on a paid service, specifically using DigitalOcean.
• 🛠️ The speaker emphasized the importance of uncommenting code, particularly for routing components that were previously commented out.
• 📦 The speaker removed the gh-pages package and the homepage entry from package.json to prepare for the new hosting setup.
• 💻 After running 'npm run start', the application was successfully hosted on a normal URL instead of GitHub.
• 📝 To use the application properly, the speaker corrected usage of 'a' and 'href' tags to 'Link' and 'to' within the Navbar.
• 🚀 The speaker demonstrated the build process with 'npm run build' to create an optimized production build of the React app.
• 🌐 DigitalOcean offers a free credit for new users, allowing them to explore paid hosting options without initial investment.
• 🔑 The video provided a walkthrough on resetting the root password and accessing the droplet via SSH after rebuilding it.
• 🌟 The final setup involved installing Nginx, confirming its installation, and uploading the React app files to the server for hosting.

Q & A

What was the focus of the previous video mentioned in the transcript?

The previous video focused on hosting a React application for free using GitHub Pages and the gh-pages package.

Why did the presenter remove the router in the previous video?

The presenter removed the router because GitHub Pages does not support routing properly.

What changes did the presenter make to the React application in today's video?

The presenter uncommented previously commented-out lines of code, reintroduced the router and Navbar, and replaced 'a href' tags with 'Link to' components for routing.

What is the significance of uninstalling the gh-pages package?

The gh-pages package was uninstalled because the presenter no longer wanted to deploy the application on GitHub Pages, opting for normal hosting instead.

What hosting provider does the presenter use, and what benefit does it offer?

The presenter uses DigitalOcean, which offers a $100 credit for new accounts without requiring a referral link.

What steps did the presenter take to rebuild the VPS?

The presenter logged into DigitalOcean, selected the droplet to be destroyed, and initiated a rebuild to install Ubuntu on the droplet.

How does the presenter handle forgotten passwords for the droplet?

If the presenter forgets the password, they can reset it through DigitalOcean's interface, which sends a new password via email.

What web server software does the presenter install on the VPS?

The presenter installs Nginx as the web server software on the VPS.

How did the presenter upload the React application files to the server?

The presenter used FileZilla to upload the build files of the React application to the '/var/www' directory on the server.

What domain name did the presenter attempt to purchase, and what alternative did they consider?

The presenter attempted to purchase 'textutils.com' but found it taken. They then considered 'mytextutils.com' as an alternative.

What final configuration was done after purchasing the domain?

After purchasing the domain, the presenter edited the A record to point to their server's IP address.

What feature did the presenter mention needing to enable for the website to be secure?

The presenter mentioned needing to add an SSL certificate to enable HTTPS for the website.