User:Pedro Sá Couto/Prototyping 5th/Flask App/Serving static files with Flask: Difference between revisions
(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: | ||
=SERVING STATIC FILES WITH FLASK (JS, CSS, IMG)= | |||
===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