The Manual Hosting Struggle
Normally, when we create a React app, the coding part is fun and interactive. But once the development phase completes, the real confusion begins:
- Which files should be uploaded to the server?
- Do I upload the entire source code directory?
- Should I include
node_modulesin the transfer? - What is the purpose of the
distorbuildfolder? - How do I connect and map domains/subdomains without breaking things?
When something breaks (like a blank screen, missing routing links, or 404 pages), we are forced to open hPanel, browse File Manager, look up DNS records, or check deployment logs manually.
Today, we are changing this workflow. By utilizing Google Antigravity, the Gemini LLM, and the Hostinger MCP, we can manage, configure, and execute deployments right from our IDE.
What is Hostinger MCP?
MCP stands for Model Context Protocol. You can think of it as a secure bridge or translator between an AI coding assistant and external services.
Instead of Gemini only recommending code changes, the Hostinger MCP empowers Gemini to call actual hosting tools on your behalf. Depending on the tools configured in your MCP setup, this allows you to:
- Deploy using MCP: Deploy static frontend files directly.
- Configure Domain Settings: Retrieve WHOIS profile details or check availability.
- Manage Databases: List databases, create new tables, and update configuration credentials.
- Inspect Live Settings: Read website logs and troubleshoot deployment status without tab-switching.
Step-by-Step React Deployment
Let's walk through the exact steps to build and host your website with Hostinger MCP using the beautiful step-card layout.
Run Locally to Test Stability
First, ensure your project is stable locally. Run the development commands to launch your local server:
npm install
npm run devOr run the Vite development server directly:
npx vitePrompt Gemini for Build Specifications
Instead of guessing configuration paths and build settings, ask Gemini in Google Antigravity to analyze your package setup:
"Analyze this React project and tell me the correct production build command."Compile the Production Build
Run the build command suggested by the AI (typically npm run build) to compile the React source code into static production-ready files:
npm run buildThis generates an optimized static build directory (typically dist/ for Vite or build/ for Create React App). Never upload your raw source code or node_modules folder to shared hosting.
Deploy using Hostinger MCP
Prompt Gemini to automatically upload your static build files straight to Hostinger shared hosting using MCP tools:
"Use Hostinger MCP to deploy the production build of this React app to my Hostinger shared hosting. Deploy the dist folder as a static website."The AI assistant will handle the network connections, upload the build directory, and write the files to the web server's public_html folder.
Check Live Status
Request Gemini to verify the deployment status and retrieve the active live URL:
"Check the deployment status and confirm whether the website is live."Redeployment & Updates
In real-world development, you don't deploy only once. If you make a design or text change, you simply build again:
npm run buildThen, request the assistant:
"Redeploy the latest React build to the same Hostinger website and check if the new version is live."The AI handles replacing the old public_html files automatically.
Manual vs. MCP Workflow Comparison
| Task Step | Manual Workflow | MCP Workflow (IDE-Integrated) |
|---|---|---|
| Build Preparation | Run build & zip files manually | Gemini audits config & builds automatically |
| File Uploading | Open hPanel & use File Manager upload | Gemini uploads the build folder via MCP tools |
| Errors & Logs | Navigate menus & search stack traces | Gemini checks logs & debugs code within the IDE |
Fixing React Router 404 Issues
If your React app uses client-side routing (like React Router) and a user refreshes a nested route like /about or /dashboard, Hostinger's Apache server might return a 404 Not Found.
This happens because the server searches for a physical about/index.html folder or file. To fix this, you must route all path requests back to index.html so React Router can process them.
Instruct Gemini using this prompt:
"My React Router page is showing 404 on refresh. Create the correct .htaccess rewrite rule for Hostinger shared hosting."
Here is the standard file to place inside your build folder (or public/ folder to copy during compilation):
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]List of Useful Prompts for Gemini
Save these prompts to use next time you host a website with Hostinger MCP:
"Analyze this React project and tell me the correct production build command.""Build this React app for production and identify the final output folder.""Use Hostinger MCP to deploy the production build folder to my Hostinger shared hosting as a static website.""Check the deployment status and confirm whether the website is live.""If deployment fails, check the logs or error details and explain the fix in simple words.""My React Router page is showing 404 on refresh. Create the correct .htaccess rewrite rule for Hostinger shared hosting."
Discussion