Ship it

Your app is ready — time to put it on the internet.

Two branches

In Chapters 1–3, you pushed straight to GitHub and your site updated. That worked because a personal site has nothing to break — worst case, a typo goes live for a minute.

Your form builder has a database. If you push broken code, real data could be at risk. That's why this starter comes with two branches already set up:

• dev — your canvas. This is where you make changes, test, and iterate. It's the default branch, so every commit you've made so far is here.
• main — the gallery. This is what Vercel deploys. Code only reaches main when you decide it's ready.

Think of it like saving a draft versus hitting publish. You've been working on dev this whole time — now you'll learn how to publish.

Push to GitHub

Push your code so Vercel can see it:

1. Open Source Control in VS Code (⌘⇧G · Ctrl+Shift+G )
2. Commit your changes with a message like form builder app
3. Click Sync to push

Create the Vercel project

In Chapter 1, you created a Vercel project for your portfolio site. This is a different app, so it needs its own project.

Go to vercel.com/new. Find your DB repository and click Import.

What are environment variables?

Before you deploy, you need to tell your live app where its database lives. Locally, your app reads from data/dev.db — a file on your laptop. In production, it needs to connect to your Turso database over the internet.

Environment variables are how you provide these details without putting secrets in your code. They're key-value pairs that differ between environments:

• Local: the app uses data/dev.db directly — no env vars needed
• Production: the app needs DB_URL and DB_AUTH_TOKEN to connect to Turso

The code stays the same. The environment provides the right values. This is how you keep secrets like database tokens out of your source code.

Add environment variables

Expand Environment Variables in the Vercel project setup and add both:

• DB_URL — paste the database URL from the Turso dashboard (the libsql:// one)
• DB_AUTH_TOKEN — paste the auth token from the Turso dashboard (the long string starting with eyJ...)

Click Deploy. The first deploy uses whatever branch you pushed — that's fine for the initial setup.

Go live with pnpm ship

From now on, deploying is one command. In VS Code's terminal:

pnpm ship

This publishes your dev branch to main and pushes — Vercel picks up the change and deploys automatically. It checks that you're on dev, that everything is committed, and that there's something new to ship. If any check fails, it tells you why.

Every time you want to deploy going forward — any chapter, any project that uses this workflow — it's just pnpm ship.

The real test

Once it's deployed, click the screenshot image link to open your live site, just like you did in Chapter 1. Confirm it ends in .vercel.app — that's your live site.

Create a form, submit a response, and check the results page. Everything works the same as local, but now it's on the internet — your database, your server, a real URL anyone can visit.

You can also check the Turso dashboard — click Edit Data on your database to see the actual rows your app created.