Modern web applications are often split into two parts: the frontend (the user interface built with Vue, React or Svelte using Vite) and the backend (a Python API, for example FastAPI or Flask). AI assistants often suggest this architecture as well.

You can host both parts on the same hosting plan (starting with the Green plan). This article shows you how. We tested the process with a Vue 3 + TypeScript + Vite application and a FastAPI backend using SQLAlchemy.

Contents

• How the Application Is Set Up on the Server
• Step 1: Build the Frontend on Your Computer
• Step 2: Configure Router Rewrite Rules
• Step 3: Deploy the API
  • Database
• Frontend and API on Different Domains
• Pre-Launch Checklist
• Next.js, Nuxt and Other Server-Side Rendering Frameworks

How the Application Is Set Up on the Server

Because the frontend and API are on the same domain, the browser does not require CORS configuration, avoiding one of the most common deployment issues.

Step 1: Build the Frontend on Your Computer

Before building, set the path where your application will be available in vite.config.ts (or vite.config.js):

export default defineConfig({
  plugins: [vue()],      // or react()
  base: '/app/',         // folder name in public_html; use '/' for the domain root
})

If you use a router (Vue Router or React Router), configure it to use the same base path:

// Vue Router
createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes })

// React Router
<BrowserRouter basename={import.meta.env.BASE_URL}>

The frontend should call the API using a relative path, not http://localhost:8000:

const res = await fetch('/app-api/players')

Then build the application:

npm run build

Upload the contents of the dist/ directory (not the directory itself) to public_html/app/.

Step 2: Configure Router Rewrite Rules

When a user refreshes a page such as yourdomain.com/app/players, the server must return index.html. Otherwise, the user gets a 404 error. Add an .htaccess file to public_html/app/:

RewriteEngine On
RewriteBase /app/
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /app/index.html [L]

If the application is in the domain root, replace /app/ with /.

Step 3: Deploy the API

Deploy the API as a Python application using Setup Python App, as described in our article Python Application on Web Hosting:

• Application root: e.g. app-api
• Application URL: yourdomain.com/app-api

For FastAPI, use the passenger_wsgi.py file with the a2wsgi adapter described in that article.

FastAPI routes must match the requests made by the frontend. If the frontend calls /app-api/players, define the /players route in FastAPI because the /app-api prefix is already part of the application URL.

Database

SQLite is suitable for smaller applications. Keep the database file in the API directory (not in public_html) and use an absolute path:

import os
DB_PATH = os.path.join(os.path.dirname(__file__), "app.sqlite3")
engine = create_engine(f"sqlite:///{DB_PATH}", connect_args={"timeout": 15})

We recommend MySQL/MariaDB for applications with more users. You can find instructions in our article Python Applications and MySQL.

Frontend and API on Different Domains

If the frontend is at yourdomain.com and the API is at api.yourdomain.com, you must enable CORS in FastAPI:

from fastapi.middleware.cors import CORSMiddleware
app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://yourdomain.com"],
    allow_methods=["*"],
    allow_headers=["*"],
)

Pre-Launch Checklist

Before publishing your application, check that you have configured all the necessary settings correctly.

• The base setting in vite.config matches the directory in public_html.
• The frontend calls the API using a relative path, not localhost.
• The public_html/app/ directory contains an .htaccess file for the router.
• You uploaded only the contents of dist/, without node_modules or the source code.
• Passwords and keys are stored in a .env file in the API directory, not in the frontend code (anything in the frontend can be viewed by visitors).
• An SSL certificate is enabled for the domain (https).

Next.js, Nuxt and Other Server-Side Rendering Frameworks

The process above applies to applications that build into static files (Vite, Create React App, Vue CLI and static Next.js exports). Frameworks that require their own Node.js server (Next.js with SSR and Nuxt) should be deployed as a Node.js application.

If you need help with deployment, our team is here for you. If your application needs more resources than Web Hosting provides, explore our VPS Servers. For more demanding projects, also consider Turbo Hosting or Reseller Hosting.