Hostinger CyberPanel Setup For React Applications

1Initializing CyberPanel on Hostinger

The beauty of Hostinger VPS hosting is their 1-click application templates. You do not need to manually install OpenLiteSpeed or CyberPanel via SSH.

Once installed, Hostinger will provide you with a specific URL (usually your IP address followed by port :8090, e.g., https://192.168.1.1:8090) alongside an admin username and a generated password to access the CyberPanel graphical interface.

2Creating Your Domain Workspace

Now that you are inside CyberPanel, we need to create a secure virtual host (a folder) for your React application.

• ▶On the left sidebar, navigate to Websites > Create Website.
• ▶Select Package: Default.
• ▶Select Owner: admin.
• ▶Domain Name: Enter your actual domain name (e.g., myreactapp.com). Remember, do not enter www or https:// in this box.
• ▶Email Address: Provide a working admin email.
• ▶PHP Version: (Irrelevant for React, but 8.1 is a safe default).

Crucial Step: Under the "Additional Features" checkboxes, make sure you tick SSL and Open_basedir Protection. Click Create Website.

Note: CyberPanel will attempt to generate a free Let's Encrypt SSL. This will only succeed if you have already pointed your domain's DNS A-Record to this Hostinger VPS IP address.

3Uploading The React Client

You cannot upload your raw React source code (the files containing `package.json` or `node_modules`). Browsers do not understand JSX. You must compile the application down to raw vanilla web files on your local machine first.

Deployment Deployment Method (The CyberPanel File Manager)

CyberPanel has an excellent built-in file manager, eliminating the need to install complex FTP clients like FileZilla if you prefer a quick web GUI approach.

1. Inside your CyberPanel dashboard, go to Websites > List Websites.
2. Find your domain and click the File Manager icon on the right side.
3. Navigate into the public_html folder. This folder is the exact root directory that OpenLiteSpeed serves to the public web browser.
4. Delete the default index.html (the CyberPanel placeholder page).
5. Locate the dist (or build) folder on your local computer from running npm run build.
6. Zip the contents of that folder (not the folder itself, but the index.html and assets directory inside it).
7. Upload that `.zip` file into the public_html folder via the CyberPanel File Manager.
8. Right-click the uploaded zip file and extract it directly into public_html.

At this exact moment, if you visit your domain name in an incognito window, your React application will render!

4Fixing Client-Side Routing (The 404 Error)

React routers (like `react-router-dom`) handle page navigation dynamically in the browser using JavaScript. If a user manually types yourdomain.com/about into their browser, the OpenLiteSpeed server will look for an actual physical folder named /about on the hard drive. It won't find one, and it will throw a 404 Not Found error.

We must configure the server with a "fallback rewrite" rule. Essentially, we tell OpenLiteSpeed: "If you cannot find the exact file requested, just load index.html and let React figure it out."

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ index.html [QSA,L]

Save the rewrite rules. Your React Router links will now correctly refresh without throwing 404 errors! OpenLiteSpeed parses this Apache-style .htaccess syntax natively.