Run the two local processes and verify the first request

Before you start

Use the preceding full-stack lesson or its project checkpoint. This integration course assumes basic React components/forms and Django models/views; the separate React and Django courses provide those foundations. Use fictional data.

Explanation

Download the free starter into a new directory. Use the README's two terminals: the Python environment runs Django on loopback port 8002, while Vite runs on 5173. Create the virtual environment before installing requirements; a global Python package installation can silently test a different Django release. The frontend has a frozen pnpm lockfile and uses Node 24.

The starter deliberately contains only a health endpoint and a small React page. A health response establishes that the browser can reach Django; it says nothing about accounts or data ownership. Keep the Network panel open and inspect status, response content type, and URL. If the proxy target is unavailable, show a connection failure rather than treating it as an empty account. Both development servers should remain bound to loopback.

Worked example

Run in the project backend's Django shell. For database examples, first follow API.md to create a new disposable examples database; the included example_context helper supplies synthetic accounts and rolls its writes back. It never deletes existing data.

from django.test import Client
client = Client(HTTP_HOST='localhost')
response = client.get('/api/health/')
print(response.status_code)
print(response.json()['status'])

Expected behavior

200
ok

The snippet demonstrates this lesson's rule. The complete implementation and surrounding error handling are in the downloadable project; contextual setup is described in README.md and API.md.

Common mistakes

Opening index.html from disk; mixing localhost and 127.0.0.1; using Vite's preview server as a production application server.

Guided practice

1. Create and activate a virtual environment; install backend/requirements.txt and run migrate.
2. Install frontend packages with pnpm install --frozen-lockfile, then run pnpm dev.
3. Open http://127.0.0.1:5173/; stop the backend and observe the starter's failure state, then restart it.

Independent practice

Write a small troubleshooting note distinguishing an unavailable backend, a wrong proxy port, and invalid JSON.

Recap

Start the supplied health-only starter with the locked Python and Node dependencies. Explain the decision in your own words and retain the regression that would catch its failure.

References

Official documentation for this lesson.