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
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.