Deploying a Vite or React build to shared hosting

Deploying a Vite or React single-page application (SPA) to shared hosting requires three steps: run your production build locally, upload the files inside your local dist/ folder into your domain's document root, and append a client-side rewrite block to your .htaccess file. You do not need a background Node.js process to serve a standard React build. LiteSpeed serves the compiled HTML, JavaScript, and CSS directly as static assets.

If your application relies on client-side routing like React Router, you must configure the web server to send missing paths back to index.html. Without this fallback, visiting any direct link like /dashboard or refreshing the page returns a 404 error.

Build your production assets locally

Generate your production-ready bundle on your local computer before moving any files to the server. Open your project terminal and run:

npm run build

Vite compiles your application into a local folder named dist/ (or build/ if you use older Create React App setups). Inside this directory, you will see an index.html file alongside an assets/ directory containing hashed .js and .css bundles.

If your application lives in a subfolder on your domain rather than the site root (for example, example.com/app/), verify your Vite base path configuration before building. In vite.config.js, set the base parameter accordingly:

export default defineConfig({
  base: '/app/',
  // other config options
})

For an app that answers directly on your root domain or on a dedicated subdomain, leave base set to '/' (the default).

Upload the contents of dist to your document root

Upload the contents of your local dist/ directory into the domain's document root. Do not upload the dist/ folder itself, or your site will only resolve at example.com/dist/.

Document root locations depend on the domain type:

• Primary domain: public_html/
• Subdomains: ~/subdomain_name/ (a directory created in your account home, placed beside public_html, not inside it).
• Addon domains: The custom directory assigned when you created the addon domain.

You can upload your files through either of these methods:

• File Manager: Log in to portal.flashcloud.com, select your service, and click the File Manager tile. Navigate to your target document root and click Upload. You can zip your local dist/ contents, upload the single ZIP file, and click Extract inside File Manager.
• FTP: Connect with an FTP client using the username format user@main-domain. Both plain FTP and explicit FTPS work. Upload the contents of dist/ straight into the document root folder.

Append the SPA rewrite rule to .htaccess

Every fresh document root on Flashcloud hosting already contains server configuration files created by cPanel: .htaccess (holding your PHP handler blocks), php.ini, .user.ini, .well-known/, and cgi-bin/. Never delete or replace the existing .htaccess file. Always append your new rules to the end of the file.

Because React Router handles page transitions inside the browser, the web server knows nothing about routes like /about or /settings. When a user requests those paths directly, LiteSpeed looks for a physical directory on the disk, fails to find one, and returns a 404. Similar to how you must manage URL rewriting covered in our guide on Laravel routes not working on shared hosting, you must route all non-file traffic through the front entry point.

Open .htaccess in your document root via File Manager's code editor, scroll to the bottom, and add this block:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

This rule tells LiteSpeed: if the requested URL does not match an actual file (!-f) and does not match an actual folder (!-d), serve /index.html instead. The browser loads the shell, React initializes, reads the browser address bar, and displays the correct route.

If you want to configure branded fallback pages for real server failures rather than client routing, review our documentation on setting up custom error pages.

Fix blank pages and routing errors

If you upload your build and see a white screen or unexpected errors, check these common causes:

Blank page with console errors

Open your browser's Developer Tools (F12 or Cmd+Option+I) and look at the Console tab. If you see errors stating Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of text/html, your asset paths are wrong. This happens when the browser requests /assets/index-xxx.js, gets your index.html fallback instead because the path failed to resolve, and tries to execute the HTML as JavaScript. Check the base setting in vite.config.js, rebuild, and re-upload.

404 on page refresh

If clicking navigation links works while browsing the app, but refreshing the page returns a 404 Not Found error, your .htaccess rewrite rule is missing or placed in the wrong folder. Confirm that .htaccess is inside the exact document root where your index.html lives.

Server-side rendering (SSR) requirements

Vite projects built as static Single Page Applications run entirely in the browser. However, if you are using frameworks that require a live server process for server-side rendering (such as Vite SSR, Next.js, or Remix), you cannot host them as pure static files. Those setups require our Node runner. For instructions on configuring dynamic runtimes, read our guide on Node.js apps in cPanel.

When to contact support

If your .htaccess rules do not seem to take effect, or if your domain document root points to an unexpected path, reach out to our team. Open a ticket in the portal under Support. You can find your Support PIN inside your account settings at /account if our technicians need to verify your identity for account changes.