Tutorial: Host a Python Backend and React Frontend for Free

Tutorial: Host a Python Backend and React Frontend for Free

Tutorial: Host a Python Backend and React Frontend for Free

Learn how to host a Python script (backend) and a React frontend for free using popular platforms with free tiers. This tutorial, updated as of April 2025, guides you through setting up a full-stack application with a REST API backend and a static React frontend, perfect for your Google Blog project.

Overview

In this tutorial, we'll:

  • Host a Python backend using PythonAnywhere or Render.
  • Host a React frontend using Vercel or Netlify.
  • Integrate the two using API calls with CORS handling.
  • Provide code snippets and step-by-step instructions.

React Frontend: A static site (HTML, CSS, JS) after building.
Python Backend: A server running a Python script (e.g., Flask or FastAPI).

Prerequisites

  • Basic knowledge of Python, JavaScript, and React.
  • Git installed and a GitHub account.
  • Node.js and npm installed for React development.
  • Python 3.8+ installed for backend development.

Step 1: Prepare Your Application

Before hosting, set up your backend and frontend locally.

1.1 Python Backend (Flask)

Create a simple Flask API to serve data.

# app.py
from flask import Flask, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # Enable CORS for React frontend

@app.route('/api/data', methods=['GET'])
def get_data():
    return jsonify({'message': 'Hello from Python!'})

if __name__ == '__main__':
    app.run(debug=True)

Create a requirements.txt file:

flask==2.3.3
flask-cors==4.0.1
gunicorn==22.0.0

Note: Use gunicorn for production, not app.run().

1.2 React Frontend

Create a React app using npx create-react-app my-app and set up an API call.

// src/App.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState('');

  useEffect(() => {
    axios.get('https://your-backend-url/api/data')
      .then(response => setData(response.data.message))
      .catch(error => console.error('Error:', error));
  }, []);

  return (
    <div>
      <h1>React + Python App</h1>
      <p>Backend Response: {data}</p>
    </div>
  );
}

export default App;

Install axios:

npm install axios

Add a proxy for local development in package.json:

"proxy": "http://localhost:5000"

Build the app for deployment:

npm run build

This generates a build folder with static files.

Step 2: Host the Python Backend

Choose a free platform to host your Flask backend.

Option 1: PythonAnywhere (Free Tier)

Features: 512MB disk space, Flask support, free subdomain (e.g., yourusername.pythonanywhere.com).

  1. Sign up at pythonanywhere.com.
  2. Go to the "Files" tab and upload app.py and requirements.txt.
  3. In the "Web" tab, create a new Flask web app and select your Python version.
  4. Edit the WSGI configuration file to point to app.py (PythonAnywhere provides a template).
  5. Open a Bash console and install dependencies: 
    pip install -r requirements.txt
  6. Reload the web app to deploy.
  7. Note your backend URL (e.g., https://yourusername.pythonanywhere.com/api/data).

Limitation: Limited CPU time, no sudo access. Some libraries may not work.

Option 2: Render (Free Tier)

Features: Supports Flask/FastAPI, free subdomain (e.g., yourapp.onrender.com), SSL.

  1. Sign up at render.com.
  2. Create a new "Web Service" and connect your GitHub repo with the backend code.
  3. Set the runtime to Python and the start command: 
    gunicorn -w 4 -b 0.0.0.0:8000 app:app
  4. Ensure requirements.txt is in the repo root.
  5. Deploy; Render installs dependencies and provides a URL.

Limitation: Free tier spins down after 15 minutes of inactivity, causing delays. 750 free hours/month.

Step 3: Host the React Frontend

Host your static React app on a free platform.

Option 1: Vercel (Free Tier)

Features: 100GB bandwidth, auto HTTPS, subdomain (e.g., yourapp.vercel.app).

  1. Sign up at vercel.com and connect your GitHub repo.
  2. Create a new project, select your repo, and configure:
    • Framework Preset: Create React App
    • Build Command: npm run build
    • Output Directory: build
  3. Deploy; Vercel provides a URL.
  4. Update your React app’s API calls to the backend URL (e.g., https://yourusername.pythonanywhere.com/api/data).

Limitation: 100GB bandwidth/month, no server-side rendering in free tier.

Option 2: Netlify (Free Tier)

Features: 100GB bandwidth, auto HTTPS, subdomain (e.g., yourapp.netlify.app).

  1. Sign up at netlify.com and connect your GitHub repo.
  2. Create a new site, select your repo, and configure:
    • Build Command: npm run build
    • Publish Directory: build
  3. Deploy; Netlify provides a URL.
  4. Update API calls to your backend.

Limitation: 100GB bandwidth/month, limited serverless functions.

Step 4: Integrate Frontend and Backend

Ensure your React frontend communicates with the Python backend via API calls.

  1. Update your React app’s API base URL to the deployed backend URL.
  2. Verify CORS is enabled on the backend. For Flask, flask-cors is already included in our example.
  3. Test by making requests from the frontend to the backend.

If using FastAPI instead of Flask, add CORS middleware:

# main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    allow_origins=["https://yourapp.vercel.app"],
    allow_methods=["*"],
    allow_headers=["*"]
)

@app.get("/api/data")
async def get_data():
    return {"message": "Hello from Python!"}

Step 5: Test and Deploy

Local Testing

  1. Run the backend: python app.py or gunicorn app:app.
  2. Run the frontend: npm start.
  3. Test API calls locally to ensure they work.

Deploy

  1. Deploy the backend to PythonAnywhere or Render.
  2. Deploy the frontend to Vercel or Netlify.
  3. Update the frontend’s API URL to the backend’s deployed URL.
  4. Visit the frontend URL and verify functionality.

Recommended Free Stack

  • Backend: PythonAnywhere (easy, no Docker) or Render (modern, Git-based).
  • Frontend: Vercel (fast, developer-friendly) or Netlify (great UI).
  • Why: Generous free tiers, Git integration, and reliable for Python-React apps.

Troubleshooting

  • CORS Issues: Ensure CORS is enabled and API URLs are correct.
  • Spin-Down Delays: Render’s free tier spins down; use PythonAnywhere for always-on hosting.
  • Resource Limits: Optimize code (minify JS, reduce dependencies).
  • Logs: Check PythonAnywhere server logs or Vercel build logs for debugging.

Conclusion

You’ve now learned how to host a Python backend and React frontend for free! This setup is ideal for small projects, prototypes, or learning. For production apps, consider paid plans for better performance and custom domains.

Have questions or run into issues? Leave a comment below, and I’ll help you out!

Resources

Comments

Post a Comment

Popular posts from this blog

Building and Deploying a Recommender System on Kubeflow with KServe

Building and Deploying a Recommender System on Kubeflow with KServe In this tutorial, we'll walk through the process of developing a basic recommender system and deploying it on a Kubernetes cluster using Kubeflow and KServe (formerly KFServing). Kubeflow provides an end-to-end platform for machine learning workflows, and KServe simplifies model serving with powerful features like autoscaling and multi-framework support. What You'll Learn Understanding the core components: Kubeflow, KServe. Training a simple collaborative filtering recommender model. Containerizing your model training and serving code. Defining a Kubeflow Pipeline for MLOps (optional but recommended). Deploying your trained model using KServe's InferenceService . Sending inference requests to your deployed model. Prerequisites Before you begin, e...
Read more

CrewAI vs LangGraph: A Simple Guide to Multi-Agent Frameworks

CrewAI vs LangGraph: A Simple Guide to Multi-Agent Frameworks 🤖 Introduction In the rapidly evolving space of autonomous AI agents, two exciting frameworks are standing out in 2025: CrewAI and LangGraph . Both are designed to help developers build multi-agent systems , but they take very different approaches. This tutorial offers a side-by-side comparison to help you choose the right tool for your use case. Whether you're building a collaborative task automation system or chaining agents in complex workflows, this guide will get you started. 🛠️ What Is CrewAI? CrewAI is an open-source Python framework built from scratch to create and manage a group (a "crew") of autonomous agents. These agents collaborate like a team to accomplish shared goals. Key Features of CrewAI Role-based agents Task delegation and orchestration Integration with tools (e.g., web search, API calling) ...
Read more

Tutorial: Building Login and Sign-Up Pages with React, FastAPI, and XAMPP (MySQL)

This tutorial guides you through creating a secure, modern authentication system using React for the frontend, FastAPI for the backend, and XAMPP (MySQL) for the database. We'll use Tailwind CSS for responsive styling and JWT for authentication. The content is formatted as an HTML file for your Google blog, with detailed explanations of every component, file, and code segment. All files ( package.json , requirements.txt , CSS, etc.) are included, and the code is modular, reusable, and beginner-friendly. Prerequisites Before starting, ensure you have: XAMPP installed with MySQL and Apache running. Node.js and npm (v16 or later) for React. Python 3.8+ with pip for FastAPI. Basic knowledge of React, Python, and MySQL. A code editor (e.g., VS Code). Postman or a browser for API testing. Project Structure Create a project folder named auth-app/ with the following structure: auth-app/ ├── backend/ │ ├── .env │ ...
Read more