article

Friday, February 17, 2023

FastAPI Simple Website with Jinja2 Template

FastAPI Simple Website with Jinja2 Template

Install Fastapi

https://github.com/tiangolo/fastapi

pip install fastapi
C:\fastAPI\simplewebsite>pip install fastapi
C:\fastAPI\simplewebsite>pip install "uvicorn[standard]"

Install sqlalchemy jinja2
pip install python-multipart sqlalchemy jinja2
C:\fastAPI\simplewebsite>pip install python-multipart sqlalchemy jinja2

Create main.py
simplewebsite/main.py
simplewebsite/main.py

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#simplewebsite/main.py
from fastapi import FastAPI, Request
 
from starlette.templating import Jinja2Templates
from fastapi.staticfiles import StaticFiles
 
templates = Jinja2Templates(directory="templates")
 
app = FastAPI()
 
app.mount("/static",StaticFiles(directory="static",html=True),name="static")
 
@app.get("/")
def home(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})
 
@app.get("/about")
def about(request: Request):
    return templates.TemplateResponse("about.html", {"request": request})
 
@app.get("/contact")
def contact(request: Request):
    return templates.TemplateResponse("contact.html", {"request": request})
download bootstrap template https://startbootstrap.com/template/modern-business

simplewebsite/templates/base.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//simplewebsite/templates/base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="{{ url_for('static', path='/css/styles.css')}}"/>
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
<title>{% block title %} My Webpage {% endblock %}</title>
</head>
<body class="d-flex flex-column h-100">
<main class="flex-shrink-0">   
    {% include "nav.html" %}
    {% block content %}{% endblock %}
</main>
{% include "footer.html" %}
<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Core theme JS-->
<script src="{{ url_for('static', path='/js/scripts.js')}}"></script>
</body>
</html>
simplewebsite/templates/index.html
?
1
2
3
4
5
6
7
8
9
//simplewebsite/templates/index.html
{% extends "base.html" %}
 
{% block title %}Home Page{% endblock %}
 
{% block content %}
  Index.html Home page
 
{% endblock %}
simplewebsite/templates/nav.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//simplewebsite/templates/nav.html
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container px-5">
        <a class="navbar-brand" href="/">Start Bootstrap</a>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="/about">About</a></li>
                <li class="nav-item"><a class="nav-link" href="/contact">Contact</a></li>
                <li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li>
                <li class="nav-item"><a class="nav-link" href="faq.html">FAQ</a></li>
            </ul>
        </div>
    </div>
</nav>
simplewebsite/templates/footer.html
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//simplewebsite/templates/footer.html
        <footer class="bg-dark py-4 mt-auto">
          <div class="container px-5">
              <div class="row align-items-center justify-content-between flex-column flex-sm-row">
                  <div class="col-auto"><div class="small m-0 text-white">Copyright © Your Website 2022</div></div>
                  <div class="col-auto">
                      <a class="link-light small" href="#!">Privacy</a>
                      <span class="text-white mx-1">·</span>
                      <a class="link-light small" href="#!">Terms</a>
                      <span class="text-white mx-1">·</span>
                      <a class="link-light small" href="#!">Contact</a>
                  </div>
              </div>
          </div>
      </footer>
simplewebsite/templates/about.html
?
1
2
3
4
5
6
7
8
//simplewebsite/templates/about.html
{% extends "base.html" %}
{% block title %}About Page{% endblock %}
 
{% block content %}
    About Page
 
{% endblock %}   
simplewebsite/templates/contact.html
?
1
2
3
4
5
6
7
8
//simplewebsite/templates/contact.html
{% extends "base.html" %}
 
{% block title %}Contact Page{% endblock %}
 
{% block content %}
    Contact Page
{% endblock %}
run the FastAPI app

C:\fastAPI\simplewebsite>uvicorn main:app --reload
with uvicorn using the file_name:app_instance
open the link on the browser http://127.0.0.1:8000/
http://127.0.0.1:8000/docs
Posted by ednalan at 3:37 PM . Under .

Related Post