Spire

Inpsire others.

Spire is built with Flask, Flask-SQLAlchemy, Gulp, and SCSS.

Installation

1. Install node package manager (npm) by going to nodejs.org and click INSTALL.

2. Install python package manager (pip) by going to the pip install page and following the instructions there.

3. Check that npm is installed:

   npm -v

4. Check that pip is installed:

   pip -v

5. Install gulp globally

   npm install -g gulp

6. Install requirements

   cd spire/
   npm install
   gem install sass scss_lint
   pip install virtualenv

7. Setup secrets file

   cp config/example.secrets.py config/secrets.py

   Then, edit config/secrets.py to contain the appropriate secret keys.

8. Setup the SQLAlchemy database

   python manage.py

Development

With one Gulp command, you can start the Flask server, and reload SCSS, JS, HTML, images, and fonts with Browserify:

gulp serve

Gulp

An overview of Gulp commands available:

gulp build

Builds the static parts of the site from the app/static/src into the app/static/dist directory. This includes:

• SCSS w/ linting, sourcemaps and autoprefixing
• JS linting and uglification
• Image and font copying

gulp build:optimized

This is used for distributing an optimized version of the site (for deployment). It includes everything from gulp build as well as SCSS minification.

gulp watch

Watchs for changes in local files and rebuilds parts of the site as necessary, into the app/static/dist directory.

gulp run

Runs the Flask app in a virtual environment.

gulp serve

Runs gulp watch in the background, and runs gulp run, proxying it to localhost:3000 with automatic reloading using Browsersync.

Structure

├── Gulpfile.js             # Controls Gulp, used for building the website
├── README.md               # This file
├── app                     # Root of the Flask application
│   ├── __init__.py         # Init the Flask app using the factory pattern
│   ├── forms.py            # Flask-WTForms forms and validators
│   ├── models.py           # Flask-SQLAlchemy models
│   ├── routes.py           # All URL routes
│   ├── static              # Static files
│   │   ├── dist            # The live static folder
│   │   └── src             # Source static files, will be copied into dist/
│   │       ├── font        # Font files
│   │       ├── img         # Images and SVGs
│   │       ├── js          # JavaScript libraries and scripts
│   │       └── sass        # Stylesheets
│   └── templates           # All Jinja templates / html
├── config                  
│   ├── example.secrets.py  # Example secrets file
│   ├── flask_config.py     # Global Flask config variables
│   ├── requirements.txt    # Python dependencies
│   ├── runserver.sh        # A script used by `gulp run` to run Flask
│   └── secrets.py          # .gitignore'd, file containing your secrets
├── manage.py               # Run this file to recreate the database
├── package.json            # JavaScript dependencies
└── run.py                  # Runs the Flask app.