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

CodeWithHarry
22 Aug 202115:12

Summary

TLDRIn 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.

Outlines

plate

Dieser Bereich ist nur für Premium-Benutzer verfügbar. Bitte führen Sie ein Upgrade durch, um auf diesen Abschnitt zuzugreifen.

Upgrade durchführen

Mindmap

plate

Dieser Bereich ist nur für Premium-Benutzer verfügbar. Bitte führen Sie ein Upgrade durch, um auf diesen Abschnitt zuzugreifen.

Upgrade durchführen

Keywords

plate

Dieser Bereich ist nur für Premium-Benutzer verfügbar. Bitte führen Sie ein Upgrade durch, um auf diesen Abschnitt zuzugreifen.

Upgrade durchführen

Highlights

plate

Dieser Bereich ist nur für Premium-Benutzer verfügbar. Bitte führen Sie ein Upgrade durch, um auf diesen Abschnitt zuzugreifen.

Upgrade durchführen

Transcripts

plate

Dieser Bereich ist nur für Premium-Benutzer verfügbar. Bitte führen Sie ein Upgrade durch, um auf diesen Abschnitt zuzugreifen.

Upgrade durchführen
Rate This

5.0 / 5 (0 votes)

Ähnliche Tags
React HostingWeb DevelopmentDigitalOceanVPS SetupSSL CertificateApp DeploymentTech TutorialFrontend FrameworkWeb ApplicationsCoding Tips
Benötigen Sie eine Zusammenfassung auf Englisch?