How to Deploy Your React JS Frontend App on GO54 in 5 Minutes

Deploying your React JS application to a live server is crucial in making your project accessible to the world. GO54, a prominent web hosting provider in Africa, offers a user-friendly platform for achieving this. In this guide, we'll walk you through the process of deploying your React app on GO54 in just 5 minutes.

Why GO54?

GO54, formerly known as WhoGoHost, has established itself as a trusted provider of web hosting and other digital services in West Africa. Here are a few reasons why it's a great choice for deploying your React app:

Local Expertise: GO54 understands the specific needs and challenges of the African market.
Affordable Plans: They offer a range of hosting plans to suit different budgets and project sizes.
Reliable Infrastructure: GO54 boasts a robust infrastructure with high uptime and fast loading speeds.
User-Friendly Interface: Their cPanel is intuitive and easy to navigate, making deployment simple even for beginners.
Customer Support: They provide excellent customer support to assist you with any issues or questions you might have.

Prerequisites

Before you start, ensure you have the following:

React JS Application: Ensure your React app is ready and tested locally.
Node.js and npm: These are required for building your React app. Download and install from Node.js.
GO54 Account: Sign up for an account on GO54.
Domain Name: Either a new domain registered via GO54 or an existing domain you can connect to your GO54 hosting.

Step 1: Prepare Your React App for Deployment

First, make sure your React app is ready for production. This involves creating an optimized build of your app.

Navigate to your project directory:
```
 cd path/to/your-react-app
```
Run the build command:
```
 npm run build
```
This will create a build directory in your project folder containing the optimized static files.

Step 2: Create a GO54 Account and Choose a Hosting Plan

Sign Up and Log In: Visit GO54 and create an account if you don’t have one. Log in to access your dashboard.
Add a New Site: In your dashboard, navigate to the "Hosting" section and click on either of the two options available which are Shared Hosting and Cloud Hosting. we are going to be using Shared Hosting in this tutorial.
Select a Hosting Plan: Choose a hosting plan that suits your needs. For a React app, a basic plan is typically sufficient.

Step 3: Register or Connect Your Domain

Register a New Domain: If you don’t have a domain, you can register one through GO54 during the site setup process.
Transfer your domain from another registrar: If you already own a domain and you want to transfer it from another registrar, follow the instructions provided by GO54 to point your domain to their servers.
Connect an Existing Domain: If you already own a domain, follow the instructions provided by GO54 to point your domain to their servers.

Step 4: Upload Your React App

Access the File Manager: Go to the cPanel from your GO54 dashboard and open the "File Manager."
Locate your purchased shared hosting and click on "Manage"

Click on "CPANEL" to access your Cpanel Dashboard.

Click on "FILE MANAGER" inside your "CPANEL" dashboard
Navigate to the public_html Directory: In the File Manager, go to the public_html directory, which is the root directory for your site.

Click on "public_html"
Upload the Build Folder: Upload the contents of the build folder from your React project to the public_html directory. You can do this by compressing the build folder into a ZIP file and then upload and extract it in the File Manager.

After clicking on "public_html" the next thing to do is click on "Upload" at the top bar.

This will open a new tab for you, which will display the image below. Click on "Select File" to proceed to upload your ZIP file

Step 5: Configure Your Application

Ensure Correct Placement: Verify that the contents of the build folder (including index.html and static files) are directly under public_html.
Configure .htaccess for Single Page Applications: If your React app uses client-side routing, you need to configure the .htaccess file to handle routing correctly. Create or edit the .htaccess file in public_html with the following content:
```
 plaintextCopy codeRewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]
```
Click on "Settings" after you are done moving the content out of the build folder to be directly under public_html show hidden files. You might see a file named .htaccess. If you can't find it, create a new file and name it .htaccess then copy and paste the above code inside.

Step 6: Finalize and Test

Verify Settings: Ensure all files are correctly placed and that the index.html file is in the public_html directory.
Test Your Site: Visit your domain in a web browser to check if your React app loads correctly. If everything is set up properly, your app should be live.

Conclusion

Deploying your React JS frontend app on GO54 is a quick and efficient process. By following these steps, you can have your app online in just a few minutes. GO54 provides robust hosting services and an intuitive user interface, making it an excellent choice for hosting your React applications. For more details and support, visit the GO54 knowledge base.

Happy deploying!

I'd love to connect with you on Twitter | LinkedIn | Instagram.

Join the GO54 Community

We are passionate about buildi ng a thriving community of African businesses and individuals who are leaping into the digital world. As we embark on this exciting journey as GO54, we invite you to join our community.

Additional Resources

GO54 website: go54.com
GO54 AI Website Builder: Create Your Dream Website Easily with the GO54 Website Builder
GO54 blog: blog.go54.com
GO54 community: https://community.go54.com/
GO54 Twitter Page: GO54 (formerly Whogohost) (@GO54_hq) / X
Sendchamp website: sendchamp.com/
Sendchamp documentation: docs.sendchamp.com
Pagechap website: pagechap.com
Bodsquare website: bodsquare.com