How to serve static files in Flask

Question

So this is embarrassing  I ve got an application that I threw together in Flask and for now it is just serving up a single static HTML page with some links to CSS and JS  And I can t find where in the documentation Flask describes returning static files  Yes  I could use render template but I know the data is not templatized  I d have thought send file or url for was the right thing  but I could not get those to work  In the meantime  I am opening the files  reading content  and rigging up a Response with appropriate mimetype  import os path  from flask import Flask  Response   app   Flask   name    app config from object   name      def root dir       pragma  no cover     return os path abspath os path dirname   file       def get file filename      pragma  no cover     try          src   os path join root dir    filename            Figure out how flask returns static files           Tried            - render template           - send file           This should not be so non-obvious         return open src  read       except IOError as exc          return str exc     app route      methods   GET    def metrics       pragma  no cover     content   get file  jenkins analytics html       return Response content  mimetype  quot text html quot      app route      defaults   path         app route    lt path path gt    def get resource path      pragma  no cover     mimetypes              quot  css quot    quot text css quot            quot  html quot    quot text html quot            quot  js quot    quot application javascript quot             complete path   os path join root dir    path      ext   os path splitext path  1      mimetype   mimetypes get ext   quot text html quot       content   get file complete path      return Response content  mimetype mimetype    if   name         main        pragma  no cover     app run port 80   Someone want to give a code sample or url for this  I know this is going to be dead simple

User · Answer

For angular boilerplate flow which creates next folders tree   backend     ------ui          ------------------build            lt -- static  folder  constructed by Grunt         -- lt proj            ----vendors     lt -- angular js and others here         --     folders gt     ----src         lt -- your js                            ----index html  lt -- your SPA entrypoint   ------ lt proj  ------     folders gt     ------view py   lt -- Flask app here   I use following solution       root   os path join os path dirname os path abspath   file       ui    build     app route    lt path path gt    methods   GET    def static proxy path       return send from directory root  path     app route      methods   GET    def redirect to index        return send from directory root   index html         It helps to redefine  static  folder to custom

User · Answer

One of the simple way to do  Cheers   demo py  from flask import Flask  render template app   Flask   name      app route      def index       return render template  index html    if   name         main        app run debug   True    Now create folder name called templates  Add your index html file inside of templates folder  index html   lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt Python Web Application lt  title gt   lt  head gt   lt body gt       lt div gt            lt p gt              Welcomes You             lt  p gt       lt  div gt   lt  body gt   lt  html gt    Project Structure  -demo py -templates index html

User · Answer

All the answers are good but what worked well for me is just using the simple function send file from Flask  This works well when you just need to send an html file as response when host port ApiName will show the output of the file in browser     app route   ApiName   def ApiFunc        try          return send file  some-other-directory-than-root your-file extension       except Exception as e          logging info e args 0

User · Answer

Thought of sharing     this example   from flask import Flask app   Flask   name      app route   loading    def hello world        data   open  sample html   read           return data  if   name         main         app run host  0 0 0 0     This works better and simple

User · Answer

So I got things working  based on  user1671599 answer  and wanted to share it with you guys    I hope I m doing it right since it s my first app in Python   I did this -  Project structure     server py   from server AppStarter import AppStarter import os  static folder root   os path join os path dirname os path abspath   file       client    app   AppStarter   app register routes to resources static folder root  app run   name      AppStarter py   from flask import Flask  send from directory from flask restful import Api  Resource from server ApiResources TodoList import TodoList from server ApiResources Todo import Todo   class AppStarter Resource       def   init   self           self  static files root folder path         Default is current folder         self  app   Flask   name         static folder  client   static url path             self  api   Api self  app       def  register static server self  static files root folder path           self  static files root folder path   static files root folder path         self  app add url rule    lt path file relative path to root gt     serve page   self  serve page  methods   GET            self  app add url rule       index   self  goto index  methods   GET         def register routes to resources self  static files root folder path            self  register static server static files root folder path          self  api add resource TodoList    todos           self  api add resource Todo    todos  lt todo id gt         def  goto index self           return self  serve page  index html        def  serve page self  file relative path to root           return send from directory self  static files root folder path  file relative path to root       def run self  module name           if module name       main                 self  app run debug True

User · Answer

nbsp  nbsp  nbsp By default  flask use a  templates  folder to contain all your template files any plain-text file  but usually  html or some kind of template language such as jinja2    amp  a  static  folder to contain all your static files i e   js  css and your images     nbsp  nbsp  nbsp In your routes  u can use render template   to render a template file  as I say above  by default it is placed in the templates folder  as the response for your request  And in the template file  it s usually a  html-like file   u may use some  js and or   css  files  so I guess your question is how u link these static files to the current template file

User · Answer

Use redirect and url for  from flask import redirect  url for   app route      methods   GET    def metrics        return redirect url for  static   filename  jenkins analytics html      This servers all files  css  amp  js     referenced in your html

User · Answer

I m sure you ll find what you need there  http   flask pocoo org docs quickstart  static-files  Basically you just need a  static  folder at the root of your package  and then you can use url for  static   filename  foo bar   or directly link to your files with http   example com static foo bar   EDIT  As suggested in the comments you could directly use the   static foo bar  URL path BUT url for   overhead  performance wise  is quite low  and using it means that you ll be able to easily customise the behaviour afterwards  change the folder  change the URL path  move your static files to S3  etc

User · Answer

You can also  and this is my favorite  set a folder as static path so that the files inside are reachable for everyone   app   Flask   name    static url path   static     With that set you can use the standard HTML    lt link rel  stylesheet  type  text css  href   static style css  gt

User · Answer

A simplest working example based on the other answers is the following   from flask import Flask  request app   Flask   name    static url path       app route   index    def root        return app send static file  index html    if   name         main       app run debug True    With the HTML called index html    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt Hello World  lt  title gt   lt  head gt   lt body gt       lt div gt            lt p gt              This is a test            lt  p gt       lt  div gt   lt  body gt   lt  html gt    IMPORTANT  And index html is in a folder called static  meaning  lt projectpath gt  has the  py file  and  lt projectpath gt  static has the html file   If you want the server to be visible on the network  use app run debug True  host  0 0 0 0    EDIT  For showing all files in the folder if requested  use this   app route    lt path path gt    def static file path       return app send static file path    Which is essentially BlackMamba s answer  so give them an upvote

User · Answer

What I use  and it s been working great  is a  templates  directory and a  static  directory  I place all my  html files Flask templates inside the templates directory  and static contains CSS JS  render template works fine for generic html files to my knowledge  regardless of the extent at which you used Flask s templating syntax  Below is a sample call in my views py file    app route   projects   def projects        return render template  projects html   title    Projects     Just make sure you use url for   when you do want to reference some static file in the separate static directory  You ll probably end up doing this anyways in your CSS JS file links in html  For instance      lt script src     url for  static   filename  styles dist js bootstrap js       gt  lt  script gt    Here s a link to the  canonical  informal Flask tutorial - lots of great tips in here to help you hit the ground running    http   blog miguelgrinberg com post the-flask-mega-tutorial-part-i-hello-world

User · Answer

The preferred method is to use nginx or another web server to serve static files  they ll be able to do it more efficiently than Flask   However  you can use send from directory to send files from a directory  which can be pretty convenient in some situations   from flask import Flask  request  send from directory    set the project root directory as the static folder  you can set others  app   Flask   name    static url path       app route   js  lt path path gt    def send js path       return send from directory  js   path   if   name         main         app run     Do not use send file or send static file with a user-supplied path   send static file example   from flask import Flask  request   set the project root directory as the static folder  you can set others  app   Flask   name    static url path       app route      def root        return app send static file  index html

User · Answer

If you just want to move the location of your static files  then the simplest method is to declare the paths in the constructor  In the example below  I have moved my templates and static files into a sub-folder called web   app   Flask   name                static url path                  static folder  web static               template folder  web templates      static url path    removes any preceding path from the URL  i e  the default  static   static folder  web static  to serve any files found in the folder web static as static files  template folder  web templates  similarly  this changes the templates folder    Using this method  the following URL will return a CSS file    lt link rel  stylesheet  type  text css  href   css bootstrap min css  gt    And finally  here s a snap of the folder structure  where flask server py is the Flask instance

User · Answer

You can use this function       send static file filename    Function used internally to send static   files from the static folder to the browser    app   Flask   name     app route    lt path path gt    def static file path       return app send static file path

User · Answer

The URL for a static file can be created using the static endpoint as following  url for  static   filename    name of file    lt link rel  quot stylesheet quot  href  quot   url for  static   filename  borders css     quot    gt

User · Answer

If you are just trying to open a file  you could use  app open resource    So reading a file would look something like  with app open resource   static path yourfile           code to read the file and do something

User · Answer

app   Flask   name    static folder  your path to static     If you have templates in your root directory  placing the app Flask name  will work if the file that contains this also is in the same location  if this file is in another location  you will have to specify the template location to enable Flask to point to the location

User · Answer

By default folder named  quot static quot  contains all static files Here s code sample   x000D   x000D   lt link href     url for  static   filename  vendor bootstrap css bootstrap min css       rel  stylesheet  gt  x000D   x000D   x000D

User · Answer

The simplest way is create a static folder inside the main project folder  Static folder containing  css files   main folder   Main Folder  Main Folder templates foo html  Main Folder static foo css  Main Folder application py flask script    Image of main folder containing static and templates folders and flask script  flask  from flask import Flask  render template  app   Flask   name      app route      def login        return render template  login html     html  layout    lt  DOCTYPE html gt   lt html gt       lt head gt           lt title gt Project 1  lt  title gt           lt link rel  stylesheet  href   static styles css  gt        lt  head gt       lt body gt           lt header gt               lt div class  container  gt                   lt nav gt                       lt a class  title  href    gt Kamook lt  a gt                       lt a class  text  href    gt Sign Up lt  a gt                       lt a class  text  href    gt Log In lt  a gt                   lt  nav gt               lt  div gt           lt  header gt               block body               endblock         lt  body gt   lt  html gt    html     extends  layout html         block body         lt div class  col  gt           lt input type  text  name  username  placeholder  Username  required gt           lt input type  password  name  password  placeholder  Password  required gt           lt input type  submit  value  Login  gt       lt  div gt     endblock

[python] How to serve static files in Flask

Examples related to python

Examples related to flask

Examples related to static-files