Skip to content

module-15-deploying-to-custom-clouds.md

Latest commit

 

History

History
332 lines (235 loc) · 7.7 KB

module-15-deploying-to-custom-clouds.md

File metadata and controls

332 lines (235 loc) · 7.7 KB

Module 15: Deploying to Custom Clouds

Goal: Understand deployment options beyond Lovable's built-in hosting

Estimated Time: 30-40 minutes

Prerequisites: Complete Modules 1-8 first

🎯 What You'll Learn in This Module

By the end of this module, you will:

  • Understand Lovable's built-in hosting
  • Know when to consider custom cloud deployment
  • Learn about alternative hosting platforms
  • Understand how to export your code
  • Know how to deploy to Vercel, Netlify, etc.
  • Understand migration considerations

📖 Lesson 1: Lovable's Built-in Hosting

What Lovable Provides

Lovable's hosting includes:

  • ✅ Automatic deployment
  • ✅ Free subdomain (yourproject.lovable.app)
  • ✅ HTTPS (secure connections)
  • ✅ CDN (fast global delivery)
  • ✅ Automatic updates
  • ✅ No configuration needed

When Lovable Hosting is Perfect

Use Lovable hosting when:

  • ✅ You're learning and building
  • ✅ You want simplicity
  • ✅ Free subdomain is fine
  • ✅ You want automatic updates
  • ✅ You're building personal projects

💡 Beginner Tip: Lovable's hosting is excellent for most projects! Only consider alternatives if you have specific needs.

📖 Lesson 2: When to Consider Custom Clouds

Reasons to Use Custom Clouds

Consider custom deployment if you need:

  • Custom domain requirements
  • Specific platform features
  • Integration with existing infrastructure
  • More control over deployment
  • Different pricing model
  • Team/organization requirements

Popular Alternatives

Vercel

  • Best for: Next.js, React apps
  • Features: Automatic deployments, edge functions
  • Pricing: Free tier available

Netlify

  • Best for: Static sites, JAMstack
  • Features: Forms, functions, split testing
  • Pricing: Free tier available

AWS/Google Cloud/Azure

  • Best for: Enterprise, complex needs
  • Features: Full cloud infrastructure
  • Pricing: Pay-as-you-go

💡 Beginner Tip: Most beginners don't need custom clouds. Lovable's hosting works great!

📖 Lesson 3: Exporting Your Code

How to Get Your Code

Option 1: From GitHub

  • If connected to GitHub, code is already there
  • Clone repository
  • Use the code anywhere

Option 2: Download from Lovable

  • Go to project settings
  • Look for "Export" or "Download"
  • Download your code

Option 3: Use Code Mode

  • View code in Code Mode
  • Copy files you need
  • (Requires paid plan for editing)

What You Get

Exported code includes:

  • All source files
  • Configuration files
  • Dependencies list
  • Project structure

💡 Beginner Tip: If you're connected to GitHub, your code is already exported there!

📖 Lesson 4: Deploying to Vercel

Why Vercel?

Vercel is great for:

  • React/Next.js apps
  • Fast deployments
  • Automatic CI/CD
  • Edge functions
  • Great developer experience

How to Deploy

Step 1: Prepare Your Code

  1. Connect to GitHub (if not already)
  2. Ensure code is pushed to GitHub
  3. Check that it builds locally (optional)

Step 2: Deploy to Vercel

  1. Sign up at vercel.com
  2. Import from GitHub:
    • Click "Import Project"
    • Select your repository
    • Vercel detects settings
  3. Configure:
    • Framework preset (if needed)
    • Build settings
    • Environment variables
  4. Deploy:
    • Click "Deploy"
    • Wait for build
    • Get your URL!

Step 3: Custom Domain (Optional)

  1. Add domain in Vercel dashboard
  2. Configure DNS as instructed
  3. Wait for propagation
  4. Your app is live!

💡 Beginner Tip: Vercel makes deployment easy! It auto-detects most settings.

📖 Lesson 5: Deploying to Netlify

Why Netlify?

Netlify is great for:

  • Static sites
  • JAMstack apps
  • Forms and functions
  • Split testing
  • Easy deployment

How to Deploy

Step 1: Prepare Your Code

  1. Ensure code is in GitHub
  2. Check build settings
  3. Prepare environment variables (if needed)

Step 2: Deploy to Netlify

  1. Sign up at netlify.com
  2. Import from GitHub:
    • Click "New site from Git"
    • Connect GitHub
    • Select repository
  3. Configure:
    • Build command (if needed)
    • Publish directory
    • Environment variables
  4. Deploy:
    • Click "Deploy site"
    • Wait for build
    • Get your URL!

Step 3: Custom Domain

  1. Add domain in Netlify
  2. Follow DNS instructions
  3. Enable HTTPS (automatic)
  4. Done!

💡 Beginner Tip: Netlify is very beginner-friendly with great documentation!

📖 Lesson 6: Migration Considerations

What to Consider

Before migrating, think about:

  • ✅ Why are you migrating?
  • ✅ What features do you need?
  • ✅ What will you lose/gain?
  • ✅ Is it worth the effort?

What You Might Lose

Lovable-specific features:

  • Visual editing in Lovable
  • Some Lovable integrations
  • Lovable's update system
  • Easy re-deployment from Lovable

What You Might Gain

Custom platform features:

  • Platform-specific tools
  • Different pricing
  • More control
  • Team features

Migration Process

If you decide to migrate:

  1. Export your code (from GitHub or Lovable)
  2. Set up new hosting (Vercel, Netlify, etc.)
  3. Configure environment variables
  4. Set up custom domain (if needed)
  5. Test thoroughly
  6. Update DNS (if using custom domain)
  7. Monitor for issues

💡 Beginner Tip: Most people don't need to migrate! Lovable's hosting is excellent. Only migrate if you have specific requirements.

🛠️ Hands-On Practice (Optional)

Practice: Deploy to Vercel

Task: Deploy a Lovable project to Vercel.

Steps:

  1. Ensure GitHub connection:

    • Connect project to GitHub
    • Verify code is synced

  2. Sign up for Vercel:

    • Go to vercel.com
    • Sign up with GitHub

  3. Import project:

    • Click "Import Project"
    • Select your repository
    • Configure settings
    • Deploy

  4. Test deployment:

    • Visit your Vercel URL
    • Test all features
    • Verify everything works

  5. Add custom domain (optional):

    • Add your domain
    • Configure DNS
    • Wait for propagation

What You Learned:

  • ✅ How to export code
  • ✅ How to deploy to alternative platform
  • ✅ How to configure deployment
  • ✅ How to add custom domain

✅ Module 15 Checklist

Before completing the course, make sure you can:

  • Understand Lovable's hosting benefits
  • Know when to consider alternatives
  • Understand how to export code
  • Know how to deploy to Vercel/Netlify
  • Understand migration considerations
  • Know when to stay with Lovable hosting

🤔 Common Questions (FAQ)

Q: Should I use custom cloud or Lovable hosting?

A: For most beginners, Lovable hosting is perfect! Only use custom clouds if you have specific needs.

Q: Can I use both?

A: Yes! You can deploy to multiple platforms. Some people use Lovable for development and custom cloud for production.

Q: Will I lose my Lovable project if I deploy elsewhere?

A: No! Your project stays in Lovable. You're just deploying a copy elsewhere.

Q: Is it hard to migrate?

A: It depends on your app's complexity. Simple apps are easy, complex apps with many integrations take more work.

Q: Can I come back to Lovable hosting?

A: Yes! Your project is always in Lovable. You can deploy from Lovable anytime.

🎯 What's Next?

Excellent! You now understand deployment options. For most projects, Lovable's hosting is perfect. Custom clouds are there when you need them.

You've completed all advanced modules! 🎉

Next steps:

  • Apply everything to Module 9's capstone project
  • Build your own projects
  • Continue learning and experimenting!

Module 15 Complete! 🎉