Deploy a Full-Stack AI-Built Website or Web App to Production

Deploy your frontend and backend to Hostinger, connect the production database and services, and launch everything on your own domain.

Roadmap & Resources

Map the Full-Stack Project

Identify Every Part That Needs Production

Before deploying anything, use your AI coding assistant to identify every part the project needs in production.

Full-Stack Production Architecture Review

Identifies the frontend and backend frameworks, whether they run as one application or separate services, the package manager, the production build and start commands, the runtime version, the build output directory, the database provider and type, and every production environment variable by name — then checks that no private secret or database credential is exposed in client-side code, runs the production build, and returns a short production architecture checklist.

Review this entire project specifically for full-stack production deployment. Identify: - the frontend framework - the backend framework or server runtime - whether the frontend and backend run as one application or separate services - the package manager - the production build command - the start command for every server-side service - the required Node.js/runtime version - the build output directory where applicable - the database provider and database type - every environment variable required in production — names only - authentication - storage - APIs - payments - email - AI services - webhooks - background/server-side functionality - anything that requires the final production domain Check that private secrets and database credentials are not exposed in client-side code. Run the appropriate production build and checks. Do not deploy or migrate anything yet. Give me a short production architecture checklist showing: 1. what needs to be hosted 2. what external services stay where they are 3. what environment variables need to be configured 4. whether the project is ready for production deployment

The production architecture checklist should tell you:

What needs to be hosted

What external services stay where they are

What environment variables need to be configured

Whether the project is ready for production deployment

IMPORTANT

Do not continue until you understand which parts of the project actually need to be deployed.

Push the Production Project to GitHub

Push the Production-Ready Code

Push the production-ready code to GitHub, then confirm the repository is safe to deploy from.

The repository includes the files needed to rebuild the project

No private .env files are included

No API keys are included

No database passwords or other secrets are included

If the frontend and backend are separate projects, confirm that each deployment has access to the correct production-ready source code.

Set Up Hostinger

Get Hostinger Web App Hosting

This tutorial uses Hostinger to run the production application.

Get Hostinger Web App Hosting

Deploy your full-stack project from GitHub with Node.js support and production environment variables.

USED IN THIS TUTORIAL

https://www.hostg.xyz/SHJyP

Create the Web App and Connect GitHub

In Hostinger, create a new Web App deployment and connect the GitHub repository.

Websites Add Website Deploy Web App

Connect the GitHub repository Use the architecture checklist from Step 1 to select the correct runtime Review the detected build and deployment configuration

Hostinger currently supports frontend frameworks such as React, Vite and Next.js, as well as backend frameworks including Express, NestJS and Fastify.

Connect the Database and Production Services

Keep the Production Database Where It Is

Keep an existing external production database connected unless the project genuinely requires a migration.

Hostinger Web Apps can connect to externally hosted PostgreSQL, MySQL, and MongoDB databases, while Supabase can also be connected directly for supported projects.

Configure the Production Environment Variables

Configure the required production environment variables in Hostinger, using the names Step 1 reported.

Hostinger Web App Environment variables

Database connection

Authentication

API keys

Storage

Payments

Email

AI services

Other server-side secrets

Environment variables can be added securely during deployment instead of storing their secret values in the GitHub repository.

IMPORTANT

If the project uses separate development and production services, use the production credentials and endpoints.

Deploy and Test the Full Stack

Test the Temporary Live URL

Deploy the project first to a temporary live URL, then test the complete flow between the frontend, backend, and database.

Main pages and routes

Authentication

Database reads and writes

Forms

Server/API endpoints

Storage and uploads

Payments if used

Email if used

AI features

External integrations

NOTE

If the frontend loads but a feature fails, check the backend/runtime logs and environment variables before changing the UI.

Do not connect the production domain until the important end-to-end flows work.

Connect Your Domain and Go Live

Connect Your Production Domain

Connect the production domain to the working Hostinger deployment, then update any services that depend on the final URL.

Authentication redirect URLs

OAuth callbacks

CORS or allowed origins

Webhook endpoints

Email links

API base URLs

Verify the Final Launch

Confirm the launch on the real domain before calling it done.

The domain works

HTTPS is active

Frontend and backend communicate correctly

Authentication works

Database access works

Important API routes work

External services remain connected

No private secrets are exposed to the browser

Your full-stack website or web app is now running in production.

Updating It Later

Continue working normally and push production-ready changes to GitHub.

Your workflow becomes Project → GitHub → Hostinger → Database & External Services.

If your deployment is connected to GitHub, Hostinger can automatically build and publish new changes from the connected branch.