Vercel Logo

Deploy to production

Hazel Home can now change its inventory in Python and display the result in Next.js. The service configuration describes both applications, so Vercel can deploy them together.

Outcome

Deploy the frontend and backend as one Vercel project and verify the storefront and public inventory endpoint.

Hands-on exercise 3.1

From academy-python-course/starter/, link the directory containing vercel.json:

vercel link
vercel project inspect --non-interactive

Select the intended account or team and create a course project such as hazel-home. Keep the project root at starter/ by selecting ./ in this directory. The frontend/ and backend/ roots are already defined in vercel.json; they do not need separate Vercel projects.

Before deploying, check the inspection output for the project and scope you intended. If you select an existing project, use one reserved for this exercise.

Deploy both services

Run the deployment from the same directory:

vercel deploy --prod

Vercel builds the Next.js service from frontend/ and the FastAPI service from backend/. The CLI prints the deployment URL when it finishes. Use that returned URL for the checks below.

Check routing and the binding

Open /api/items on the deployment to inspect the inventory, then open / to load the storefront. The API rewrite sends the public request to FastAPI. Next.js reads BACKEND_URL and fetches inventory through the internal binding.

Vercel generates the binding for each deployment. There is no hostname to copy into environment settings and no need to expose VERCEL_URL for this course.

A preview uses the same configuration. Run vercel deploy without --prod when you want a preview instead of updating production.

Keep the project boundary clear

Both services share the deployment and public routing configuration. Their dependencies remain separate, and the Services dashboard and logs let you inspect each application.

The backend runs through Vercel's Python support for FastAPI. For other applications, consult the current Python framework and runtime guidance rather than moving files into a special /api directory.

Try It

Set a terminal variable to the HTTPS URL printed by your deployment. This command prompts for it:

printf 'Paste your deployment URL: '
read -r DEPLOYMENT_URL
curl --fail "${DEPLOYMENT_URL%/}/api/items"
curl --fail "${DEPLOYMENT_URL%/}/"

The first response should contain the eight furniture items. The second should contain the storefront HTML with Fernwood Sectional. If you get a login response, Deployment Protection may require authentication. Use a signed-in browser for these checks; the login response doesn't indicate an application error.

For a final integration check, change one item in backend/main.py, deploy again, and confirm the storefront shows the change. Restore the item afterward if you want to keep the original inventory.

Commit

Deployment creates local metadata under .vercel/, which Git ignores. From starter/, check for any source changes you still need to save:

git status --short

Commit any intentional inventory edits separately. The Services configuration and connected page should already be committed from Section 2.

Troubleshooting

Only one application is deployed: Check that the linked project root contains vercel.json and both service directories. Deploy from starter/, not starter/frontend/ or the repository root.

The API responds but the storefront fails: Inspect the frontend logs. Confirm its binding targets backend, uses BACKEND_URL, and the page awaits connection() before reading the binding, then fetches with no-store.

/api/items returns 404: Check that the API rewrites precede the frontend catch-all and that FastAPI still defines /api/items. The rewrite preserves that path.

The CLI rejects the configuration: Update to the current Vercel CLI and compare with the current Services documentation. The course uses services, not experimentalServices.

Done-When

  • The linked project and scope are correct
  • The deployment includes both services from the student project root
  • The production /api/items response contains eight furniture items
  • The production storefront renders inventory fetched from FastAPI
  • A backend change appears in the storefront after redeploying

Solution

From academy-python-course/starter/:

vercel link
vercel project inspect --non-interactive
vercel deploy --prod

Use the configuration from Lesson 2.1 and the page from Lesson 2.2 to deploy both applications from one project. The frontend calls its matching backend through the service binding.

Was this helpful?

supported.