flask-gulp-minimal-boilerplate

Minimal boilerplate/starter project for Flask 0.11 with Gulp for managing frontend assets.

Demo

Features

• Flask 0.11
• Flask-SQLAlchemy, Flask-WTF, flask-migrate, Flask-DebugToolbar
• UiKit: UIkit gives you a comprehensive collection of HTML, CSS, and JS components which is simple to use, easy to customize and extendable.
• Gulp
• BrowserSync
• Utilize best Flask practices with Application Factories and Blueprints patterns to structure the code and enables the creation of large applications
• pytest, webtest, factory_boy
• Flake8 and isort
• Custom shell commands (clean, lint, test, urls)

Requirements

• Python >= 2.7
• Node >= v4
• npm
• gulp

Quickstart

First, clone the repository:

$ git clone https://github.com/hypebeast/flask-gulp-minimal-boilerplate

Initialize a new git repository:

$ cd flask-gulp-minimal-boilerplate
$ rm -rf .git
$ git init
$ git add .
$ git commit -m 'initial commit'

Create a new virtualenv:

$ virtualenv env
$ source env/bin/python

Install Python, Node and Bower packages:

$ pip install -r requirements/dev.txt
$ npm install
$ bower install

Build all frontend assets:

$ gulp build

You must set some Flask environment variables before you can run shell commands:

$ export FLASK_APP=/path/to/app.py
$ export FLASK_DEBUG=1

Then run the development server:

$ flask run

Gulp + BrowserSync Workflow

If you want to enable live-reloading of changes you need to start BrowserSync:

$ gulp

This starts the development server and BrowserSync.

If you want to run the development server manually run the dev task:

$ gulp dev

Shell Commands

Available Flask shell commands:

• clean: Remove .pyc and .pyo files recursively
• run: Runs a development server
• test: Run the tests
• urls: Display all routes
• db: Performe database migrations
• shell: Runs a shell in the app context

Run flask to see all available commands.

Gulp

The frontend workflow is based on Gulp. It handles Javascript files (minification, concatination), SASS files (compile to CSS) and images. Furthermore, BrowserSync provides live-reloading of the web page on changes.

Important Gulp tasks:

• default: Build all files, start the Flask server, run BrowserSync and watch for file changes.
• build: Build all files
• build:watch: Build and watch for file changes
• dev: Build and watch for file changes and start BrowserSync

Tests

Run the tests with:

$ flask test

Database Migrations

First, initialize the database:

$ flask db init

Run the initial migration:

$ flask db migrate

Apply the migrations:

$ flask db upgrade

Deployment

Make sure that the FLASK_DEBUG environment variable is unset or set it to 0, so that ProdConfig is used.

TODOs

• Add fabfile.py to setup a Heroku app and run it on Heroku
• Add Dockerfile and docker-compose
• Better database support: base models, migration, sample usage, etc.
• Unprocessed assets for dev mode
• https://github.com/vanjacosic/gulp-asset-manifest to support hashed filenames
• User management?

Credits

• cookiecutter-flask
• cookiecutter-django

License

See License.