Running Everything Locally
A full stack application has multiple moving parts — at minimum, a frontend and a backend, often a database too. Running everything locally means starting multiple processes and keeping them all happy at once.
Multiple Services, Multiple Ports
Each service needs its own port. Think of ports like apartment numbers in a building — they let your computer route traffic to the right application.
A typical setup:
- Backend API on port 5000
- Frontend on port 3000
- Database on port 5432 (PostgreSQL default)
Your frontend makes requests to http://localhost:5000/api/... while you view it at http://localhost:3000.
Managing Multiple Terminals
You'll need separate terminal windows or tabs for each service. Most developers keep them arranged so they can see logs from both simultaneously.
Alternatively, VS Code's Live Server extension can serve your frontend with automatic reloading when files change.
The Development Workflow
Once everything is running, your workflow becomes:
- Make changes to code
- Backend changes: Flask auto-reloads (in debug mode)
- Frontend changes: refresh the browser (or use Live Server for auto-reload)
- Watch both terminal windows for errors
When something breaks, check which terminal shows the error. Frontend errors often appear in the browser console, while backend errors show in the backend terminal.
Environment Variables for Configuration
Use environment variables to configure your application without hardcoding values. This keeps sensitive data out of your code and makes it easy to switch between environments.
# In your backend
import os
DATABASE_URL = os.environ.get('DATABASE_URL', 'sqlite:///local.db')
For local development, you can set these in your terminal before starting the server, or use a .env file with a library like python-dotenv.
Keeping Things Organized
Create a simple checklist for starting your development environment:
- Start the database (if using one)
- Start the backend
- Start the frontend
- Open browser to frontend URL
Some developers write a script to start everything at once. Ask AI: "Write a script that starts my Flask backend and serves my frontend folder."