Giter Club home page Giter Club logo

flask-gulp-starter-kit's Introduction

flask-gulp-minimal-boilerplate

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

Build Status

screenshot

Demo

Features

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

License

See License.

flask-gulp-starter-kit's People

Contributors

hypebeast avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.