React + Vite created with AI: publishing a SPA with Nginx, SSL and domain

Published on 2026-10-27 by frfrand

How to deploy React Vite from Lovable or Bolt: npm ci, build dist, try_files Nginx, HTTPS, variables and 404 errors.

React + Vite created with AI: publishing a SPA with Nginx, SSL and domain

Does your app need Node.js running all the time?

No, if it is really a React/Vite SPA without server functions. In that case, the build generates HTML, CSS, and JavaScript files that Nginx can serve. This reduces complexity for many demos created with AI tools. But do not confuse a SPA with TanStack Start or Next.js SSR, which may require a server runtime.

From code to reproducible build

Look for the scripts in package.json and the lockfile. A typical flow, if it corresponds to your repo, uses npm ci and npm run build. This creates dist/. If the app uses React Router with URLs like /mi-cuenta/pedidos, the server must return index.html for frontend routes not found as files. If that rule is missing, navigating from the start may work but refreshing a deep route causes a 404.

Illustrative Nginx configuration

location / {
    try_files $uri $uri/ /index.html;
}

This directive belongs to the correct server block, configured with the build directory and HTTPS. Do not copy it inside an SSR app without understanding the routing: there the proxy acts differently.

Example: landing and client area

A company created a landing in old Lovable and a /panel section. The dist/index.html file loads, but /panel gives a 404 when the user returns from an email. You configure the SPA routes, check API connections and CORS, add SSL, and test the same URLs on mobile. Make sure public variables do not include payment keys or SQL passwords.

Verification steps

1. Confirm that it is a React/Vite SPA and not a stack with server runtime. 2. Install dependencies according to lockfile and run clean build. 3. Deploy the contents of dist to the correct Nginx directory. 4. Configure SPA fallback, HTTPS, and asset caching. 5. Test route reloads, forms, and API calls. 6. Publish via reversible process and monitor 404s.

Frequently asked questions

### Should npm run dev be used in production? No: the build should be published, except for specific different architectures. ### Can I do it without Docker? Yes, Nginx can serve static files directly. ### Where does the PostgreSQL password go? Server side, never in a downloadable frontend. ### What happens if the project uses TanStack Start? It also needs to host its server part.

Sources

Vite Production Build · Nginx · Lovable Deployment.

Where ArduMaker fits

The VPS or ArduMaker services can be the destination for exported code if the architecture allows it, along with domain, HTTPS, and operational processes. But migrating the app does not automatically fix its bugs, permissions, or data design. At ardumaker.com/lovable (coming soon) the specialized service for migrating AI-generated code and converting it into a deployed application with technical review will be presented. The page is not yet created: for current information check ArduMaker.

Review: October 2026. Each platform and its export modalities change. Check official sources and work on staging with test data.

What the photograph shows

Professionals reviewing a web interface and its code. Illustrative photograph generated for this article about taking code created with AI to a production application; it is not an official capture of the tool nor does it demonstrate a specific implementation.