Install and configure a basic assets pipeline

David Cain · David Cain · commit a8d495591789 · 2017-01-30T12:54:58.000-08:00
- Use Flask assets to bundle different JavaScript &amp; fingerprint
- Use Bower + hard-coded assets for simple JS dependency management

For now, just specify Angular as a dependency. We'll expand upon this
later.
diff --git a/.bowerrc b/.bowerrc
@@ -0,0 +1,3 @@
+{
+    "directory" : "todo/static/bower_components"
+}
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
 /.eggs
 /todo_env
 *.db
+/todo/static/gen/
+/todo/static/.webassets-cache/
+bower_components
diff --git a/README.md b/README.md
@@ -1,7 +1,17 @@
 # Installation guide
 
+## Retrieve assets with Bower
+
+    npm install -g bower
+    bower install
+
+## Set up a virtual environment
+
     python3 -m venv todo_env
     source todo_env/bin/activate
     pip3 install --editable .
+
+## Run server
+
     export FLASK_APP=todo
     flask run
diff --git a/bower.json b/bower.json
@@ -0,0 +1,10 @@
+{
+  "name": "todo",
+  "authors": [
+    "David Cain <dcain@aledade.com>"
+  ],
+  "description": "A simple Angular-based 'TODO' application",
+  "dependencies": {
+    "angular": ">=1.5.0"
+  }
+}
diff --git a/setup.py b/setup.py
@@ -7,6 +7,7 @@
     include_package_data=True,
     install_requires=[
         'flask ~= 0.12',
+        'flask-assets ~= 0.12',
         'alembic',
         'sqlalchemy ~= 1.0',
     ],
diff --git a/todo/static/css/base.css b/todo/static/css/base.css
diff --git a/todo/static/js/hello.js b/todo/static/js/hello.js
@@ -0,0 +1 @@
+console.log("Hi");
diff --git a/todo/templates/base.html b/todo/templates/base.html
@@ -6,16 +6,19 @@
   <meta charset="utf-8">
 
   <title>TODO</title>
-  <link href="/static/dist/styles.css" rel="stylesheet">
-  {% block headscripting %}{% endblock %}
+  {% assets "base_css" %}
+    <link href="{{ ASSET_URL }}" rel="stylesheet">
+  {% endassets %}
+  <script src="/static/bower_components/angular/angular.js"></script>
 </head>
 <body {% block ng_app %}{% endblock %}>
   <div class="container" id="main-block">
-    {% block page_header %}{% endblock %}
     {% block content %}
     {% endblock %}
   </div>
 
-  {% block scripting %}{% endblock %}
+  {% assets "main_js" %}
+    <script src="{{ ASSET_URL }}"></script>
+  {% endassets %}
 </body>
 </html>
diff --git a/todo/todo.py b/todo/todo.py
@@ -2,6 +2,7 @@
 import os
 
 from flask import Flask, g, render_template
+from flask_assets import Environment, Bundle
 
 
 app = Flask(__name__)
@@ -37,6 +38,19 @@ def close_db(error):
         g.sqlite_db.close()
 
 
+# set up asset management
+assets = Environment(app)
+a_s = {
+    'base_css': Bundle('css/base.css', output='gen/base.css'),
+
+    # all the JS for our single-page application
+    'main_js': Bundle('js/hello.js', output='gen/main.js'),
+}
+
+for ast, bun in a_s.items():
+    assets.register(ast, bun)
+
+
 @app.route('/')
 def hello_world():
     return render_template('base.html')

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "directory" : "todo/static/bower_components"`
	`3`	`+}`