Builder Foundations

Hosting

From your laptop to the internet

An app on your laptop is like a recipe you've only cooked at home. Hosting is opening the restaurant so anyone can come in.

What is hosting?

Hosting means running your app on a server that is always on and connected to the internet. Then anyone with the link can use it, any time.

Host: the company that runs your app for you, like Vercel or Netlify.
Deploy: the act of sending the newest version of your app to the host.
Live URL: the public web address people visit, like my-shop.vercel.app.

Localhost vs a live URL

While you build, your app runs on your own computer. Its address looks like this:

text

http://localhost:3000

Localhost means "this computer." Only you can open it. If you send that link to a friend, it won't work for them. The 3000 is the port, a numbered door on your computer.

A live URL works for everyone, on any device, anywhere in the world:

text

https://my-shop.vercel.app

Testing on localhost first is normal and good. You fix problems privately, then deploy when it works.

How deploying works

A common setup is GitHub plus a host like Vercel. Once they are connected, every time you push your code to GitHub, Vercel builds and publishes the new version automatically.

Your laptop

build and test

→

GitHub

git push

→

Vercel

build + deploy

→

Users

live URL

Your code travels from your laptop to GitHub, then Vercel puts it online for users.

Let's break this down:

Your laptop: you and your AI build the app and test it on localhost.
GitHub: an online home for your code. You'll set it up in the Git and GitHub lessons.
Vercel: watches your GitHub repo and deploys each new version.
Users: open the live URL and use your app.

Vercel and Netlify

Vercel and Netlify are both popular hosts with free starter plans. Vercel is made by the team behind Next.js, a framework AI coding tools often use. Netlify works in a very similar way.

You can ask your AI to walk you through it:

Prompt

My Next.js app works on localhost and the code is on GitHub.
Walk me through deploying it to Vercel step by step, for a complete beginner.
Tell me which environment variables I need to add in Vercel and where to add them.
Don't assume I know any terms. Explain each button I need to click.

Domains

A domain is a custom web address, like my-shop.com. It's like a sign above the restaurant door.

Your host gives you a free address, like my-shop.vercel.app. That's fine for learning.
To use your own name, you buy a domain from a domain seller, then connect it in your host's settings.

Common mistakes

Sending someone a localhost link. It only works on your computer. Share the live URL instead.
Forgetting environment variables on the host. The app works locally but breaks online because the keys aren't there.
Never testing the live site. Always open your live URL after a deploy and click through the main features.

Practice

Try these exercises to lock in what you just learned.

Quiz

Not started

You send your friend the link http://localhost:3000 and it doesn't work for them. Why?

Quiz

Not started

Your Vercel project is connected to GitHub. What usually triggers a new deploy?

What's next?

Deploying means handling API keys safely. Let's move to secrets and safety, starting with why your keys need protecting.