elston / flaskit

Starter Kit for webapp with Docker, Flask, Node.js, Babel, PostCSS, Webpack, Browsersync and more ...

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Flask Webpack Starter Kit

Yet another boilerplate for building web application

Technology

  • Docker
  • Python 3.5
  • Flask
  • Nodejs
  • Webpack 4
  • Postgres 9.6
  • Nginx
  • Gunicorn
  • Virtualenv

Applying

This starter kit was used in developing kubanoag.ru

Common features

  • Docker (and docker-compose) containerized
  • Automated control start and down through 'make'

Backend features

  • Flask - Simple and fast popular framework
  • Automated scripts for bootstrap and db migrate
  • ipdb for trace when debugging in dev mode
  • Gunicorn starting script for production
  • Gunicorn starting script with logging for testing
  • Famous flask module kit - Jinja, SQLAlchemy, Alembic, WTForms
  • Specialized template tag - Flask-Webpack (slightly modified :) great thanks Nick Janetakis for idea ) that enable to avoid preloaded cache with js and other resource in browsers due to use hash in resource name. Use with popularyty webpack plugin webpack-assets-manifest, thanks Eric aka webdeveric.
  • PostgreSQL container on debian with bootstrapping script allowed to substitution db name, user and password from environment variable into db creation script

Frontend features

  • Nodejs with babel-node for use latest ECMAScript specifications to available still at the prepare stage for running webpack and(or) browsersync, that extremely conveniently
  • The possibility to run building scripts with debugging mode (see scripts in package.json - build:inspect). To make trace is need put command debugging in code and open google chrome browser tab in chrome://inspect (you can see the catched socket yours node js, in this project it on port 9229)
  • There is Browsersync configuration for developing with proxy that pass on backend(in this project, in inner docker network, it is http://backer ) all requests excluding static resources (js,css,images,fonts)
  • Most famous styles loaders (scss, less, stylus)
  • Webpack 4 config with most famous features:
    • multiple entry point
    • splitting output script for vendor chank and default chank
    • output resource name with hash
    • building manifest with webpack-assets-manifest
    • extracting styles to a separate file for separate loading
  • Standard website building kit - jquery, bootstrap, font-awesome :)

Getting Started for Local Development

Installing and bootstraping

Install Docker

https://docs.docker.com/installation/

Install Docker Compose

http://docs.docker.com/compose/install/

Install the app's

In the project books ./book/dev/ (where the Makefile file is located), run:

make build

then

make bootstrap

then

make db

then test db

psql -U [user name] -h localhost

if all OK, down db

make down

then migrate db

make migrate_backer

Helper commands

To run any command inside the Docker container

make shell_[name of container]

To view Docker images in current project

make images

To view runing Docker containers in current project

make ps

Running Local Development servers

1. Running backend (backer) server

Open terminal in flaskit/book/dev (where the Makefile file is located) and run command

make shell_backer

2. Running frontend container

Open another terminal tab in flaskit/book/dev (where the Makefile file is located) and run command

make shell_fronter

3. Running frontend (fronter) server

after docker container is running, run fronter server, wich make manifest.json wich need to get path resources (js, css , images, fonts ...etc.) in templates on backend server

cd /fronter
yarn [name of commands from packege.json]

4. Running backend (backer) server

runserver.sh

5. Running browser

open in browser tab to url http://localhost:3000

Running testing and production servers

This will start the containers in the background.

make up

When you need finish all containers:

make down

View the logs

docker logs [-f] [name of container getting from docker ps -a]

In production servers

For compile frontend statics go in folder books/prod run command

make compile_fronter

Acknowledgment

About

Starter Kit for webapp with Docker, Flask, Node.js, Babel, PostCSS, Webpack, Browsersync and more ...

License:MIT License


Languages

Language:Python 39.1%Language:JavaScript 25.8%Language:Makefile 16.4%Language:HTML 9.4%Language:Shell 4.8%Language:Dockerfile 2.3%Language:CSS 1.2%Language:Mako 0.9%