1

In my web app, in addition to the actual app-related pages (index and output), I have a couple of other pages, but these pages are static. For example, one page is "Process" and another one "Contact". In the nav bar for all the HTML files, I want to have links to these pages. I am serving these pages as <li><a href="./static/process.html">Process</a></li> and <li><a href="./static/contact.html">Contact</a></li>.

When clicked on these links from index page, I can get to either of these pages - no problem. However, if I am on Process page and click on the link to Contact, I get an error, because the address bar shows that it is trying to access http://localhost:5000/static/static/contact.html. I think my way of adding links to these static pages may be wrong. What's the best and right way of achieving this?

Billal Begueradj
  • 20,717
  • 43
  • 112
  • 130
bluetooth
  • 529
  • 6
  • 20

2 Answers2

0

Including ./ in a path means "from the current directory".

You are therefore trying to go into the static dir from within the static dir. Drop the ./static when linking between the two static pages.

Jason Stein
  • 714
  • 3
  • 10
  • Sure, that's one way to go. But this does not seem scalable. I was wondering if there is a more standard way, which will guide the browser or python to fetch/serve pages from `static` folder. – bluetooth Jun 26 '17 at 14:27
  • You mean you don't want to manually edit the anchor path every time? You could just put the absolute (full) path, rather than a relative link. – Jason Stein Jun 26 '17 at 14:35
  • That's a good idea! I can do that for local system. Could you suggest how to do this if I host this web app on AWS? Thank you for your help. – bluetooth Jun 26 '17 at 15:07
0

I believe this is what you are looking for.

How to serve static files in Flask

# index.html
<a href="{{ url_for('static', filename='process.html') }}">link</a>

Then as Jason said you need to drop the './' from your link in process.html and contact html.

# process.html
<a href="/static/contact.html">link</a>
# contact.html
<a href="/static/process.html">link</a>

As far as using AWS to serve files there are a lot of different ways but there is a flask extension that makes it pretty easy to serve via S3. https://flask-s3.readthedocs.io/en/latest/

This solution will fail to scale easily when linking from process.html to contact.html and vice versa as the links aren't dynamically generated. The only way to fix that is to make them templates and rendered and returned via a route.

Adam
  • 3,992
  • 2
  • 19
  • 39