Remove deprecated flask-webpack library

{{cookiecutter.app_name}}/.env.example

@@ -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

{{cookiecutter.app_name}}/.gitignore

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

{{cookiecutter.app_name}}/Pipfile

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

{{cookiecutter.app_name}}/README.rst

@@ -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,22 +128,20 @@ 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
+``file-loader`` into the ``static/build`` directory. In production, the plugin
-their contents appended to their names.  For instance, if you have the
+``Flask-Static-Digest`` zips the webpack content and tags them with a MD5 hash.
-file ``assets/img/favicon.ico``, this will get copied into something
+As a result, you must use the ``static_url_for`` function when including static content,
-like
+as it resolves the correct file name, including the MD5 hash.
-``static/build/img/favicon.fec40b1d14528bf9179da3b6b78079ad.ico``.
+For example::
-You can then put this line into your header::
 
-    <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
+If all of your static files are managed this way, then their filenames will change whenever their
-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
+    SEND_FILE_MAX_AGE_DEFAULT=31556926  # one year
 
 {%- if cookiecutter.use_heroku == "yes" %}
 

{{cookiecutter.app_name}}/package.json

@@ -3,12 +3,12 @@
   "version": "1.0.0",
   "description": "{{cookiecutter.project_short_description}}",
   "scripts": {
-    "build": "NODE_ENV=production webpack --progress --colors -p",
+    "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-dev-server\" \"npm run flask-server\"",
+    "start": "concurrently -n \"WEBPACK,FLASK\" -c \"bgBlue.bold,bgMagenta.bold\" \"npm run webpack-watch\" \"npm run flask-server\"",
-    "webpack-dev-server": "NODE_ENV=debug webpack-dev-server --host=0.0.0.0 --port 2992 --hot --inline",
+    "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\"",
+    "flask-static-digest": "{% if cookiecutter.use_pipenv == 'yes' %}pipenv run {% endif %}flask digest compile",
-    "postinstall": "npm run build"
+    "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"
   }
 }

{{cookiecutter.app_name}}/requirements.txt

@@ -1,3 +1,3 @@
 # Included because many Paas's require a requirements.txt file in the project root
 # Just installs the production requirements.
--r requirements/prod.txt
+-r requirements/prod.txt

{{cookiecutter.app_name}}/requirements/prod.txt

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

{{cookiecutter.app_name}}/tests/settings.py

@@ -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

{{cookiecutter.app_name}}/webpack.config.js

@@ -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'),
+    path: path.join(__dirname, "{{cookiecutter.app_name}}", "static", "build"),
-    publicPath: `${publicHost}/static/build/`,
+    publicPath: "/static/build/",
-    filename: '[name].[hash].js',
+    filename: "[name].js",
-    chunkFilename: '[id].[hash].js',
+    chunkFilename: "[id].js"
   },
   resolve: {
-    extensions: ['.js', '.jsx', '.css'],
+    extensions: [".js", ".jsx", ".css"]
-  },
-  devtool: 'source-map',
-  devServer: {
-    headers: { 'Access-Control-Allow-Origin': '*' },
   },
+  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 MiniCssExtractPlugin({ filename: "[name].css" }),
-    new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }),
+    new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })
-    new ManifestRevisionPlugin(path.join(__dirname, '{{cookiecutter.app_name}}', 'webpack', 'manifest.json'), {
+  ].concat(
-      rootAssetPath,
+    debug
-      ignorePaths: ['/js', '/css'],
+      ? []
-      extensionsRegex: /\.(ttf|eot|svg|png|jpe?g|gif|ico)$/i,
+      : [
-    }),
+          // production webpack plugins go here
-  ].concat(debug ? [] : [
+          new webpack.DefinePlugin({
-    // production webpack plugins go here
+            "process.env": {
-    new webpack.DefinePlugin({
+              NODE_ENV: JSON.stringify("production")
-      'process.env': {
+            }
-        NODE_ENV: JSON.stringify('production'),
+          })
-      }
+        ]
-    }),
+  )
-  ]),
 };

{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/app.py

@@ -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
 
 

{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/extensions.py

@@ -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()

{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/settings.py

@@ -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"

{{cookiecutter.app_name}}/{{cookiecutter.app_name}}/templates/layout.html

@@ -1,65 +1,70 @@
 {% 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]><!-->
-<head>
+<html class="no-js" lang="en">
-  <meta charset="utf-8">
+  <!--<![endif]-->
+  <head>
+    <meta charset="utf-8" />
 
-  <title>{% block page_title %}
+    <title>
-  {% endraw %}
+      {% block page_title %} {% endraw %}
-    {{ cookiecutter.project_name }}
+      {{ cookiecutter.project_name }}
-  {% raw %}
+      {% raw %} {% endblock %}
-    {% endblock %}
+    </title>
-  </title>
+    <meta
-  <meta name="description" content="{% block meta_description %}{% endblock %}">
+      name="description"
-  <meta name="author" content="{% block meta_author %}{% endblock %}">
+      content="{% block meta_description %}{% endblock %}"
-
+    />
-  <!-- Mobile viewport optimized: h5bp.com/viewport -->
+    <meta name="author" content="{% block meta_author %}{% endblock %}" />
-  <meta name="viewport" content="width=device-width">
-
-  {{ stylesheet_tag('main_css') | safe }}
 
-  {% block css %}{% endblock %}
+    <!-- Mobile viewport optimized: h5bp.com/viewport -->
+    <meta name="viewport" content="width=device-width" />
 
-</head>
+    <link
-<body class="{% block body_class %}{% endblock %}">
+      rel="stylesheet"
-{% block body %}
+      type="text/css"
-{% with form=form  %}
+      href="{{ static_url_for('static', filename='build/main_css.css') }}"
-{% include "nav.html" %}
+    />
-{% endwith %}
 
-<header>{% block header %}{% endblock %}</header>
+    {% block css %}{% endblock %}
+  </head>
+  <body class="{% block body_class %}{% endblock %}">
+    {% block body %} {% with form=form %} {% include "nav.html" %} {% endwith %}
 
-<main role="main">
+    <header>{% block header %}{% endblock %}</header>
-{% 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>
-             {{message}}
-            </div><!-- end .alert -->
-            {% endfor %}
-          </div><!-- end col-md -->
-        </div><!-- end row -->
-{% endif %}
-{% endwith %}
 
-{% block content %}{% endblock %}
+    <main role="main">
-</main>
+      {% 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
+            >
+            {{ message }}
+          </div>
+          <!-- end .alert -->
+          {% endfor %}
+        </div>
+        <!-- end col-md -->
+      </div>
+      <!-- end row -->
+      {% endif %} {% endwith %} {% block content %}{% endblock %}
+    </main>
 
+    {% include "footer.html" %}
 
-{% include "footer.html" %}
+    <!-- JavaScript at the bottom for fast page loading -->
-
+    <script src="{{ static_url_for('static', filename='build/main_js.js') }}"></script>
-<!-- JavaScript at the bottom for fast page loading -->
+    {% block js %}{% endblock %}
-{{ javascript_tag('main_js') | safe }}
+    <!-- end scripts -->
-{% block js %}{% endblock %}
+    {% endblock %}
-<!-- end scripts -->
+  </body>
-{% endblock %}
-</body>
 </html>
 {% endraw %}