I am working on a personal web app where frontend was created in a 3rd party (bootstrap) software.
My asset directory is under template/asset directory.
app = Flask(__name__, static_folder="templates/assets")
if I route to watch without any parameter it works fine and render all HTML, css elements
@app.route("/watch")
def watch():
link = "https://www.youtube.com/watch?v=Uh2ebFW8OYM"
return render_template('watch.html', link=link)
(works fine) Image for the route at http://localhost:5000/watch
as I add parameters, I start getting 404 errors and I get only HTML
@app.route("/watch/<youtuber>")
def watch_video(youtuber):
link = "https://www.youtube.com/watch?v=Uh2ebFW8OYM"
return render_template('watch.html', author = youtuber, link=link)
(error) Image for the route at http://localhost:5000/watch/Coreyms
and terminal throws 404 error
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/Coreyms HTTP/1.1" 200 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/fonts/fontawesome-all.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/fonts/font-awesome.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/fonts/fontawesome5-overrides.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/css/Contact-Form-Clean.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/css/Data-Table.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:12] "GET /watch/assets/css/Article-List.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:13] "GET /watch/assets/css/Data-Table-1.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:13] "GET /watch/assets/css/simple-footer.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:13] "GET /watch/assets/css/style.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:13] "GET /watch/assets/bootstrap/js/bootstrap.min.js HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:21:13] "GET /watch/assets/js/agency.js HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/bootstrap/css/bootstrap.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/fonts/fontawesome-all.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/css/Article-List.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/fonts/font-awesome.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/fonts/fontawesome5-overrides.min.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/css/Contact-Form-Clean.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/css/Data-Table-1.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:30] "GET /watch/assets/css/Data-Table.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:31] "GET /watch/assets/css/style.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:31] "GET /watch/assets/css/simple-footer.css HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:31] "GET /watch/assets/bootstrap/js/bootstrap.min.js HTTP/1.1" 404 -
127.0.0.1 - - [20/Sep/2021 09:32:31] "GET /watch/assets/js/agency.js HTTP/1.1" 404 -
I tried putting asset directory into the root staticdirectory and also I tried adding thewatchdirectory intoasset directory but nothing worked.
I tried finding solution online but is particularly addressing a problem like this.
This is what is inside my watch_template.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Home - Brand</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kaushan Script">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/Article-List.css">
<link rel="stylesheet" href="assets/css/Contact-Form-Clean.css">
<link rel="stylesheet" href="assets/css/Data-Table-1.css">
<link rel="stylesheet" href="assets/css/Data-Table.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="assets/css/simple-footer.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body class="d-flex flex-column justify-content-between" id="page-top" data-bs-spy="scroll" data-bs-target="#mainNav"
data-bs-offset="54"
style="100vh;">
<nav class="navbar navbar-dark navbar-expand-lg fixed-top bg-dark text-uppercase" id="mainNav">
<div class="container">
<!-- Start: home page --><a class="navbar-brand" href="{{url_for('home')}}">Home</a>
<!-- End: home page --><button data-bs-toggle="collapse" data-bs-target="#navbarResponsive"
class="navbar-toggler navbar-toggler-right" type="button" aria-controls="navbarResponsive"
aria-expanded="false" aria-label="Toggle navigation"><i class="fa fa-bars"></i></button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<!-- Start: Mid tabs -->
<ul class="navbar-nav mx-auto text-uppercase">
<li class="nav-item"><a class="nav-link" href="{{url_for('list authors')}}">List Author</a></li>
<li class="nav-item"><a class="nav-link" href="{{url_for('Subscriptions')}}">Subscriptions</a></li>
</ul><!-- End: Mid tabs -->
<!-- Start: right tab -->
<ul class="navbar-nav ms-auto text-uppercase">
<li class="nav-item"><a class="nav-link" href="{{url_for('report_problem')}}">REPORT A
PROBLEM<br></a></li>
</ul><!-- End: right tab -->
</div>
</div>
</nav>
<header class="masthead">
<div class="container" style="opacity: 0.98;">
<div class="intro-text" style="background: #414141;margin-top: 171px;">
<div class="intro-lead-in"><img id="title-logo-text" src="">
<h2>You are watching {}'s video on {}</h2>
{% block content %}
{% endblock content %}
</div>
<div class="d-flex justify-content-between intro-heading text-uppercase"
style="margin-right: 90px;margin-left: 90px;"><a href="#"><i
class="fas fa-angle-double-left"></i></a><a href="#"><i
class="fas fa-angle-double-right"></i></a></div>
<div>
<head>
<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
<!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
<!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
<video controls width="90%" autoplay muted>
Sorry, your browser doesn't support embedded videos.
</video>
<script src="https://vjs.zencdn.net/7.15.4/video.min.js"></script>
</body>
</div>
<div style="margin-right: 90px;margin-left: 90px;margin-top: 90px;"></div>
</div>
</div>
</header><!-- Start: simple footer -->
<div class="footer-2" style="background: rgb(52,58,64);">
<div class="container">
<div class="row">
<div class="col-2 col-sm-6 col-md-6 align-self-center">
<p class="text-start" style="margin-top:5%;margin-bottom:3%;">© 2021 YOUTUBE BEST CHANNELS</p>
</div>
<div class="col-12 col-sm-6 col-md-6">
</div>
</div>
</div>
</div><!-- End: simple footer -->
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<script src="assets/js/agency.js"></script>
</body>
</html>
CodePudding user response：
you are giving relative path, you need to change the links like
<link rel="stylesheet" href={{url_for('static', filename='bootstrap/css/bootstrap.min.css')}}>
Alternatively you can do
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">