Add Webpack, Bootstrap v4, ES6 JS and SCSS

:D

.dockerignore

@@ -1,2 +1,6 @@
-.git
+.git/
+assets/node_modules/
+public/
+.env
 .dockerignore
+docker-compose.override.yml

.env.example

@@ -10,8 +10,12 @@ COMPOSE_PROJECT_NAME=snakeeyes
 # issues with Docker. These are *.pyc file and the __pycache__/ folder.
 PYTHONDONTWRITEBYTECODE=true
 
-# Which environment is running? This should be "development" or "production".
+# Which environment is running? These should be "development" or "production".
 FLASK_ENV=development
+NODE_ENV=development
+
+# Should the webpack watcher use polling? Not all Docker hosts support inotify.
+#WEBPACK_WATCHER_POLL=true
 
 # You should generate a random string of 64+ characters for this value in prod.
 SECRET_KEY=insecure_key_for_dev
@@ -65,4 +69,3 @@ DOCKER_WEB_VOLUME=.:/app
 # will be able to connect to PostgreSQL with external tools like pgadmin.
 # Change this to your VM's IP address if you're using the Docker Toolbox.
 #DOCKER_POSTGRES_PORT=127.0.0.1:5432:5432
-

.gitignore

@@ -50,5 +50,14 @@ tmtags
 
 # App ignores.
 .env
+docker-compose.override.yml
+
 celerybeat*
 
+*-[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].*
+
+*.gz
+cache_manifest.json
+
+assets/node_modules/
+public/

Dockerfile

@@ -1,4 +1,34 @@
-FROM python:3.8.1-slim-buster
+FROM node:12.14.0-buster-slim as webpack
+LABEL maintainer="Nick Janetakis <nick.janetakis@gmail.com>"
+
+WORKDIR /app/assets
+
+COPY assets/package.json assets/*yarn* ./
+
+ENV BUILD_DEPS="build-essential" \
+    APP_DEPS=""
+
+RUN apt-get update \
+  && apt-get install -y ${BUILD_DEPS} ${APP_DEPS} --no-install-recommends \
+  && yarn install \
+  && rm -rf /var/lib/apt/lists/* \
+  && rm -rf /usr/share/doc && rm -rf /usr/share/man \
+  && apt-get purge -y --auto-remove ${BUILD_DEPS} \
+  && apt-get clean
+
+COPY assets .
+
+ARG NODE_ENV="production"
+ENV NODE_ENV="${NODE_ENV}"
+
+RUN if [ "${NODE_ENV}" != "development" ]; then \
+  yarn run build; else mkdir -p /app/public; fi
+
+CMD ["bash"]
+
+#
+
+FROM python:3.8.1-slim-buster as app
 LABEL maintainer="Nick Janetakis <nick.janetakis@gmail.com>"
 
 WORKDIR /app
@@ -21,13 +51,18 @@ ENV FLASK_ENV="${FLASK_ENV}" \
     FLASK_APP="snakeeyes.app" \
     PYTHONUNBUFFERED="true"
 
+COPY --from=webpack /app/public /public
+
 COPY . .
 
 RUN pip install --editable .
 
 RUN if [ "${FLASK_ENV}" != "development" ]; then \
   flask digest compile; fi
 
+RUN chmod +x docker-entrypoint.sh
+ENTRYPOINT ["/app/docker-entrypoint.sh"]
+
 EXPOSE 8000
 
 CMD ["gunicorn", "-c", "python:config.gunicorn", "snakeeyes.app:create_app()"]

README.md

@@ -10,6 +10,7 @@ Redis, PostgreSQL, Stripe and Docker.*
 
 ```sh
 cp .env.example .env
+cp docker-compose.override.example.yml docker-compose.override.yml
 docker-compose up --build
 ```
 
@@ -52,7 +53,7 @@ build a large web application with Flask**.
 
 ---
 
-There's over 173 video lessons, 15+ hours of content, coding exercises and an
+There's over 176 video lessons, 18.5+ hours of content, coding exercises and an
 e-book that's included.
 
 Also as a bonus, there's an additional 18 video lessons and 3 hours of content

assets/.yarnrc

@@ -0,0 +1 @@
+--modules-folder /node_modules

assets/app/app.js

@@ -0,0 +1,9 @@
+import 'modules/bootstrap';
+
+$(document).ready(function() {
+  // TODO: If you want to enable Bootstrap JS components such as tooltips then
+  // place those snippets of code here. Also don't forget to uncomment them
+  // in both the modules/bootstrap.js file and in the SCSS at app.scss.
+  // For example, to enable tooltips:
+  //   $('[data-toggle="tooltip"]').tooltip();
+});

assets/app/app.scss

@@ -0,0 +1,56 @@
+// Bootstrap functions.
+@import '~bootstrap/scss/functions';
+
+// Bootstrap variable overrides.
+@import 'scss/variables-bootstrap';
+
+// Bootstrap variables (this must come after your custom Bootstrap overrides).
+@import '~bootstrap/scss/variables';
+
+// Bootstrap, check out what each one does at:
+//   https://github.com/twbs/bootstrap/tree/v4.4.1/scss
+@import '~bootstrap/scss/mixins';
+@import '~bootstrap/scss/root';
+@import '~bootstrap/scss/reboot';
+@import '~bootstrap/scss/type';
+@import '~bootstrap/scss/images';
+//@import '~bootstrap/scss/code';
+@import '~bootstrap/scss/grid';
+@import '~bootstrap/scss/tables';
+@import '~bootstrap/scss/forms';
+@import '~bootstrap/scss/buttons';
+@import '~bootstrap/scss/transitions';
+@import '~bootstrap/scss/dropdown';
+//@import '~bootstrap/scss/button-group';
+@import '~bootstrap/scss/input-group';
+//@import '~bootstrap/scss/custom-forms';
+@import '~bootstrap/scss/nav';
+@import '~bootstrap/scss/navbar';
+@import '~bootstrap/scss/card';
+//@import '~bootstrap/scss/breadcrumb';
+@import '~bootstrap/scss/pagination';
+@import '~bootstrap/scss/badge';
+//@import '~bootstrap/scss/jumbotron';
+@import '~bootstrap/scss/alert';
+@import '~bootstrap/scss/progress';
+@import '~bootstrap/scss/media';
+@import '~bootstrap/scss/list-group';
+//@import '~bootstrap/scss/close';
+//@import '~bootstrap/scss/toasts';
+//@import '~bootstrap/scss/modal';
+//@import '~bootstrap/scss/tooltip';
+//@import '~bootstrap/scss/popover';
+//@import '~bootstrap/scss/carousel';
+//@import '~bootstrap/scss/spinners';
+@import '~bootstrap/scss/utilities';
+@import '~bootstrap/scss/print';
+
+// Font Awesome.
+$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
+@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
+@import '~@fortawesome/fontawesome-free/scss/solid.scss';
+@import '~@fortawesome/fontawesome-free/scss/regular.scss';
+//@import '~@fortawesome/fontawesome-free/scss/brands.scss';
+
+// Application.
+@import 'scss/all';

assets/app/modules/bootstrap.js

@@ -0,0 +1,14 @@
+// Check out what each one does at:
+//   https://github.com/twbs/bootstrap/tree/v4.4.1/js/src
+
+//import 'bootstrap/js/dist/alert';
+//import 'bootstrap/js/dist/button';
+//import 'bootstrap/js/dist/carousel';
+import 'bootstrap/js/dist/collapse';
+import 'bootstrap/js/dist/dropdown';
+//import 'bootstrap/js/dist/modal';
+//import 'bootstrap/js/dist/scrollspy";
+//import 'bootstrap/js/dist/tab';
+//import 'bootstrap/js/dist/toast';
+//import 'bootstrap/js/dist/tooltip';
+import 'bootstrap/js/dist/util';

assets/app/scss/_forms.scss

@@ -0,0 +1,14 @@
+label {
+  margin-top: 10px;
+}
+
+.form-control {
+  &:focus {
+    border-color: $gray-600;
+    border: 1px solid $gray-600;
+  }
+
+  &.is-invalid {
+    background-image: none;
+  }
+}

assets/app/scss/_nav.scss

@@ -0,0 +1,3 @@
+.navbar {
+  border-bottom: 1px solid $gray-200;
+}

assets/app/scss/_sticky-footer.scss

@@ -0,0 +1,18 @@
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  margin-bottom: $sticky-footer-height;
+  padding-bottom: 20px;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: $sticky-footer-height;
+  line-height: $sticky-footer-line-height;
+  border-top: 1px solid $gray-300;
+}

assets/app/scss/_typography.scss

@@ -0,0 +1,13 @@
+h2, h3, h4 {
+  margin-top: 30px;
+}
+
+h5, h6 {
+  margin-top: 20px;
+}
+
+h1 {
+  padding-bottom: 10px;
+  margin-bottom: 30px;
+  border-bottom: 1px solid $gray-300;
+}

assets/app/scss/_variables-bootstrap.scss

@@ -0,0 +1,8 @@
+// Override any Bootstrap variables here:
+//   https://github.com/twbs/bootstrap/blob/v4.4.1/scss/_variables.scss
+$primary: #941212 !default;
+
+$input-color: #212529 !default;
+
+$input-btn-focus-width: 1px;
+$input-btn-focus-box-shadow: 0;

assets/app/scss/_variables.scss

@@ -0,0 +1,3 @@
+// Define your own custom variables here that you can use in any SCSS file.
+$sticky-footer-height: 60px;
+$sticky-footer-line-height: $sticky-footer-height;

assets/app/scss/all.scss

@@ -0,0 +1,6 @@
+@import 'variables';
+
+@import 'nav';
+@import 'sticky-footer';
+@import 'typography';
+@import 'forms';

assets/package.json

@@ -0,0 +1,33 @@
+{
+  "repository": {},
+  "dependencies": {
+    "jquery": "~3.4.1",
+    "@fortawesome/fontawesome-free": "~5.12.0",
+    "bootstrap": "~4.4.1",
+    "popper.js": "~1.16.0"
+  },
+  "devDependencies": {
+    "@babel/core": "~7.7.7",
+    "@babel/preset-env": "~7.7.7",
+    "@babel/register": "~7.7.7",
+    "autoprefixer": "~9.7.3",
+    "babel-loader": "~8.0.6",
+    "copy-webpack-plugin": "~5.1.1",
+    "css-loader": "~3.4.0",
+    "file-loader": "~5.0.2",
+    "mini-css-extract-plugin": "~0.9.0",
+    "node-sass": "~4.13.0",
+    "optimize-css-assets-webpack-plugin": "~5.0.3",
+    "postcss-loader": "~3.0.0",
+    "precss": "~4.0.0",
+    "sass-loader": "~8.0.0",
+    "uglifyjs-webpack-plugin": "~2.2.0",
+    "webpack": "~4.41.5",
+    "webpack-cli": "~3.3.10",
+    "webpack-merge": "~4.2.2"
+  },
+  "scripts": {
+    "build": "/node_modules/webpack/bin/webpack.js --mode=production -p",
+    "watch": "/node_modules/webpack/bin/webpack.js --mode=development --progress --watch-stdin"
+  }
+}

assets/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('autoprefixer')]
+}

assets/static/502.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<head>
+  <title>Reload Your Browser</title>
+  <style>
+    body {
+      background-color: #fff;
+      width: 960px;
+      margin: 0 auto;
+      font-family: Arial, Helvetica, sans-serif;
+    }
+    h1 {
+      font-size: 42px;
+      color: #000;
+      padding-bottom: 5px;
+      border-bottom: 1px solid #000;
+    }
+    p {
+      color: #444;
+      font-size: 22px;
+    }
+  </style>
+</head>
+<body>
+  <h1>We Just Updated Our Site</h1>
+  <h2>When we release a new version of our site it takes a second to come back up.</h2>
+  <p>It should be fixed by the time you read this message. Try reloading your browser.</p>
+  <p><i>P.S., don't worry, your data is safely backed up!</i></p>
+  <hr>
+  <p>Seeing this page for a while? Please let us know by emailing <a href="mailto:nick.janetakis@gmail.com">nick.janetakis@gmail.com</a>.</p>
+</body>
+</html>

assets/static/maintenance.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<head>
+  <title>Down for Maintenance</title>
+  <style>
+    body {
+      background-color: #fff;
+      width: 960px;
+      margin: 0 auto;
+      font-family: Arial, Helvetica, sans-serif;
+    }
+    h1 {
+      font-size: 42px;
+      color: #000;
+      padding-bottom: 5px;
+      border-bottom: 1px solid #000;
+    }
+    p {
+      color: #444;
+      font-size: 22px;
+    }
+  </style>
+</head>
+<body>
+  <h1>We're Upgrading Our Servers</h1>
+  <h2>Our site is down while we upgrade our servers to make things faster for you.</h2>
+  <p>We're aiming to have everything up and running by 2pm EST, please check back then.</p>
+  <p><i>P.S., don't worry, your data is safely backed up!</i></p>
+  <hr>
+  <p>Want live updates? Follow us on Twitter at <a href="https://twitter.com/nickjanetakis">@nickjanetakis</a>.</p>
+</body>
+</html>

assets/static/robots.txt

@@ -0,0 +1,4 @@
+# TODO: This will block all robots from crawling your site. You wouldn't want
+# this set in production, but it's useful for testing.
+User-agent: *
+Disallow: /