Deploy to Production

Hazel Home has spent long enough serving furniture only to localhost. Its project structure already describes the deployment: Next.js lives at the root, while FastAPI lives in api/. The dependency files for both runtimes sit at the project root, ready for Vercel.

Outcome

Deploy the combined project to Vercel with vercel deploy --prod and confirm both the Next.js frontend and the FastAPI backend are live under a single domain.

Hands-on exercise 3.1

Deploy

Open the project's Environment Variables settings in the Vercel dashboard and confirm that Automatically expose System Environment Variables is enabled. This makes VERCEL_URL available to the Server Component. Then, from the starter/ root, deploy the project:

vercel deploy --prod

The project is already linked from vercel link in Section 2, so the CLI skips the setup prompts and starts building. A few seconds later:

✓ Deployed to production.

https://hazel-home.vercel.app

What Vercel auto-detected

During the deployment, Vercel builds the Next.js app from package.json and packages api/index.py as a Python function with the dependencies from pyproject.toml.

Requests to / reach Next.js, while requests under /api/* reach FastAPI on the same domain. The directory layout provides the routing information, so this project does not need a vercel.json file.

Verify the frontend

Open the deployment URL in a browser:

https://hazel-home.vercel.app

The furniture listing should load with data from FastAPI. The Server Component reads the deployment hostname from process.env.VERCEL_URL, fetches /api/items, and renders the returned inventory.

Verify the backend directly

Hit the backend path:

https://hazel-home.vercel.app/api/items

FastAPI should return the inventory JSON that we saw in local development.

Review the project boundary

The shared project keeps the deployment boundary small:

The Python backend stays in the frontend's Vercel project
Same-origin requests do not require CORS configuration
The frontend does not need a separately managed backend hostname
Both builds and their logs belong to the same project

That boundary is the main result of the course: the frontend and API can move through local development and deployment together.

Fluid compute

FastAPI deploys as one Vercel Function with Fluid compute enabled by default. Fluid compute reuses function instances and supports concurrent requests, which reduces the frequency and effect of cold starts.

Other Python frameworks

Flask can also expose a top-level application from api/index.py. Django projects use their framework's supported entrypoint and configuration, so consult the current Vercel Python documentation before adapting this layout.

Try It

Verify the full stack:

curl https://hazel-home.vercel.app/api/items

[{"id":1,"name":"Fernwood Sectional","category":"Seating","price":2499.0,"in_stock":true},...]

curl -s https://hazel-home.vercel.app | grep "Fernwood"

Fernwood Sectional

The API request checks FastAPI directly. Finding Fernwood in the HTML confirms that Next.js received the inventory during server rendering.

Commit

Deployment does not change the source files. Make sure the commit from the previous lesson is present before you finish:

git status --short

The command should return no output.

Troubleshooting

Deploy succeeds but /api/items returns a 404: The FastAPI routes don't include the /api prefix. Open starter/api/index.py and confirm the routes are @app.get("/api") and @app.get("/api/items"), not / and /items.

Deploy fails with "No module named fastapi": pyproject.toml isn't at the project root or dependencies aren't declared. Check that starter/pyproject.toml exists and lists fastapi under dependencies.

Frontend loads but items don't appear: Check the deployment logs for the failed request. If process.env.VERCEL_URL is undefined, enable Automatically expose System Environment Variables under Project Settings, then redeploy.

You want to clean up: When you're done with the course, you can delete the hazel-home project from the Vercel dashboard to remove the deployment.

Done-When

vercel deploy --prod succeeds from the starter/ root
The project exposes Vercel system environment variables
https://hazel-home.vercel.app loads the furniture listing page
https://hazel-home.vercel.app/api/items returns the FastAPI JSON
Editing api/index.py and redeploying changes the inventory shown on the frontend

Solution

cd starter
vercel deploy --prod

Hazel Home now serves its storefront and inventory API from the same Vercel project.