Deploying to Vercel

Overview

The experiment runs locally, but participants need to reach it from anywhere in the world. This lesson deploys the app to Vercel, connects it to the production Neon database, configures environment variables, and smoke-tests the full participant flow on the live URL before we open it to Prolific.

Before You Deploy

Confirm two things locally first:

1. npm run dev works, and you can click through Prolific ID entry, consent, demographics, instructions, the task, and the debrief page without errors.
2. Your .env file has real values for DATABASE_URL and, if you've already created your Prolific study, PROLIFIC_COMPLETION_URL. If you haven't created the study yet, that's fine — the debrief page falls back to https://app.prolific.com when the variable is missing, so the app still works without it.

Deploying doesn't test anything new about your code. It just moves the same app onto a server participants can reach.

Pushing Your Code to GitHub

Vercel deploys from a GitHub repository, not from the folder on your computer. Whatever is on GitHub is what gets deployed, so your latest work needs to be pushed there first.

1. Open GitHub Desktop.
2. You should see your recent changes listed. Write a short summary (e.g. "Add task, debrief page") in the box at the bottom left.
3. Click Commit to main (or whichever branch you've been working on).
4. Click Push origin in the top bar to upload your commits to GitHub.

You only need to do this once now. Every time you push new commits later, Vercel will pick them up automatically and redeploy.

Importing the Project into Vercel

1. Go to vercel.com and log in with the account you created in the Prerequisites lesson.
2. Click Add New… → Project.
3. If this is your first time connecting Vercel to GitHub, you'll be asked to authorize access. Grant it access to your forked repository (or all repositories, if you'd rather not pick one at a time).
4. Find your programming-for-behavioral-research fork in the list and click Import.

Vercel detects this is a Next.js project automatically and fills in the build settings for you. You don't need to change anything there.

Setting Environment Variables

Before clicking Deploy, add the same environment variables from your local .env file. Vercel doesn't read your .env file — it never leaves your computer — so these have to be entered separately.

On the import screen, look for Environment Variables and add:

Because this course uses a single Neon database for both local development and production (see the Neon setup in the First Project lesson), using the same DATABASE_URL here means your live app and your local app read and write to the exact same tables. That's expected — there's nothing extra to set up — but it also means any test clicks you make against the live URL land in the same Response table as everything else. We'll deal with cleaning that up before real data collection starts.

If you don't have PROLIFIC_COMPLETION_URL yet, skip it for now. You'll add it in the next lesson once Prolific generates one for your study, then redeploy so the app picks it up.

Deploying

Click Deploy. Vercel installs dependencies and builds the project, the same way npm run dev does locally, just on their servers instead of yours. This takes a minute or two.

When it finishes, you'll land on a project dashboard showing a preview and a URL that looks like:

https://your-project-name.vercel.app

That URL is live on the internet right now. Anyone with the link, including a Prolific participant, can open it.

Smoke-Testing the Live URL

Open the Vercel URL in your browser and walk through the entire participant flow the same way you would locally: Prolific ID entry, consent, demographics, instructions, the task through all three phases, and the debrief page.

If something fails on the live URL but worked locally, it's almost always one of two things:

• A typo in an environment variable (check for extra spaces or missing quotes around the Neon connection string).
• A page that reads an environment variable you haven't added yet.

Once you've clicked through successfully, open Prisma Studio locally with npm run db:studio. You should see a new row in Participant (and Response rows to match) from the test run you just did on the live site — confirming the deployed app is writing to the same production database.

Delete that test participant's rows before you start recruiting for real, the same way you'd clear out any local test data. There's no separate "production" database to reset here — it's the one you've been using all along.

What Happens on Future Pushes

Vercel is now watching your GitHub repository. Every time you push new commits to the branch you deployed from, Vercel automatically rebuilds and redeploys the site — you won't need to repeat the import step. This includes adding PROLIFIC_COMPLETION_URL once you have it: add the variable in your Vercel project settings, then trigger a redeploy (either by pushing a commit or clicking Redeploy in the Vercel dashboard) so the running app picks up the new value.