How to Run (Deploy) a Single Page Application (SPA) on Shared Hosting

Building modern websites with Vue or React has become the standard practice in web development. However, when you try to deploy a Single Page Application (SPA) to a regular shared hosting environment, you may encounter a common issue — only the home page loads correctly, while all internal routes (pages) return a 404 error. This happens because the hosting server doesn’t understand client-side routing and looks for actual files or directories that don’t exist.

To make your SPA work properly on a shared hosting server, you need to configure the server so it knows how to handle routes. There are several ways to solve this problem, each with its own pros and cons.

1. Use hash-based routing.

The simplest and quickest solution is to use hash routing — for example, URLs like /#/about instead of /about. In this case, routing happens entirely on the client side, so the server doesn’t need any special configuration. The downside is that search engines don’t index such pages properly, since technically your entire application is still just one page. Therefore, this option is not ideal if SEO is important for your project.

2. Define routes on the server side.

Another method is to duplicate your routes on the backend. For example, if your hosting supports PHP, you can write simple routing logic there that tells the server which files to serve for specific URLs. This approach ensures that every page, including the 404 page, works correctly. The disadvantage, however, is that maintaining routes in both frontend and backend code increases complexity and makes ongoing maintenance more difficult.

3. Configure the server to always serve index.html when a route is missing.

The most common and universal solution is to configure your web server so that when it can’t find the requested file, it automatically serves index.html instead. This allows your SPA to handle all routing through the client-side framework. Such a setup can be done via .htaccess rules on Apache or similar configuration files for other servers.

This method is the best balance between simplicity and functionality. Search engines can still index your pages because the content is rendered dynamically once the SPA loads. The only downside is that the server will return a 200 status code even for non-existent pages, which means that your 404 page must be handled manually within the app.

.htaccess

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

Overall, running an SPA on shared hosting is absolutely possible. The key is to understand how your server processes routes and to choose the right approach for your specific needs. For simple apps that don’t rely on SEO, hash routing is perfectly fine. But if you want your site to be indexable and properly handle all routes, server configuration or a small PHP-based router is the way to go.