![]() We initialize Flask-Assets by creating an Environment instance, and initializing it against Flask's app object. Let's get this baby fired up in app.py: from flask import FlaskĪpp = Flask(_name_, instance_relative_config=False) When the contents of these folders are compiled, we'll output the results to static/dist/less and static/dist/js where they'll be ready to serve. The key takeaway is that we're going to set up Flask-Assets to look for raw files to compile in static/src/less and static/src/js. We generally want to set this to be True, unless you'd prefer only to build assets with some external force (AKA: you're annoying).īefore diving into code, let's establish our app's structure. ASSETS_AUTO_BUILD: A flag to tell Flask to build our bundles of assets when Flask starts up automatically.This is useful for troubleshooting styles or JavaScript gone wrong. If we set this variable to True, Flask-Assets won't bundle our static files while we're running Flask in debug mode. ASSETS_DEBUG: We're bound to screw up a style or JS function every now and then, which sometimes doesn't become obvious until we build our bundles and try to use our app.Run which lessc in your terminal to find this path. LESS_BIN: LESS requires the NPM library called LESS (known to the system as lessc) to be installed on our system in order to compile LESS into CSS.Whoever created this library made the interesting choice of not documenting any of this, so I'm going to save you some time: """Flask configuration.""" I plan on writing styles with LESS and adding some frontend JavaScript to my app: $ pip install flask-assets lesscpy cssmin jsmin Install dependencies Flask-Assets ConfigurationĪs with most Flask plugins, we can configure Flask-assets by setting variables in our top-level Flask config. This is accomplished with the help of a few auxiliary Python libraries dedicated to building and compressing files: lesscpy and pyscss compile LESS/SCSS to CSS respectively, while cssmin and jsmin compress CSS/JavaScript.ĭepending on our choice of stack, we’ll need to install the appropriate Python packages. Depending on how we configure our app, Flask-Assets will compile static assets into bundles upon startup. One directory is reserved for raw uncompressed code, while the other is for production-ready, compressed assets generated from files stored in the former (this production-ready directory is commonly referred to as a /dist or /build folder). How it Worksįlask applications utilizing the Flask-Assets library will generally have two directories related to “static” assets. For those of us with higher aspirations than a full-time job maintaining 30-year old legacy code for Citibank, we’ll be learning about Flask-Assets. If you’re the type of person who’d prefer to link to a CDN-hosted version of jQuery 1.11 or include a hideously generic Bootstrap library to style your app for you, please stop reading and go away. It’s time to face our fears of dealing with frontend code in Flask the right way: by writing styles in CSS preprocessors, minifying files, and serving them in “bundles” akin to the webpack equivalent. This implied mindset is both somewhat absurd yet also unsurprising. py file is considered to be a "static" asset, tucked into a single directory after presumably receiving a handoff from a frontend developer. It had been decreed that only two types of code exist in the universe: Python, and not-Python. Since the early days of Django, Python developers have opted to coin frontend code as static assets: a backhanded term that seemingly downplays the importance of JavaScript, CSS, or any presentation layer assets which make up a web application. I’m fairly confident of this because you’re currently engaged in a Flask tutorial, as opposed to complaining about the number of frontend frameworks you’ve been forced to learn in the last decade (sorry frontend fam, you know I love you □).Įvery backend dev needs to come to terms with a stark reality: meaningful apps can’t be built without eventually digging into writing some styles or frontend JavaScript. You’re probably not a frontend developer, and I’m guessing you have no desire to become one. Demystifying Flask’s “Application Factory”.Bundle & Serve Frontend JS & Styles in Flask.Connect Flask to a Database with Flask-SQLAlchemy.Flask User Accounts & Authentication in with Flask-Login.User Session Data with Flask-Session & Redis.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |