You Built a Slick Front End — and It's Stuck on localhost. Now Deploy It.

Bottom line first: AI built you a slick front end. And it’s at localhost:3000. That’s a screen only you, in the entire world, can see. Not deployed = not built. Two free paths: Cloudflare (static/SPA) or GAS (Google Sheets / account-backed). Five minutes and anyone opens it by link.

First: where does your build output go?

Run npm run build and the static files land in one folder. The folder name differs by framework. Uploading that whole folder is the deploy.

Framework	Build command	Output folder
Vite (React/Vue/Svelte)	npm run build	dist
Create React App	npm run build	build
Astro	npm run build	dist
Next.js (static export)	next build (output: 'export')	out

It splits by what you built

• Static / SPA (Vite, React, Astro, Next static build) → Cloudflare Pages.
• A tool wired to Sheets / Gmail / Drive → Apps Script web app (GAS).

Path A: Cloudflare Pages (static / SPA)

npm run build                    # creates dist/ (or build/, out/)
npm i -D wrangler
npx wrangler login
npx wrangler pages deploy dist --project-name=my-app --branch=main

→ a https://my-app.pages.dev link, instantly. HTTPS automatic, free.

There’s also a dashboard (git-connected) way: connect a GitHub repo to Cloudflare Pages, set the build command (npm run build) and output folder (dist), and it auto-deploys on every push. Prefer that if you dislike commands.

Put env vars in the Pages settings (or wrangler vars), not in the code. But anything that reaches the front end ends up visible in the browser, so don’t put secrets there.

Path B: GAS web app (Sheets-backed)

npm i -g @google/clasp
clasp login
clasp create --type webapp --title "my-app"
clasp push
clasp deploy                     # issues the /exec link

The skeleton is about this much — doGet serves the screen, and google.script.run lets the front end call backend functions:

// Code.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
function getData() {
  return SpreadsheetApp.openById("SHEET_ID").getSheets()[0].getDataRange().getValues();
}

<!-- index.html -->
<script>
  google.script.run.withSuccessHandler((rows) => console.log(rows)).getData();
</script>

→ runs inside your Google account, with Sheets as the DB. Zero server cost.

”Works locally, breaks deployed” — the 5 culprits

Almost everyone stalls here on day one of deploying. Suspect these in order.

Either way

• Build → upload. Build locally, ship only the output.
• Custom domain + HTTPS are free on both. Cloudflare adds a domain in the Pages settings (a few clicks if DNS is on Cloudflare); GAS attaches via Workspace or a proxy. Certificates are automatic.
• To wire it into auto-deploy → the npm run deploy + cron in Vibe Coding 101.

In one line

localhost:3000 is a diary only you can read. Static → Cloudflare, Sheets-backed → GAS — upload the build output for free and anyone opens it by link in five minutes. If it breaks, suspect the API address, env vars, and SPA fallback first.

Questions?

Not sure which one you built? Just ask. For the tool to build it with → So how do you actually vibe code?. The full picture → Vibe Coding 101.