User:Pedro Sá Couto/Prototyping 5th/Flask App/Serving static files with Flask: Difference between revisions

From XPUB & Lens-Based wiki
(Created page with "01 Activate the created Virtual Environment $ source venv/bin/activate 02 Run the app $ flask run --host=0.0.0.0 03 Create a new directory $ mkdir app/stati...")
 
No edit summary
Line 1: Line 1:
01 Activate the created Virtual Environment
=SERVING STATIC FILES WITH FLASK (JS, CSS, IMG)=
 
    $ source venv/bin/activate
 
 
02 Run the app
 
    $ flask run --host=0.0.0.0
 
 
03 Create a new directory
 
    $ mkdir app/static
 
 
04 Create new directories to each of the types
 
    $ cd static
 
    $ mkdir js css img
 
 
05 Create a style.css, an app.js , and an image.png
 
    $ touch js/app.js css/style.css img/flask.png
 
 
06 Add something to JS and CSS to visualise them
 
    CSS
 
    body{
 
      background-color: #f1f1f1;
 
    }
 
    JS
 
    console.log("Hello from app.js");
 
 
07 Use them in the HTML
 
    You need to use JINJA templating sintax
 
    It always requires two arguments, the Directory and Filename
 
    CSS
 
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
 
    JS
 
    <script src="{{ url_for('static', filename='js/app.js') }}"></script>
 
    IMG
 
    <img src="{{ url_for('static', filename='img/flask.png') }}" alt="">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


===01 Activate the created Virtual Environment===
<pre style="color: silver; background: black;">
$ source venv/bin/activate
</pre>


02 Run the app===
<pre style="color: silver; background: black;">
$ flask run --host=0.0.0.0
</pre>


03 Create a new directory===
<pre style="color: silver; background: black;">
$ mkdir app/static
</pre>


04 Create new directories to each of the types===
<pre style="color: silver; background: black;">
$ cd static
$ mkdir js css img
</pre>


05 Create a style.css, an app.js , and an image.png===
<pre style="color: silver; background: black;">
$ touch js/app.js css/style.css img/flask.png
</pre>


06 Add something to JS and CSS to visualise them===
CSS
<pre>
body{
  background-color: #f1f1f1;
}
</pre>
JS
console.log("Hello from app.js");
</pre>


07 Use the files in the HTML===
<pre>
You need to use JINJA templating sintax
It always requires two arguments, the Directory and Filename
</pre>
CSS
<pre>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</pre>


JS
<pre>
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
</pre>


IMG
<pre>
<img src="{{ url_for('static', filename='img/flask.png') }}" alt="">
</pre>


<br><br><br><br>
<pre>
     Serving static files with Flask - Python on the web - Learning Flask Series Pt. 4
     Serving static files with Flask - Python on the web - Learning Flask Series Pt. 4
     https://www.youtube.com/watch?v=GxT0zgZSHE8
     https://www.youtube.com/watch?v=GxT0zgZSHE8
     https://pythonise.com/series/learning-flask/serving-static-files-with-flask
     https://pythonise.com/series/learning-flask/serving-static-files-with-flask

Revision as of 19:30, 2 April 2020

SERVING STATIC FILES WITH FLASK (JS, CSS, IMG)

01 Activate the created Virtual Environment

$ source venv/bin/activate

02 Run the app=== 

$ flask run --host=0.0.0.0

03 Create a new directory=== 

$ mkdir app/static

04 Create new directories to each of the types=== 

$ cd static
$ mkdir js css img

05 Create a style.css, an app.js , and an image.png=== 

$ touch js/app.js css/style.css img/flask.png

06 Add something to JS and CSS to visualise them=== CSS 

body{
  background-color: #f1f1f1;
}

JS console.log("Hello from app.js");

07 Use the files in the HTML=== 

You need to use JINJA templating sintax
It always requires two arguments, the Directory and Filename

CSS 

<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

JS 

<script src="{{ url_for('static', filename='js/app.js') }}"></script>

IMG 

<img src="{{ url_for('static', filename='img/flask.png') }}" alt="">






    Serving static files with Flask - Python on the web - Learning Flask Series Pt. 4
    https://www.youtube.com/watch?v=GxT0zgZSHE8
    https://pythonise.com/series/learning-flask/serving-static-files-with-flask
Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=User:Pedro_Sá_Couto/Prototyping_5th/Flask_App/Serving_static_files_with_Flask&oldid=168398"