How I Took an AI-Generated React Website Live on Localhost and Hostinger (Step-by-Step Guide)

In this post I’m sharing the exact process I followed to take a React/Vite website (Prestige Car & Shuttle Service) from a ZIP file on my PC → to localhost → to live on Hostinger.

I used:

XAMPP (for localhost setup)
Node.js + npm
Windows Command Prompt (CMD)
Vite (React build tool)
Hostinger hPanel (File Manager + public_html)

You can follow the same steps for any similar project.

1. Getting the Project Into XAMPP (htdocs)

1.1. XAMPP Installation & Start Apache

Install XAMPP on Windows (default path: C:\xampp).
Open XAMPP Control Panel.
Click Start on the Apache module.
- Green highlight = Apache running.

💡 Screenshot idea: XAMPP Control Panel with Apache running (green).

1.2. Copy Project Folder into `htdocs`

Unzip the project file, e.g.:

prestige-car-and-shuttle-service.zip

After extracting, you get a folder:

prestige-car-and-shuttle-service

Move that folder to:

C:\xampp\htdocs\prestige-car-and-shuttle-service

💡 Screenshot idea: C:\xampp\htdocs showing the prestige-car-and-shuttle-service folder.

At this point, normally for a simple HTML site you would open:

http://localhost/prestige-car-and-shuttle-service

…but in this case, it didn’t work, because the project was not a simple HTML template.

2. Realizing It’s a React + Vite Project

Inside the project folder I saw files like:

App.tsx
index.tsx
components/
pages/
package.json
vite.config.ts
.env.local

💡 Screenshot idea: project root showing App.tsx, index.tsx, package.json.

This means the project is a React app built with Vite + TypeScript, not a static HTML theme.
So XAMPP alone is not enough — we need Node.js + npm to run and build it.

3. Installing Node.js

Download Node.js (LTS version) from the official website.
Run the installer → Next, Next, Finish.
This automatically installs both:
- node
- npm (Node Package Manager)

To verify, you can open CMD and type:

node -v
npm -v

4. Opening the Project in Terminal (CMD)

Instead of PowerShell (which threw script security errors), I used Command Prompt.

Steps:

Open the project folder in File Explorer:

C:\xampp\htdocs\prestige-car-and-shuttle-service

Click on the address bar, type:

cmd

Press Enter → a CMD window opens with path:

C:\xampp\htdocs\prestige-car-and-shuttle-service>

💡 Screenshot idea: CMD open at the project path.

5. Handling the PowerShell Script Error (Optional Background)

Initially, when trying in PowerShell:

npm install

I got this error:

npm.ps1 cannot be loaded because running scripts is disabled on this system…

And when I tried to fix it with:

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

and then typed Y, PowerShell treated Y as a command:

The term 'Y' is not recognized as the name of a cmdlet…

Instead of fighting with PowerShell execution policies, the easiest fix was:

👉 Use Command Prompt (CMD) from the project folder and run all npm commands there.
No security error, everything worked fine.

6. Installing Dependencies (`npm install`)

In CMD (inside the project folder), I ran:

npm install

This command:

Reads package.json
Downloads all required dependencies into a node_modules folder

💡 Screenshot idea: CMD showing npm install completing successfully.

7. Running the Project on Localhost (`npm run dev`)

After install finished, I started the dev server:

npm run dev

Because this is a Vite project, the output looked like:

VITE v6.4.1  ready in XXX ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: http://192.168.xxx.xxx:3000/

💡 Screenshot idea: CMD showing VITE v6.4.1 ready with http://localhost:3000/.

Opening in Browser

I did not type the URL inside CMD.
Instead, I opened a browser (Chrome/Edge) and visited:

http://localhost:3000/

The React website loaded successfully on localhost ✅

❗ Important:
Do not close the CMD window while testing.
If CMD closes, the dev server stops and the site goes down.

In my case, the app used hash routing, so the browser URL became:

http://localhost:3000/#/

8. Building for Production (`npm run build`)

Local dev server is only for development.
For hosting (Hostinger), we need a production build.

In CMD (still in the project folder), I ran:

npm run build

Vite output looked like:

vite v6.4.1 building for production...
/index.css doesn't exist at build time, it will remain unchanged to be resolved at runtime
✓ 1712 modules transformed.
dist/index.html      1.85 kB
dist/assets/index-CIhYy4PX.js   287.49 kB | gzip: 86.78 kB
✓ built in 1.46s

This created a dist folder:

C:\xampp\htdocs\prestige-car-and-shuttle-service\dist

Inside dist I had:

dist/
  index.html
  assets/
    index-CIhYy4PX.js
    (plus other asset files)

💡 Screenshot idea: dist folder showing index.html and assets folder.

The dist folder is what we deploy to Hostinger.

9. Preparing Files for Hostinger

From the dist folder, I needed only:

index.html
assets/ folder (with index-CIhYy4PX.js and other files)

These files would go into public_html on Hostinger.

10. Uploading to Hostinger (hPanel → File Manager)

10.1. Open File Manager

Log in to Hostinger.
Go to hPanel → Files → File Manager.
Open the folder:

public_html

10.2. Clean Old Files (If Needed)

If there was a default index.php or old site files, I removed or renamed them (e.g., old-index.php).
We want our React app’s index.html to be the main entry file.

10.3. Upload Build Files

From my local dist folder, I uploaded:

index.html
assets/ folder

Final structure on Hostinger:

public_html/
  index.html
  assets/
    index-CIhYy4PX.js
    (other asset files)

💡 Screenshot idea: Hostinger public_html showing index.html and assets.

11. Fixing `index.html` for Hosting (Script Path)

Initially, the generated dist/index.html contained:

<link rel="stylesheet" href="/index.css">
<script type="module" crossorigin src="/assets/index-CIhYy4PX.js"></script>

The /index.css didn’t actually exist at build time.
The JS file used an absolute path (/assets/...), which can still work, but to be safe and clean, I updated it.

I ended up using a cleaned-up index.html with:

No broken CSS link
A correct relative script path pointing to assets/index-CIhYy4PX.js
The Tailwind + import maps + root div setup

Final `public_html/index.html` (ready to use)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="https://lucide.dev/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Prestige Car and Shuttle Service | Saskatoon</title>

    <!-- Tailwind CDN -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Tailwind Config -->
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              prestige: {
                black: '#0f0f10',
                charcoal: '#1c1c1e',
                gold: '#c5a059',
                goldlight: '#e6c88b',
                white: '#f5f5f7',
                gray: '#86868b'
              }
            },
            fontFamily: {
              serif: ['Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
              sans: ['"Helvetica Neue"', 'Helvetica', 'Arial', 'sans-serif']
            },
            backgroundImage: {
              'luxury-gradient':
                'linear-gradient(to bottom, rgba(15,15,16,0.8), rgba(15,15,16,1))'
            }
          }
        }
      }
    </script>

    <!-- Base styles -->
    <style>
      body {
        background-color: #0f0f10;
        color: #f5f5f7;
        margin: 0;
      }
      html {
        scroll-behavior: smooth;
      }
    </style>

    <!-- Import maps -->
    <script type="importmap">
    {
      "imports": {
        "react/": "https://aistudiocdn.com/react@^19.2.0/",
        "react": "https://aistudiocdn.com/react@^19.2.0",
        "lucide-react": "https://aistudiocdn.com/lucide-react@^0.555.0",
        "react-dom/": "https://aistudiocdn.com/react-dom@^19.2.0/",
        "react-router-dom": "https://aistudiocdn.com/react-router-dom@^7.9.6"
      }
    }
    </script>

    <!-- Main React build file (from /assets) -->
    <script type="module" crossorigin src="assets/index-CIhYy4PX.js"></script>
  </head>

  <body>
    <noscript>You need JavaScript enabled to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

🔁 Note:
If your JS file name is different (e.g. index-ABC123.js), change this line accordingly:

<script type="module" crossorigin src="assets/index-ABC123.js"></script>

12. Clearing Cache & Hard Refresh

After updating files on Hostinger:

In hPanel:
Advanced → Cache Manager → Clear Cache
In browser:
- Open https://yourdomain.com
- Press CTRL + F5 for a hard refresh

Now the React/Vite site loads live on the domain ✅

13. Summary of All Commands Used

For quick reference, here are all the commands I used in order:

# 1. Open cmd in project folder (from Explorer address bar)
cmd

# 2. Install dependencies
npm install

# 3. Run dev server (localhost)
npm run dev

# 4. Build for production
npm run build

Optional (if you still want to fix PowerShell instead of using CMD):

# PowerShell (Run as Administrator)
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
# then type Y and press Enter when prompted

14. What This Guide Covered (No Step Skipped)

From start to finish, this article walked through:

Installing and running XAMPP (Apache).
Placing the project inside C:\xampp\htdocs.
Identifying that it’s a React + Vite TypeScript project.
Installing Node.js and using CMD instead of PowerShell.
Running:
- npm install
- npm run dev (localhost:3000 / localhost:3000/#/)
Building the production version with npm run build.
Understanding the dist folder (index.html + assets).
Logging into Hostinger, opening File Manager → public_html.
Cleaning old default files like index.php.
Uploading dist/index.html and dist/assets/ into public_html.
Adjusting index.html so the script tag points to: <script type="module" crossorigin src="assets/index-CIhYy4PX.js"></script>
Clearing Hostinger cache and doing a browser hard refresh.
Confirming the site is live on the domain.

If you want, I can now:

Convert this article into pure HTML ready for your blog page, or
Add placeholder image tags (<img> or ![Screenshot]() ) where you can upload the screenshots you already took.

How I Took an AI-Generated React Website Live on Localhost and Hostinger (Step-by-Step Guide)