Link files from html using fastapi and jinja2

Question

Hi I'm trying to link to an json file from html code using fastapi and jinja2 but the link is not working. I guess i have to tell fastapi how to find the file or something like that.. I get an json (api) answer instad of the file..

{"detail":"Not Found"}

The python code:

from fastapi import FastAPI, Form, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates

app = FastAPI()

templates = Jinja2Templates(directory='templates')


@app.get('/data', response_class=HTMLResponse)
async def data(request: Request):
    return templates.TemplateResponse('data.html', {
        'request': request
    })

And the HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
        <title>Data</title>
    </head>
    <body>
        <div class="ui container">
            <h1>
                Data downloader:
            </h1>
            <a href="../json/data.json" target="_blank">
                Data
            </a>
        </div>

    </body>
</html>

I would bet the href is wrong. If it's a path to a route, you don't need the .., the same if the data.json file is in the same folder — lsabi
– lsabi, Commented Jan 28, 2021 at 14:03
@lsabi No... The path is correct and the url that opens in the new tab is the path where the data.json is located.. If I run the html directly without using fastapi and uvicorn the lik works... So it must be in the fastapi module i have missed something.. — Nisse Karlsson
– Nisse Karlsson, Commented Jan 28, 2021 at 21:05
Try sharing your folder structure. Fastapi may be serving only a certain folder as static and the rest pass it through the internal routers — lsabi
– lsabi, Commented Jan 29, 2021 at 8:22

Nisse Karlsson · Accepted Answer · 2021-01-29 11:05:55Z

This code did it..

python:

from fastapi import FastAPI, Form, Request
from fastapi.responses import HTMLResponse
from fastapi.templating import Jinja2Templates
from fastapi.staticfiles import StaticFiles
app = FastAPI()
app.mount("/json", StaticFiles(directory="json"), name="json")

templates = Jinja2Templates(directory='templates')


@app.get('/data', response_class=HTMLResponse)
async def data(request: Request):
    return templates.TemplateResponse('data.html', {
        'request': request
    })

HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
        <title>Data</title>
    </head>
    <body>
        <div class="ui container">
            <h1>
                Data downloader:
            </h1>
            <a href="{{ url_for('json', path='/data.json') }}" target="_blank">
                Data
            </a>
        </div>

    </body>
</html>

So it was the import and use of StaticFiles that first code dint have

Collectives™ on Stack Overflow

Link files from html using fastapi and jinja2

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related