Putting Your App Out into the World — A Vibe Coder's First Steps in Deployment
Learn how to take an app that only ran locally and deploy it to the internet, step by step from the start.
If you’ve built an app that works well on your own computer, it’s time to put it online so other people can use it too. This process is called deploying.
Deployment can feel like something only professional developers do, but these days there are plenty of services that let you deploy in minutes with no coding knowledge at all. In this part, we’ll cover what deployment actually means and how to deploy for real.
What Is Deployment?
Deployment means taking a service that only ran on your own computer and putting it on the internet so other people can access it too.
The bookmark app we’ve built so far only works at http://localhost:5173. localhost is an address that means “my own computer” — it can only be reached from your machine. Once you deploy, you get an address like https://myapp.vercel.app, and it becomes accessible from anywhere in the world.
| Local development | After deployment | |
|---|---|---|
| Address | localhost:5173 | A real URL like myapp.vercel.app |
| Who can access it | Only you | Anyone with internet access |
| Computer state | Your computer has to be on | A cloud server runs 24/7 |
Deploying the Frontend: 5 Minutes with Vercel
Apps made of nothing but HTML/CSS/JavaScript, with no backend (server) — static sites, like our bookmark app — can be deployed easily with Vercel.
Step 1: Push Your Code to GitHub
To deploy, you first need to push your code to GitHub. GitHub is a service for storing and sharing code.
If you’ve never used Git before, just ask Claude Code for help.
I want to push this project to GitHub.
Walk me through it step by step, from initializing git to connecting the GitHub repository.Claude Code will guide you through it step by step.
Step 2: Sign Up for Vercel and Deploy
Log in to vercel.com with your GitHub account.
Click the “New Project” button and select the GitHub repository you just created. Vercel will automatically detect that it’s a React/Vite project and suggest build settings. Click “Deploy,” and the deployment finishes in one or two minutes.
Once it’s done, you’ll get an address in the form of https://your-project-name.vercel.app.
Automatic Redeployment
The great thing about Vercel is that from then on, every time you push code to GitHub, it automatically redeploys. You don’t need to do anything extra — just edit your code, push it to GitHub, and your changes go live a few minutes later.
Comparing Different Deployment Services
Depending on your situation, different deployment services make sense.
| Service | Features | Best for | Pricing |
|---|---|---|---|
| Vercel | Optimized for React/Next.js, easy GitHub integration | Frontend-focused projects | Free plan available |
| Netlify | Similar to Vercel, with extras like form handling | Static sites, or when you need a simple backend | Free plan available |
| Render | Can deploy backends too (Node.js, Python, etc.) | Full-stack apps | Free plan available (slower) |
| Railway | Docker-based deployment, includes databases | Complex backends, when you need a DB | Starts at $5/month |
| AWS / GCP | Professional cloud services, highly scalable | Large-scale services, fine-grained control | Usage-based pricing |
If this is your first time deploying anything, starting with Vercel or Netlify is a good choice.
Things to Check After Deployment
Once deployment is done, there are a few things worth checking.
Check that everything works
Visit the deployed address and make sure all the features that worked locally still work the same way. It’s fairly common for something to work fine locally but break in the deployed environment.
Check for errors
You can check build logs and function logs from the Vercel dashboard. If there’s an error, paste the log into Claude Code and ask for help.
What Your First Deployment Means
The app that used to only run locally is now live on the internet. Share the address, and anyone can access it. This is the moment your service actually “comes out into the world.”
In the next part, we’ll cover something you should always do after deploying: refactoring. Building quickly tends to make code messy, so we’ll look at how to read through and clean up your code together with AI.