Remove deprecated flask-webpack library

master
James Curtin 5 years ago committed by James Curtin
parent 1f5ea80d0c
commit 3e53bdb824
  1. 1
      {{cookiecutter.app_name}}/.env.example
  2. 1
      {{cookiecutter.app_name}}/.gitignore
  3. 4
      {{cookiecutter.app_name}}/Pipfile
  4. 20
      {{cookiecutter.app_name}}/README.rst
  5. 12
      {{cookiecutter.app_name}}/package.json
  6. 4
      {{cookiecutter.app_name}}/requirements/prod.txt
  7. 1
      {{cookiecutter.app_name}}/tests/settings.py
  8. 44
      {{cookiecutter.app_name}}/webpack.config.js
  9. 4
      {{cookiecutter.app_name}}/{{cookiecutter.app_name}}/app.py
  10. 4
      {{cookiecutter.app_name}}/{{cookiecutter.app_name}}/extensions.py
  11. 2
      {{cookiecutter.app_name}}/{{cookiecutter.app_name}}/settings.py
  12. 61
      {{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/layout.html

@ -6,3 +6,4 @@ DATABASE_URL=sqlite:////tmp/dev.db
GUNICORN_WORKERS=1
LOG_LEVEL=debug
SECRET_KEY=not-so-secret
SEND_FILE_MAX_AGE_DEFAULT=0 # In production, set to a higher number, like 31556926

@ -50,7 +50,6 @@ env/
# webpack-built files
/{{cookiecutter.app_name}}/static/build/
/{{cookiecutter.app_name}}/webpack/manifest.json
# Configuration
.env

@ -26,8 +26,8 @@ gevent = "==1.4.0"
gunicorn = ">=19.1.1"
supervisor = "==4.1.0"
# Webpack
flask-webpack = "==0.1.0"
# Flask Static Digest
Flask-Static-Digest = "==0.1.2"
# Auth
Flask-Login = "==0.4.1"

@ -98,7 +98,7 @@ Make sure folder `migrations/versions` is not empty.
Docker
------
This app can be run completely using ``Docker`` and ``docker-compose``. Before starting, make sure to create a new copy of ``.env.example`` called ``.env``. You will need to start the development version of the app at least once before running other Docker commands, as starting the dev app bootstraps a necessary file, ``webpack/manifest.json``.
This app can be run completely using ``Docker`` and ``docker-compose``. Before starting, make sure to create a new copy of ``.env.example`` called ``.env``.
There are three main services:
@ -128,20 +128,18 @@ Asset Management
Files placed inside the ``assets`` directory and its subdirectories
(excluding ``js`` and ``css``) will be copied by webpack's
``file-loader`` into the ``static/build`` directory, with hashes of
their contents appended to their names. For instance, if you have the
file ``assets/img/favicon.ico``, this will get copied into something
like
``static/build/img/favicon.fec40b1d14528bf9179da3b6b78079ad.ico``.
You can then put this line into your header::
``file-loader`` into the ``static/build`` directory. In production, the plugin
``Flask-Static-Digest`` zips the webpack content and tags them with a MD5 hash.
As a result, you must use the ``static_url_for`` function when including static content,
as it resolves the correct file name, including the MD5 hash.
For example::
<link rel="shortcut icon" href="{{ "{{" }}asset_url_for('img/favicon.ico') {{ "}}" }}">
<link rel="shortcut icon" href="{{ "{{" }}static_url_for('static', filename='build/img/favicon.ico') {{ "}}" }}">
to refer to it inside your HTML page. If all of your static files are
managed this way, then their filenames will change whenever their
If all of your static files are managed this way, then their filenames will change whenever their
contents do, and you can ask Flask to tell web browsers that they
should cache all your assets forever by including the following line
in your ``settings.py``::
in ``.env``::
SEND_FILE_MAX_AGE_DEFAULT=31556926 # one year

@ -3,12 +3,12 @@
"version": "1.0.0",
"description": "{{cookiecutter.project_short_description}}",
"scripts": {
"build": "NODE_ENV=production webpack --progress --colors -p",
"start": "concurrently -n \"WEBPACK,FLASK\" -c \"bgBlue.bold,bgMagenta.bold\" \"npm run webpack-dev-server\" \"npm run flask-server\"",
"webpack-dev-server": "NODE_ENV=debug webpack-dev-server --host=0.0.0.0 --port 2992 --hot --inline",
"build": "NODE_ENV=production webpack --progress --colors -p && npm run flask-static-digest",
"start": "concurrently -n \"WEBPACK,FLASK\" -c \"bgBlue.bold,bgMagenta.bold\" \"npm run webpack-watch\" \"npm run flask-server\"",
"webpack-watch": "NODE_ENV=debug webpack --mode development --watch",
"flask-server": "{% if cookiecutter.use_pipenv == 'yes' %}pipenv run {% endif %}flask run --host=0.0.0.0",
"lint": "eslint \"assets/js/*.js\"",
"postinstall": "npm run build"
"flask-static-digest": "{% if cookiecutter.use_pipenv == 'yes' %}pipenv run {% endif %}flask digest compile",
"lint": "eslint \"assets/js/*.js\""
},
"repository": {
"type": "git",
@ -42,13 +42,11 @@
"eslint": "^6.2.2",
"file-loader": "^4.0.0",
"less-loader": "^5.0.0",
"manifest-revision-webpack-plugin": "^0.4.0",
"less": "^3.9.0",
"mini-css-extract-plugin": "^0.8.0",
"raw-loader": "^3.0.0",
"url-loader": "^2.0.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.5.1",
"webpack": "^4.33.0"
}
}

@ -22,8 +22,8 @@ gevent==1.4.0
gunicorn>=19.9.0
supervisor==4.1.0
# Webpack
flask-webpack==0.1.0
# Flask Static Digest
Flask-Static-Digest==0.1.2
# Auth
Flask-Login==0.4.1

@ -9,5 +9,4 @@ BCRYPT_LOG_ROUNDS = (
DEBUG_TB_ENABLED = False
CACHE_TYPE = "simple" # Can be "memcached", "redis", etc.
SQLALCHEMY_TRACK_MODIFICATIONS = False
WEBPACK_MANIFEST_PATH = "webpack/manifest.json"
WTF_CSRF_ENABLED = False # Allows form testing

@ -4,15 +4,11 @@ const webpack = require('webpack');
/*
* Webpack Plugins
*/
const ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// take debug mode from the environment
const debug = (process.env.NODE_ENV !== 'production');
// Development asset host (webpack dev server)
const publicHost = debug ? 'http://0.0.0.0:2992' : '';
const rootAssetPath = path.join(__dirname, 'assets');
module.exports = {
@ -27,18 +23,15 @@ module.exports = {
],
},
output: {
path: path.join(__dirname, '{{cookiecutter.app_name}}', 'static', 'build'),
publicPath: `${publicHost}/static/build/`,
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].js',
path: path.join(__dirname, "{{cookiecutter.app_name}}", "static", "build"),
publicPath: "/static/build/",
filename: "[name].js",
chunkFilename: "[id].js"
},
resolve: {
extensions: ['.js', '.jsx', '.css'],
},
devtool: 'source-map',
devServer: {
headers: { 'Access-Control-Allow-Origin': '*' },
extensions: [".js", ".jsx", ".css"]
},
devtool: "source-map",
module: {
rules: [
{
@ -69,25 +62,24 @@ module.exports = {
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
{
test: /\.(ttf|eot|svg|png|jpe?g|gif|ico)(\?.*)?$/i,
loader: `file-loader?context=${rootAssetPath}&name=[path][name].[hash].[ext]`
loader: `file-loader?context=${rootAssetPath}&name=[path][name].[ext]`
},
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['env'], cacheDirectory: true } },
],
},
plugins: [
new MiniCssExtractPlugin({ filename: '[name].[hash].css', }),
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }),
new ManifestRevisionPlugin(path.join(__dirname, '{{cookiecutter.app_name}}', 'webpack', 'manifest.json'), {
rootAssetPath,
ignorePaths: ['/js', '/css'],
extensionsRegex: /\.(ttf|eot|svg|png|jpe?g|gif|ico)$/i,
}),
].concat(debug ? [] : [
new MiniCssExtractPlugin({ filename: "[name].css" }),
new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })
].concat(
debug
? []
: [
// production webpack plugins go here
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
"process.env": {
NODE_ENV: JSON.stringify("production")
}
}),
]),
})
]
)
};

@ -12,9 +12,9 @@ from {{cookiecutter.app_name}}.extensions import (
csrf_protect,
db,
debug_toolbar,
flask_static_digest,
login_manager,
migrate,
webpack,
)
@ -43,7 +43,7 @@ def register_extensions(app):
login_manager.init_app(app)
debug_toolbar.init_app(app)
migrate.init_app(app, db)
webpack.init_app(app)
flask_static_digest.init_app(app)
return None

@ -6,7 +6,7 @@ from flask_debugtoolbar import DebugToolbarExtension
from flask_login import LoginManager
from flask_migrate import Migrate
from flask_sqlalchemy import SQLAlchemy
from flask_webpack import Webpack
from flask_static_digest import FlaskStaticDigest
from flask_wtf.csrf import CSRFProtect
bcrypt = Bcrypt()
@ -16,4 +16,4 @@ db = SQLAlchemy()
migrate = Migrate()
cache = Cache()
debug_toolbar = DebugToolbarExtension()
webpack = Webpack()
flask_static_digest = FlaskStaticDigest()

@ -15,9 +15,9 @@ ENV = env.str("FLASK_ENV", default="production")
DEBUG = ENV == "development"
SQLALCHEMY_DATABASE_URI = env.str("DATABASE_URL")
SECRET_KEY = env.str("SECRET_KEY")
SEND_FILE_MAX_AGE_DEFAULT = env.int("SEND_FILE_MAX_AGE_DEFAULT")
BCRYPT_LOG_ROUNDS = env.int("BCRYPT_LOG_ROUNDS", default=13)
DEBUG_TB_ENABLED = DEBUG
DEBUG_TB_INTERCEPT_REDIRECTS = False
CACHE_TYPE = "simple" # Can be "memcached", "redis", etc.
SQLALCHEMY_TRACK_MODIFICATIONS = False
WEBPACK_MANIFEST_PATH = "webpack/manifest.json"

@ -1,62 +1,67 @@
{% raw %}
<!doctype html>
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta charset="utf-8" />
<title>{% block page_title %}
{% endraw %}
<title>
{% block page_title %} {% endraw %}
{{ cookiecutter.project_name }}
{% raw %}
{% endblock %}
{% raw %} {% endblock %}
</title>
<meta name="description" content="{% block meta_description %}{% endblock %}">
<meta name="author" content="{% block meta_author %}{% endblock %}">
<meta
name="description"
content="{% block meta_description %}{% endblock %}"
/>
<meta name="author" content="{% block meta_author %}{% endblock %}" />
<!-- Mobile viewport optimized: h5bp.com/viewport -->
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="width=device-width" />
{{ stylesheet_tag('main_css') | safe }}
<link
rel="stylesheet"
type="text/css"
href="{{ static_url_for('static', filename='build/main_css.css') }}"
/>
{% block css %}{% endblock %}
</head>
<body class="{% block body_class %}{% endblock %}">
{% block body %}
{% with form=form %}
{% include "nav.html" %}
{% endwith %}
{% block body %} {% with form=form %} {% include "nav.html" %} {% endwith %}
<header>{% block header %}{% endblock %}</header>
<main role="main">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% with messages = get_flashed_messages(with_categories=true) %} {% if
messages %}
<div class="row">
<div class="col-md-12">
{% for category, message in messages %}
<div class="alert alert-{{ category }}">
<a class="close" title="Close" href="#" data-dismiss="alert">&times;</a>
<a class="close" title="Close" href="#" data-dismiss="alert"
>&times;</a
>
{{ message }}
</div><!-- end .alert -->
</div>
<!-- end .alert -->
{% endfor %}
</div><!-- end col-md -->
</div><!-- end row -->
{% endif %}
{% endwith %}
{% block content %}{% endblock %}
</div>
<!-- end col-md -->
</div>
<!-- end row -->
{% endif %} {% endwith %} {% block content %}{% endblock %}
</main>
{% include "footer.html" %}
<!-- JavaScript at the bottom for fast page loading -->
{{ javascript_tag('main_js') | safe }}
<script src="{{ static_url_for('static', filename='build/main_js.js') }}"></script>
{% block js %}{% endblock %}
<!-- end scripts -->
{% endblock %}

Loading…
Cancel
Save