User:Pedro Sá Couto/Prototyping 5th/Flask App/Serving static files with Flask: Difference between revisions
No edit summary |
|||
(2 intermediate revisions by the same user not shown) | |||
Line 6: | Line 6: | ||
</pre> | </pre> | ||
02 Run the app=== | ===02 Run the app=== | ||
<pre style="color: silver; background: black;"> | <pre style="color: silver; background: black;"> | ||
$ flask run --host=0.0.0.0 | $ flask run --host=0.0.0.0 | ||
</pre> | </pre> | ||
03 Create a new directory=== | ===03 Create a new directory=== | ||
<pre style="color: silver; background: black;"> | <pre style="color: silver; background: black;"> | ||
$ mkdir app/static | $ mkdir app/static | ||
</pre> | </pre> | ||
04 Create new directories to each of the types=== | ===04 Create new directories to each of the types=== | ||
<pre style="color: silver; background: black;"> | <pre style="color: silver; background: black;"> | ||
$ cd static | $ cd static | ||
Line 22: | Line 22: | ||
</pre> | </pre> | ||
05 Create a style.css, an app.js , and an image.png=== | ===05 Create a style.css, an app.js , and an image.png=== | ||
<pre style="color: silver; background: black;"> | <pre style="color: silver; background: black;"> | ||
$ touch js/app.js css/style.css img/flask.png | $ touch js/app.js css/style.css img/flask.png | ||
</pre> | </pre> | ||
06 Add something to JS and CSS to visualise them=== | ===06 Add something to JS and CSS to visualise them=== | ||
CSS | CSS | ||
<pre> | <pre> | ||
Line 35: | Line 35: | ||
</pre> | </pre> | ||
JS | JS | ||
<pre> | |||
console.log("Hello from app.js"); | console.log("Hello from app.js"); | ||
</pre> | </pre> | ||
07 Use the files in the HTML=== | ===07 Use the files in the HTML=== | ||
You need to use JINJA templating sintax | You need to use JINJA templating sintax | ||
It always requires two arguments, the Directory and Filename | It always requires two arguments, the Directory and Filename | ||
CSS | CSS | ||
<pre> | <pre> |
Latest revision as of 19:31, 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