How to run a Python script like a backend in HTML

Sure, I am no pro by any means but this is how I would do it.

# main.py

""" FastAPI endpoint that your front end can call to fire off your script """

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

# Adjust your CORS settings as you need too
# https://fastapi.tiangolo.com/tutorial/cors/

origins = [
    "http://localhost.tiangolo.com",
    "https://localhost.tiangolo.com",
    "http://localhost",
    "http://localhost:8080",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


@app.get("/")
async def root():
    return {"message": "I am Root!"}

@app.get("/api/name-your-endpoint")
def some_func():
    # add your script here and pass anything you need as an argument
    pass

With the above, you have a simple endpoint called http://localhost/api/name-your-endpoint for example. This can now be called by anything once it’s running. You could use fetch() or useEffect() depending if you’re going vanilla JS or React.

Below is the Dockerfile I have used for one of my API projects, this is likely to be different for you but gives you an idea of what to expect. you can find more info here: https://fastapi.tiangolo.com/deployment/docker/

Please bare in mind that this Dockerfile uses pipenv and not standard requirements.txt

# DockerFile

# For more information, please refer to https://aka.ms/vscode-docker-python
FROM python:3.8-slim

EXPOSE 80

# Keeps Python from generating .pyc files in the container
ENV PYTHONDONTWRITEBYTECODE=1

# Turns off buffering for easier container logging
ENV PYTHONUNBUFFERED=1

# Install pip requirements
COPY Pipfile Pipfile.lock ./
RUN python -m pip install --upgrade pip
RUN pip install pipenv && pipenv install --dev --system --deploy

WORKDIR /app
COPY . /app

# Creates a non-root user with an explicit UID and adds permission to access the /app folder
# For more info, please refer to https://aka.ms/vscode-docker-python-configure-containers
RUN adduser -u 5678 --disabled-password --gecos "" appuser && chown -R appuser /app
USER appuser

# During debugging, this entry point will be overridden. For more information, please refer to https://aka.ms/vscode-docker-python-debug
CMD ["uvicorn", "main:app", "--proxy-headers", "--host", "0.0.0.0", "--port", "8080"]

Now for the front end, I would use React if you know it, and build something like this, this will have the user call the end point via a button.

// App.jsx

// This component will use a button in the UI to call the endpoint and populate the data

import { useState } from 'react'

function App() {

   const [data, setData] = useState([])

   const generateDataFromEndpoint = async () => {

   try {
        await fetch(
          `${YOUR-HOST-BASE-URL}/api/api/name-your-endpoint`,
        )
          .then(res => res.json())
          .then(data => {
            setData(data)
            return true
          })
      } catch (error) {
        console.log(error)
      }
     }

      return (
        <> 
          <button onClick={generateDataFromEndpoint()}>Get data</button>
          
          {`display your data by mapping over the returned array`}
          <div>
            {data.map((d) => (
              <div>{d.someDataFromReturnedObject}</div>
            ))}
          </div>
        </>
      )

}

Or you could use something like useEffect() where the client will call the endpoint when the component loads.

// App.jsx

import {useEffect, useState} from 'react'

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

  const generateDataFromEndpoint = async () => {
    try {
      await fetch(`${YOUR-HOST-BASE-URL}/api/api/name-your-endpoint`)
        .then(res => res.json())
        .then(data => {
          setData(data)
          return true
        })
    } catch (error) {
      console.log(error)
    }
  }

  useEffect(() => {
    generateDataFromEndpoint()
  }, [])

  return (
    <>
      {`display your data by mapping over the returned array`}
      <div>
        {data.map(d => (
          <div>{d.someDataFromReturnedObject}</div>
        ))}
      </div>
    </>
  )
}

Of if you’re using vanilla JS you can just use fetch() like so:

const generateDataFromEndpoint = async () => {
    try {
      await fetch(`${YOUR-HOST-BASE-URL}/api/api/name-your-endpoint`)
        .then(res => res.json())
        .then(data => {
          setData(data)
          return true
        })
    } catch (error) {
      console.log(error)
    }
  }

This might be over kill for what you need but this is how I have done it in the past and works very well. But you would need a way to host and run a Docker container for this to work.

If you are using React you could look at something like Vite.JS and host it on something like Vercel

Below I have included some links for your reference

• React useState Hook
• React useEffect hook
• Hosting your front end with FastAPI with static files
• Hosting FastAPI via Docker

This is also this SO link How can I run a Python script in HTML?