L2: Deploy to Production

Time to make your application live on the internet! Let's deploy to Vercel and celebrate your achievement!

Deployment Overview

What will happen:

1. Run `vercel` command
   ↓
2. Answer configuration questions
   ↓
3. Vercel builds your application
   ↓
4. Upload to global CDN
   ↓
5. Get production URL
   ↓
6. Application is LIVE! 🎉

Deploy Your Application

Let's deploy! Make sure you're in your project directory.

Run deployment command:

Terminal

vercel

This single command starts the entire deployment process! ✨

Answer configuration questions:

Vercel will ask several questions on first deployment:

Vercel CLI 33.0.1
? Set up and deploy "~/projects/booking-app"? [Y/n]

Type: Y (Yes) and press Enter

? Which scope do you want to deploy to?

Choose: Your account name (should be selected by default)

? Link to existing project? [y/N]

Type: N (No - first time deploying)

? What's your project's name? (booking-app)

Type: Project name (or press Enter to use default)

Tips for naming:

Use lowercase
No spaces (use hyphens: booking-app)
Descriptive but short
This becomes part of your URL

? In which directory is your code located? ./

Type: ./ (current directory) or press Enter

Vercel auto-detects framework:

Auto-detected Project Settings (Vite):
- Build Command: vite build
- Development Command: vite --port $PORT
- Install Command: npm install
- Output Directory: dist
? Want to modify these settings? [y/N]

Type: N (No - defaults are perfect for Vite)

Auto-detection is smart! Vercel recognizes Vite, Next.js, Create React App, and dozens of other frameworks automatically.

Watch the build process:

Vercel will now build your application:

🔗  Linked to your-account/booking-app (created .vercel)
🔍  Inspect: https://vercel.com/your-account/booking-app/[id]
✅  Production: https://booking-app.vercel.app [2s]

📝  Deployed to production. Run `vercel --prod` to overwrite later.

What just happened:

Linked: Connected local project to Vercel
Inspect: Link to view build logs
Production: Your live URL!
Time: Build completed in ~2 seconds

Visit your deployed application!

Click the production URL or open it in your browser:

https://booking-app.vercel.app

🎉 Congratulations! Your app is LIVE! 🎉

Understanding Deployment Output

Let's break down what Vercel shows you:

Your deployment URLs:

Preview Deployment:
https://booking-app-git-main-youraccount.vercel.app
  ↑              ↑      ↑         ↑
project     branch   branch   account

Production Deployment:
https://booking-app.vercel.app
  ↑              ↑
project      platform

Types of URLs:

Production URL (main):
- https://booking-app.vercel.app
- Always points to latest --prod deployment
- Share this URL publicly
- Custom domains point here
Preview URL (per deployment):
- Unique URL for each deployment
- Perfect for testing
- Includes git branch name
- Expires after 30 days (on free tier)
Alias URL (custom):
- https://yourdomain.com (if you have a domain)
- Points to production
- Professional branding

Understanding build output:

[1/4] Installing dependencies
▶ npm install
  added 1250 packages in 15s

[2/4] Building application  
▶ npm run build
  vite v5.0.0 building for production...
  ✓ 1234 modules transformed.
  ✓ built in 5.23s

[3/4] Uploading build output
▶ Uploading 145 files...
  ✓ Upload complete

[4/4] Finalizing deployment
▶ Assigning domains...
  ✓ booking-app.vercel.app

Each phase:

Dependencies: Install npm packages
Building: Run npm run build
Uploading: Send files to CDN
Finalizing: Assign URLs and deploy

Build time: Usually 30-60 seconds for React apps

If build fails: Check inspect URL for detailed error logs

Preview vs Production:

Feature	Preview	Production
Command	`vercel`	`vercel --prod`
URL	Unique per deploy	Single stable URL
Purpose	Testing	Live users
Auto-update	Every push	Manual `--prod`
SSL	✅	✅
CDN	✅	✅

Workflow:

1. Make code changes
2. Run `vercel` (preview)
3. Test preview URL
4. If good, run `vercel --prod`
5. Production updated!

Best practice:

# Deploy preview
vercel

# Test thoroughly
# Visit preview URL, check all features

# Promote to production
vercel --prod

What Vercel created:

your-project/
  .vercel/
    project.json          # Project configuration
    README.txt            # Info about .vercel folder
  .gitignore              # Updated to ignore .vercel/
  (your app files)

project.json contents:

{
  "orgId": "team_abc123",
  "projectId": "prj_xyz789"
}

Purpose:

Links local project to Vercel project
Enables vercel command to work
Commit to Git if you want other devs to deploy
Don't commit if you want only you to deploy

Configure Environment Variables

If your app uses environment variables (like API keys), add them to Vercel.

Open Vercel dashboard:

Visit: vercel.com/dashboard

Select your project:

Click on your booking-app project.

Go to Settings:

Click "Settings" tab in the project navigation.

Add environment variables:

Click "Environment Variables" in left sidebar
Click "Add New"
Enter variable details:

Name:  VITE_API_BASE_URL
Value: https://api.example.com
Environments: ✓ Production ✓ Preview ✓ Development

Important for Vite: Environment variables must start with VITE_ to be exposed to your application.

Common variables:

VITE_API_BASE_URL=https://api.example.com
VITE_API_KEY=your_api_key_here
VITE_STRIPE_PUBLIC_KEY=pk_live_...

Redeploy with new variables:

Environment variables only apply to NEW deployments:

Terminal

vercel --prod

This redeploys with your new environment variables.

Security: Never commit .env files to Git! Always use Vercel dashboard for production secrets.

Vite specific: Variables must start with VITE_ to be accessible in your code:

// ✅ Accessible
const apiUrl = import.meta.env.VITE_API_BASE_URL;

// ❌ Not accessible (no VITE_ prefix)
const secret = import.meta.env.SECRET_KEY;

Update Your Application

Need to deploy changes? It's easy!

Make code changes:

Edit your code as needed.

Test locally:

Terminal

npm run dev

Make sure changes work locally.

Deploy preview:

Terminal

vercel

Get a preview URL to test.

Deploy to production:

Terminal

vercel --prod

Update your live site!

That's it! Your users see the updated version immediately.

Git Integration (Optional)

For automatic deployments, connect your Git repository.

Push to GitHub:

Terminal

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/yourusername/booking-app.git
git push -u origin main

Connect to Vercel:

Go to Vercel dashboard
Click "Import Project"
Select your GitHub repository
Click "Import"
Configure settings (auto-detected)
Click "Deploy"

Automatic deployments:

Now every time you push to GitHub:

git push origin main
  ↓
GitHub webhook triggers Vercel
  ↓
Vercel auto-builds and deploys
  ↓
New version goes live!

No more manual vercel commands! 🎉

Pro workflow: Connect Git for automatic preview deployments on pull requests. Every PR gets its own preview URL for testing!

Custom Domain (Optional)

Want a custom domain like mybookingapp.com?

Purchase domain:

Buy from domain registrar:

Namecheap
Google Domains
GoDaddy
Vercel Domains (easiest integration)

Add to Vercel:

Go to project settings
Click "Domains"
Click "Add"
Enter your domain: mybookingapp.com
Click "Add"

Configure DNS:

Vercel provides DNS records to add at your registrar:

Type:  A
Name:  @
Value: 76.76.21.21

Type:  CNAME  
Name:  www
Value: cname.vercel-dns.com

Wait for verification:

DNS propagation takes 24-48 hours max (usually ~1 hour).

Once verified, your custom domain works! 🎉

Monitoring and Analytics

Vercel provides built-in analytics:

Troubleshooting Common Issues

Next Steps After Deployment

Your application is live! Now what?

Share your work:

Add to your resume
Post on LinkedIn
Share with friends/family
Submit to portfolio sites

Example post:

🎉 Just deployed my React booking application!

Built with:
- React 18
- React Router
- Redux Toolkit  
- React Hook Form
- Tailwind CSS

Check it out: https://booking-app.vercel.app

#React #WebDev #JavaScript

Get feedback:

Ask friends to test
Post in developer communities
Share in course forums
Reddit (r/webdev, r/reactjs)

Use feedback to improve!

Monitor performance:

Check Vercel Analytics weekly
Review Web Vitals
Track user behavior
Identify popular pages

Continue improving:

Ideas for enhancements:

Add more features
Improve performance
Better error handling
Accessibility improvements
SEO optimization
Internationalization (i18n)
Dark mode
Progressive Web App (PWA)
Social sharing
Email notifications

Deploy updates easily:

# Make changes
git commit -m "Add new feature"
git push origin main
# Auto-deploys!

Set up monitoring:

Free tools:

Sentry: Error tracking
Google Analytics: User analytics
Hotjar: User recordings
Lighthouse: Performance audits

Module 8 Complete! 🎉

Congratulations! You've completed Module 8 and deployed your React application to production!

What you accomplished:

✅ Installed and configured Vercel CLI

✅ Deployed application to production

✅ Configured environment variables

✅ Learned deployment best practices

✅ Understanding of monitoring and analytics

✅ Your app is LIVE on the internet!

🏆 Course Complete! 🏆

You've finished the entire React course!

Your journey (8 modules):

Module 0: Introduction
  └─ Learned platform navigation

Module 1: React Fundamentals  
  └─ Built component foundation

Module 2: State & Events
  └─ Added interactivity

Module 3: Effects & Data
  └─ Connected to APIs

Module 4: Routes & Navigation
  └─ Multi-page application

Module 5: Hooks & Performance
  └─ Optimized performance

Module 6: State Management
  └─ Global state with Redux

Module 7: Forms & Authentication
  └─ User authentication system

Module 8: Deployment
  └─ Deployed to production! ✨

Skills you've mastered:

✅ React fundamentals (JSX, components, props)
✅ State management (useState, Redux Toolkit)
✅ Side effects (useEffect, API calls)
✅ Routing (React Router v6)
✅ Performance (custom hooks, memoization)
✅ Forms (React Hook Form, validation)
✅ Authentication (JWT, protected routes)
✅ Deployment (Vercel, production)

You are now a React developer! 🚀

What's Next?

Continue your React journey:

Build more projects:
- E-commerce store
- Social media app
- Dashboard application
- Blog platform
- Chat application
Learn advanced topics:
- Server-side rendering (Next.js)
- Testing (Jest, React Testing Library)
- TypeScript with React
- GraphQL
- React Native (mobile apps)
Join the community:
- React Discord servers
- Reddit (r/reactjs)
- Twitter #ReactJS
- Local meetups
- Conferences
Keep building:
- Contribute to open source
- Freelance projects
- Job applications
- Personal projects

Resources:

Key Takeaways

✅ Deployment is easy with modern platforms like Vercel
✅ One command (vercel) deploys your entire application
✅ Environment variables keep secrets secure
✅ Git integration enables automatic deployments
✅ Free tier is perfect for personal projects
✅ Global CDN makes your app fast worldwide
✅ HTTPS automatic for security
✅ Analytics included for tracking users
✅ Updates are instant - just redeploy
✅ Professional workflow from development to production

Thank you for completing this course! 🎉

You've worked hard, built an amazing project, and gained valuable skills. We're proud of your achievement!

Now go build something amazing! 🚀

Share your deployed project with the course community!

Post your Vercel URL and get feedback from other students. We'd love to see what you built! 💙

L2: Deploy to Production

View Deployment Status

Analytics Dashboard

Performance Insights

Error Tracking

Build succeeds locally but fails on Vercel

Application shows blank page

Changes not appearing after deploy

API requests failing (CORS errors)

Environment variables not working

On this page