Deployment Fundamentals

You've built an AI-powered app on your computer. It works great locally. But how do you get it on the internet so others can use it? That's what deployment is — and it's simpler than you might think.

What Does "Deployment" Mean?

Deployment is the process of taking your application from your local machine and putting it on a server where anyone with the URL can access it. When you "deploy" an app, you're essentially copying your code (or a built version of it) to a computer that's always online.

Think of it like this:

• Local development: Your app runs on localhost:3000 — only you can see it
• Deployed app: Your app runs at https://myapp.com — anyone in the world can see it

Every website and web app you've ever used has been deployed somewhere. Google, Twitter, your favorite AI tool — they all went through a deployment process.

Development vs. Staging vs. Production

Professional teams typically use three environments:

Why Three Environments?

You never want to test unfinished features on the live site. Imagine pushing a broken AI chatbot to production — real users would see errors, lose trust, and leave. The three-environment approach gives you safety nets:

1. Development — Break things freely. Try new AI models. Experiment with prompts. Nobody sees your mistakes.
2. Staging — Test with real-ish data. Make sure the AI responses look right. Catch bugs before users do.
3. Production — Everything is tested and stable. This is what your users see.

What to ask your AI: "Help me set up environment-specific configuration for my app with development, staging, and production settings."

The Build Process

When you run your app locally with npm run dev, the code isn't optimized — it includes debugging tools, source maps, and development-only features. Before deploying, you need to build your app for production.

npm run build

What the build process does:

• Bundles all your JavaScript/TypeScript files into fewer, smaller files
• Minifies the code (removes whitespace, shortens variable names)
• Tree-shakes unused code (removes imports you never actually use)
• Optimizes images and assets
• Compiles TypeScript to JavaScript

The result is a dist/ or .next/ or build/ folder containing optimized files ready for a server.

Before build:               After build:
src/                        dist/
├── components/             ├── index.html
│   ├── Chat.tsx (12KB)     ├── assets/
│   ├── Sidebar.tsx (8KB)   │   ├── index-a1b2c3.js (45KB)
│   ├── Header.tsx (4KB)    │   └── index-d4e5f6.css (8KB)
│   └── ... (50+ files)     └── favicon.ico
├── pages/ (20+ files)
├── lib/ (10+ files)
└── styles/ (5+ files)
Total: ~2MB                 Total: ~53KB (97% smaller!)

What to ask your AI: "My build is failing with this error: [paste error]. How do I fix it?"

Static vs. Dynamic Hosting

Not all apps are hosted the same way. The type of hosting you need depends on what your app does.

Static Hosting

Best for apps that are just HTML, CSS, and JavaScript files. The server simply serves files — no server-side processing.

• What it hosts: React SPAs, Vue apps, static sites, Vite builds
• How it works: Upload your dist/ folder, the server sends files to browsers
• Examples: Firebase Hosting, Netlify, GitHub Pages, Vercel (static mode)
• Cost: Usually free for small projects

Dynamic Hosting

Best for apps that need server-side processing — like calling AI APIs with secret keys, server-side rendering, or running database queries on the server.

• What it hosts: Next.js (SSR), Express APIs, apps with Cloud Functions
• How it works: A server runs your code and generates responses on each request
• Examples: Vercel (serverless), Firebase Cloud Functions, Railway, Render
• Cost: Free tiers available, but can scale up with usage

Which Do You Need?

What to ask your AI: "I built a [describe your app]. Do I need static or dynamic hosting? What platform do you recommend?"

Choosing a Hosting Platform

Here's a comparison of the most popular platforms for AI apps:

For AI Apps Specifically

If your AI app calls APIs like OpenAI, Anthropic, or Google AI:

1. Vercel — Best if you're using Next.js. API routes become serverless functions automatically. Great for AI streaming.
2. Firebase — Best if you're already using Firestore and Auth. Cloud Functions handle AI API calls.
3. Railway — Best if you need a full backend server (Express, FastAPI) that makes AI calls.

What to ask your AI: "I'm building an AI app with [framework] that calls [AI API]. Which hosting platform should I use and why?"

Deployment Checklist

Before your first deployment, make sure:

✅ App builds without errors (npm run build)
✅ Environment variables are configured for production
✅ API keys are stored as secrets (not in code)
✅ AI API endpoints are correct for production
✅ Error handling is in place for AI API failures
✅ .gitignore includes .env files and node_modules
✅ You've tested the built version locally

What's Next?

Now that you understand the deployment landscape, let's tackle the most critical piece: environment variables and secrets — keeping your API keys safe while making them available to your deployed app.

What to ask your AI: "Walk me through deploying my first app. I'm using [framework] and want to deploy to [platform]."

---

🌐 www.genai-mentor.ai