Module 5: Building Real Things

Deployment: Making It Real

Lesson 5.7 1 activity

From Your Computer to the World

Right now, your project lives in your vibe coding workspace. Deployment means putting it somewhere on the internet where other people can access it with a real URL. This is one of the most exciting moments in building — your project becomes real.

Don't worry — deployment is much simpler than it sounds. Modern hosting platforms make it possible to deploy a project in minutes, for free. You don't need to rent a server, configure a network, or do anything complicated.

Answer: Making your project accessible on the internet so other people can use it. It goes from existing only on your computer to having a live URL anyone can visit.

Two Ways to Deploy

You've built your project in Replit. There are two paths to get it on the internet with a real URL — one that uses Replit's built-in hosting, and one free fallback that uses Netlify. Both work fine. Pick whichever fits your situation.

Path A: Replit's built-in hosting (one click — but check the cost)

Replit has a Deploy button right in your Repl. Click it and you get a live URL. Done.

Heads up about the cost: Replit periodically changes what's included on its free plan. Sometimes the basic "static" deployment for HTML/CSS/JS projects is free, sometimes it's behind a paid plan, sometimes it's free for a limited time before they ask for a credit card. Get a parent before you click Deploy. When the deploy screen opens, look for the price near the deploy button.

  • If it says free or $0 — go ahead and deploy.
  • If it asks for a credit card or shows any monthly cost — don't enter card info. Close the deploy screen and use Path B (Netlify) instead. Netlify's free tier is rock-solid for projects in this course.

Path B: Free deploy with Netlify (works no matter what)

Netlify lets you drag-and-drop a folder and get a live URL in 30 seconds, free. The trick is getting your project out of Replit and onto your computer first. Here's the full walkthrough:

Step 1: Download your Repl as a folder.

In Replit, look for a three-dot menu (⋯) or settings icon on your Repl, and find an option that says Download as zip or similar. (If you can't find it, ask AI: "How do I download my Repl as a zip file in Replit?") Save the .zip to your Downloads folder, then double-click it to unzip — you'll get a folder with your project files inside (index.html, style.css, etc.).

Step 2: Make a Netlify account.

Go to netlify.com and click Sign up. Netlify is 13+ and may want a parent's email confirmation — same routine as Replit. Use a free email account or sign in with GitHub.

Step 3: Drag the folder onto Netlify.

Once you're logged in to Netlify, the dashboard has a section that says something like "Want to deploy a new site without Git? Drag and drop your site output folder here." Drag the unzipped folder from Step 1 onto that area.

Step 4: Wait 30 seconds, then click your URL.

Netlify gives you a random-looking URL like jolly-cupcake-1234.netlify.app. Click it — your project is live on the internet. Anyone with that URL can visit it.

Step 5 (optional): Pick a nicer URL.

In your Netlify site dashboard, click Site settings → Change site name to swap the random name for something readable like my-habit-tracker.netlify.app.

For a more detailed version of either path with troubleshooting tips, see the Deployment Step-by-Step Guide. And if you get stuck at any point, ask AI: "I'm trying to deploy my Repl using Netlify. I'm at the step where [describe where you are]. What should I do next?"

Testing in the Wild

Once deployed, test your project again. Things that work on your computer sometimes break when deployed. Common issues:

  • File paths that work locally but not on a server (check for slashes and capitalization)
  • Resources (images, fonts) that don't load because they're linked to local files
  • Mobile responsiveness — test on an actual phone, not just a resized browser
  • Loading speed — large images or files can make your project slow

Open your deployed project on at least two devices (your phone and a computer). Click every button. Test every feature. If something's broken, fix it locally and redeploy.

It's Alive — Now What?

You've deployed. Your project has a real URL. Congratulations — you've shipped something. Most people who say "I want to build an app" never get this far. You did.

Your deployed version doesn't have to be perfect. In the software world, a first deployed version is called an MVP (Minimum Viable Product) — the simplest version that works. You'll improve it in Lesson 5.8 based on real feedback.

Share the link with 2–3 people you trust. Not for compliments — for feedback. Ask them: "Is it clear what this does? Was anything confusing? What's the one thing I should improve?" Their answers will guide your iteration.

Key Concepts

  • Deployment puts your project on the internet with a real URL anyone can visit.
  • Two paths: (A) Replit's one-click Deploy if it's free for your account at the time, or (B) download your Repl as a zip and drag-and-drop the folder into Netlify — guaranteed free.
  • Get a parent before clicking any deploy button that asks for a credit card.
  • Test your deployed project on multiple devices. Things that work in Replit's preview sometimes break once deployed.
  • Your first deployment is your MVP (Minimum Viable Product) — the simplest version that works. Real feedback in Lesson 5.8 tells you what to improve.
  • Share with 2–3 trusted people for honest feedback. Ask specific questions, not "do you like it?"

Helpful Resource

Deployment Step-by-Step Guide — A detailed walkthrough of both deployment paths (Replit's built-in or Netlify drag-and-drop), with troubleshooting for common issues. Keep it open while you deploy.

Find this and all other resources on the Dashboard Resources page.

Level Up: Coming Next

Lesson 5.8 — Iteration After Launch. Learn how to improve your project based on real user feedback.

Continue to Lesson 5.8 →