Deployment Guide

Where to put your app once it's built

A single-file app is one portable .html file with everything inline, so it runs on literally any static host. A multi-file React project deploys to your own Vercel account with one click. Here's the built-in option, the connected deployment, and every place you can self-host for a custom domain.

Fastest path
Don't need a custom domain? Click 🚀 Publish in the builder — your app goes live at vibesafebuilder.com/p/<id> in seconds, security-scanned first, installable to a phone's home screen, works offline. Everything below is for when you want your own domain instead.
Building a multi-file React project?
Skip ahead to Vercel, below — for a multi-file project, VibeSafe deploys directly to your own Vercel account with one click. No dragging files, no renaming anything; Vercel builds your real source the same as if you'd pushed it yourself. See the full walkthrough in the user guide.

Contents

  1. Built-in: Publish in the app
  2. Vercel — deploy to your own account
  3. Before you deploy elsewhere: one prep step
  4. Netlify Drop
  5. Cloudflare Pages
  6. GitHub Pages
  7. Surge.sh
  8. Firebase Hosting
  9. Which one should I use?
  10. Adding a custom domain
  11. A note on installability elsewhere

01Built-in: Publish in the app

The Preview tab has a 🚀 Publish button. One click uploads the current version to vibesafebuilder.com/p/<id> — no account, no setup, no file renaming. It's security-scanned server-side before it goes live, and it's installable to a phone's home screen with offline support built in (see the user guide). Republish any time to update the same link.

Use everything below only if you want a custom domain (myapp.com instead of a vibesafebuilder.com link), or want the file hosted somewhere you fully control.

02Vercel — deploy to your own account

Best for: multi-file React projects, and anyone who wants their own domain, their own bill, and a site that keeps working whether or not this builder does. This is a connected, one-click deployment — not the drag-and-drop pattern used for the other hosts below, and it only works from a multi-file project (a single-file app has no source for Vercel to build).

1

Get a project-scoped token

In Vercel, go to Settings → Tokens → Create Token. Under Scope, choose the single project you want to deploy to — not your whole account. That way the token can only ever touch that one project.

2

Connect it on the Deploy tab

Paste the token in. It's encrypted before it's stored and never sent back to your browser again — you'll see only a masked hint, like vcp_••••1234.

3

Deploy

Vercel runs a real build from your project's source — npm install and Vite, the same as if you'd pushed it yourself. Deploy a preview to check it first, or straight to production. Making it public runs a Publish Security Check first, and asks you to confirm by typing the project's name.

Full walkthrough, including Deployment Protection and Make Public/Make Private, in the user guide.

03Deploying a single-file app elsewhere: one prep step

Everything from here on is for a single-file app you want hosted outside VibeSafe entirely — Netlify, Cloudflare, GitHub Pages, and the rest. Every host below expects a file named index.html as the entry point. Your download is named my-app.html — rename it to index.html before uploading anywhere. That's the only preparation needed: there's no build command, no npm install, no framework to configure. It's one file with inline <style> and <script> — every static host on this list treats that as a complete, deployable site.

04Netlify Drop

Best for: the fastest possible way to get a real URL with zero account setup.

1

Go to app.netlify.com/drop

No sign-up required to get a live link; create a free account only if you want to keep it long-term or add a custom domain.

2

Drag your renamed index.html onto the page

Netlify uploads it and gives you a live https://random-name.netlify.app URL immediately.

3

Optional: claim it and add a domain

Create an account to keep the site permanently, rename the subdomain, or connect your own domain under Site settings → Domain management.

05Cloudflare Pages

Best for: the fastest global CDN and generous free tier, if you already use Cloudflare for DNS.

1

Create a free Cloudflare account

Go to the Pages section of the dashboard.

2

Create a project → Upload assets

Upload your renamed index.html directly — no Git repo needed for a direct upload deploy.

3

Attach your domain

Custom domains → Set up a domain. Works especially smoothly if the domain's DNS is already on Cloudflare.

06GitHub Pages

Best for: if you already have a GitHub account and want your app's source visible/version-controlled publicly.

1

Create a new repository

Upload your renamed index.html to it (GitHub's web UI lets you drag-and-drop a file, no Git CLI required).

2

Enable Pages

Repository → Settings → Pages → set the source branch to main and folder to /root.

3

Visit your live URL

Live in a minute or two at yourusername.github.io/repo-name. Custom domains are supported under the same Pages settings.

Note: GitHub Pages repositories are public by default (private-repo Pages requires a paid GitHub plan) — don't use this route for an app containing anything sensitive.

07Surge.sh

Best for: builders comfortable with a terminal who want the fastest possible command-line deploy.

1

Install Surge

npm install -g surge (requires Node.js installed).

2

Deploy from your app's folder

With your renamed index.html in an otherwise-empty folder, run surge and follow the prompts — first run asks you to create a free account.

3

Get your URL

Surge picks a random *.surge.sh domain by default, or you can type your own subdomain — and your own custom domain via surge --domain yourdomain.com.

08Firebase Hosting

Best for: if you're already in the Firebase/Google Cloud ecosystem, or want to add a real backend to your app later.

1

Install the Firebase CLI

npm install -g firebase-tools, then firebase login.

2

Initialize hosting

firebase init hosting in a folder containing your renamed index.html as the public directory.

3

Deploy

firebase deploy — live instantly at yourproject.web.app, with custom domain support in the Hosting dashboard.

09Which one should I use?

PlatformSetupAccount needed?Custom domainBest for
Our Publish buttonOne clickNoNoInstant sharing, zero setup
Vercel (connected)One click, in the builderYes (token)✓Multi-file projects, your own account
Netlify DropDrag & dropOnly to keep it✓Fastest external option, single-file
Cloudflare PagesUpload assetsYes✓Fastest global CDN, single-file
GitHub PagesUpload to repoYes✓Public, version-controlled
Surge.shCLI commandYes✓Terminal users, scripting
Firebase HostingCLI init + deployYes✓Adding a backend later

10Adding a custom domain

The general pattern is the same everywhere: buy a domain from any registrar (Namecheap, Cloudflare Registrar, Google Domains successors, etc.), then in your chosen host's dashboard add the domain and point its DNS records (usually a CNAME or A record) at the values the host gives you. All six platforms above issue free HTTPS certificates automatically once the domain is verified — no extra cost or manual certificate setup.

11A note on installability elsewhere

Your downloaded file already includes a manifest and icon, so it's installable to a phone's home screen wherever you host it. What it won't have outside our own domain is offline caching — that part of our Launch Check / publish pipeline registers a service worker scoped to vibesafebuilder.com/p/<id> specifically, since offline caching requires the host to serve that worker file itself. If you self-host and want offline support too, you'd add your own small service-worker script to the platform you choose — outside the scope of this guide, but every platform above supports it the same way any static site does.