Step 4: Deploying
Put your tool on the internet.
What You’re Deploying
This project has two parts: a frontend (your HTML/CSS/JS) and a backend (the Node.js proxy server). Both need to be deployed.
Vercel handles this well. It can serve your frontend files and run your proxy server as a serverless function — a small piece of backend code that runs on demand in the cloud, instead of on your computer.
Restructure for Vercel
Your project is currently set up for local development. Ask Claude to reorganize it for Vercel:
Restructure this project for deployment on Vercel:
- Move the frontend files so Vercel serves them as static files
- Convert the proxy server into a Vercel serverless function
(in an api/ directory)
- Update the frontend to call the serverless function
instead of localhost:3000
- Add a vercel.json config file if needed
Walk me through what you're changing and why.Claude will reorganize the project so Vercel knows how to run both parts. The key change: your proxy moves from a standalone server into an api/ folder, where Vercel automatically turns it into a serverless function.
Deploy to Vercel
Help me deploy this to Vercel.
Walk me through the steps.Claude will guide you through:
- Creating a Vercel account (if needed)
- Installing the Vercel CLI
- Running
vercelto deploy
Get Your URL
After deployment, you’ll have a public URL like:
linkpreview.vercel.app
Test it in your browser — enter a URL and make sure the preview card works. The serverless function replaces your local server, so everything should work the same way it did locally.
Share it with others. You built this.
Optional: Custom Domain
If you own a domain:
Help me connect my custom domain to this Vercel deployment.Checkpoint
- Project restructured for Vercel
- Deployed successfully
- Public URL works
- Preview card fetches and displays data on the live site
- You can share it with others
What You Learned
- Frontend vs. backend deployment: Static files (HTML, CSS, JS) are served directly. Server-side code needs a runtime — Vercel’s serverless functions provide that without you managing a server.
- Serverless functions: Your proxy server became a function that runs only when someone makes a request. You don’t pay for or maintain a server that’s always running.
- Project structure matters for deployment: Different hosting platforms expect files in specific places. Restructuring your project to match the platform’s conventions is a normal part of shipping.
- Deploying is a skill: The first time takes the longest. Once you’ve done it, every future project gets easier.
Congratulations
You built and deployed a working web tool with a frontend and a backend. It’s live on the internet.
This same workflow — build locally, restructure for your platform, deploy — scales to bigger projects. The tools stay the same.
Ideas for Extending
- Add history of checked URLs
- Copy the preview card as an image
- Support multiple URLs at once
- Add a bookmarklet for quick checking