add webpack step to .drone.yml test-build pipeline

update Dockerfile
update _Layout

.dockerignore

@@ -11,3 +11,9 @@ obj/
 .nuget
 .local
 .*.env
+
+/node_modules
+/public/js
+/public/css
+/public/fonts
+/public/*.*

.drone.yml

@@ -25,6 +25,14 @@ steps:
   commands:
     - dotnet restore
 
+- name: webpack
+  pull: always
+  image: mcr.microsoft.com/dotnet/core/sdk:3.1-alpine
+  depends_on: [clone]
+  commands:
+  - apk add --no-cache make git nodejs npm
+  - make webpack
+
 - name: debug
   pull: always
   image: mcr.microsoft.com/dotnet/core/sdk:3.1-alpine
@@ -41,7 +49,7 @@ steps:
   volumes:
   - name: pkgcache
     path: /root/.nuget/packages
-  depends_on: [restore]
+  depends_on: [restore, webpack]
   commands:
     - dotnet publish -c Release -o out
 

.gitignore

@@ -18,3 +18,10 @@ riderModule.iml
 *.png
 
 .*.env
+
+/node_modules
+/public/js
+/public/css
+/public/fonts
+/public/*.svg
+/public/*.*

.hadolint.yaml

@@ -1,3 +1,5 @@
 ignored:
   # ad "SC2039 In POSIX sh, UID is undefined." - it's a var defined by us
   - SC2039
+  # ad "Pin versions in apk add." - ignore for now
+  - DL3018

Dockerfile

@@ -1,15 +1,26 @@
 FROM mcr.microsoft.com/dotnet/core/sdk:3.1-alpine AS base
+
+# deps
+RUN apk --no-cache add make git nodejs npm
+
 WORKDIR /src
 
 COPY *.csproj ./
 RUN dotnet restore
 
 COPY . ./
+RUN make webpack
+
 RUN dotnet publish -c Release -o bin/out
 
 FROM mcr.microsoft.com/dotnet/aspnet:3.1-alpine
 WORKDIR /App
+
 COPY --from=base /src/bin/out/ .
+COPY --from=base /src/public/js/ ./wwwroot/js/
+COPY --from=base /src/public/css/ ./wwwroot/css/
+COPY --from=base /src/public/fonts/ ./wwwroot/fonts/
+
 RUN chown -R nobody:nobody ./
 USER nobody
 ENV ASPNETCORE_ENVIRONMENT Production

Makefile

@@ -25,8 +25,12 @@ pgdbvol = -v pgdbdata:/var/lib/postgresql/data
 pgdbargs = run -d $(pgdbcapdrop) $(pgdbenv) --name $(pgdbname) $(pgdbports) $(pgdbvol) --restart unless-stopped
 pgdbimg = postgres:13.1-alpine
 zenv = DB_CONNECTION_STRING=$$(cat appsettings.Development.json | jq .db.Postgres | sed -e 's/5432/5433/' -e 's/=db/=localhost/' -e 's/"//g')
+WEBPACK_SOURCES := $(shell find wwwroot/js wwwroot/css wwwroot/less -type f)
+WEBPACK_CONFIGS := webpack.config.js
+WEBPACK_DEST := public/js/index.js public/css/index.css
+WEBPACK_DEST_ENTRIES := public/js public/css
 
-.PHONY: dev dockerbuild dockerdevbuild dockerrun dockerdevrun dockertest dockerdev kaniko clean prune pgdba pgdbz test dcdevb dcprodbuild dcdevup dcprodup
+.PHONY: dev dockerbuild dockerdevbuild dockerrun dockerdevrun dockertest dockerdev kaniko clean prune pgdba pgdbz test dcdevb dcprodbuild dcdevup dcprodup webpack frontend node-check npm-update
 
 dev: restore build run
 
@@ -81,6 +85,34 @@ dcdevup:
 dcprodup:
 	$(dccmd) -f $(dc).prod.yml up --remove-orphans --scale netcoreultimateapp-prod=2
 
+node_modules: package-lock.json
+	npm install --no-save
+	@touch node_modules
+
+npm-update: node-check | node_modules
+	npx updates -cu
+	rm -rf node_modules package-lock.json
+	npm install --package-lock
+	@touch node_modules
+
+node-check:
+	$(eval NODE_VERSION := $(shell printf "%03d%03d%03d" $(shell node -v | cut -c2- | tr '.' ' ');))
+	$(eval NPM_MISSING := $(shell hash npm > /dev/null 2>&1 || echo 1))
+	@if [ "$(NODE_VERSION)" -lt "$(MIN_NODE_VERSION)" -o "$(NPM_MISSING)" = "1" ]; then \
+		echo "pwt requires Node.js 10 or greater and npm to build. You can get it at https://nodejs.org/en/download/"; \
+		exit 1; \
+	fi
+
+frontend: node-check $(WEBPACK_DEST)
+
+webpack: $(WEBPACK_DEST)
+
+$(WEBPACK_DEST): $(WEBPACK_SOURCES) $(WEBPACK_CONFIGS) package-lock.json | node_modules
+	rm -rf $(WEBPACK_DEST_ENTRIES)
+	@echo " - webpack build webpack files"
+	npx webpack
+	@touch $(WEBPACK_DEST)
+
 kaniko:
 	$(krelease)
 	$(postkanikochown)

Views/Shared/_Layout.cshtml

@@ -14,11 +14,7 @@
 		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
 	</environment>
 	<environment exclude="Development">
-		<link rel="stylesheet" href="~/css/stylez.css"/>
-		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
-			asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
-			asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute"/>
-		<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true"/>
+		<link rel="stylesheet" href="~/css/index.css"/>
 	</environment>
 </head>
 <body>
@@ -110,19 +106,7 @@
 	<script defer src="~/js/site.js" asp-append-version="true"></script>
 </environment>
 <environment exclude="Development">
-	<script defer src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
-			asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
-			asp-fallback-test="window.jQuery"
-			crossorigin="anonymous"
-			integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
-		</script>
-	<script defer src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
-			asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
-			asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
-			crossorigin="anonymous"
-			integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd">
-		</script>
-	<script defer src="~/js/site.min.js" asp-append-version="true"></script>
+    <script defer src="~/js/index.js" asp-append-version="true"></script>
 </environment>
 
 @RenderSection("Scripts", required: false)

package.json

@@ -0,0 +1,51 @@
+{
+  "license": "WTFPL",
+  "private": true,
+  "engines": {
+    "node": ">= 10.13.0"
+  },
+  "dependencies": {
+    "@babel/core": "7.12.10",
+    "@babel/plugin-transform-runtime": "7.12.10",
+    "@babel/preset-env": "7.12.11",
+    "@babel/runtime": "7.12.5",
+    "@claviska/jquery-minicolors": "2.3.5",
+    "babel-loader": "8.2.2",
+    "bootstrap": "3.4.1",
+    "core-js": "3.8.1",
+    "css-loader": "5.0.1",
+    "css-minimizer-webpack-plugin": "1.2.0",
+    "fast-glob": "3.2.4",
+    "file-loader": "6.2.0",
+    "font-awesome": "4.7.0",
+    "jquery": "3.5.1",
+    "jquery.are-you-sure": "1.9.0",
+    "less": "4.0.0",
+    "less-loader": "7.2.0",
+    "mini-css-extract-plugin": "1.3.3",
+    "popper.js": "1.16.1",
+    "style-loader": "2.0.0",
+    "svg-loader": "0.0.2",
+    "terser-webpack-plugin": "5.0.3",
+    "url-loader": "4.1.1",
+    "webpack": "5.11.0",
+    "webpack-cli": "4.3.0",
+    "workbox-routing": "6.0.2",
+    "workbox-strategies": "6.0.2"
+  },
+  "devDependencies": {
+    "eslint": "7.16.0",
+    "eslint-plugin-html": "6.1.1",
+    "eslint-plugin-import": "2.22.1",
+    "eslint-plugin-unicorn": "24.0.0",
+    "eslint-plugin-vue": "7.3.0",
+    "stylelint": "13.8.0",
+    "stylelint-config-standard": "20.0.0",
+    "updates": "11.4.2"
+  },
+  "browserslist": [
+    "defaults",
+    "not ie > 0",
+    "not ie_mob > 0"
+  ]
+}

webpack.config.js

@@ -0,0 +1,233 @@
+const fastGlob = require('fast-glob');
+const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const {statSync} = require('fs');
+const {resolve, parse} = require('path');
+const {SourceMapDevToolPlugin} = require('webpack');
+const webpack = require('webpack');
+
+const glob = (pattern) => fastGlob.sync(pattern, {cwd: __dirname, absolute: true});
+
+const isProduction = process.env.NODE_ENV !== 'development';
+
+const filterCssImport = (url, ...args) => {
+  const cssFile = args[1] || args[0]; // resourcePath is 2nd argument for url and 3rd for import
+  const importedFile = url.replace(/[?#].+/, '').toLowerCase();
+
+  if (cssFile.includes('font-awesome') && /(eot|ttf|otf|woff|svg)$/.test(importedFile)) {
+    return false;
+  }
+
+  return true;
+};
+
+module.exports = {
+  mode: isProduction ? 'production' : 'development',
+  entry: {
+    index: [
+      resolve(__dirname, 'wwwroot/js/jquery.js'),
+      resolve(__dirname, 'wwwroot/js/index.js'),
+      resolve(__dirname, 'wwwroot/css/index.css'),
+      resolve(__dirname, 'wwwroot/less/index.less'),
+    ],
+  },
+  devtool: false,
+  output: {
+    path: resolve(__dirname, 'public'),
+    publicPath: resolve(__dirname, 'public/'),
+    filename: ({chunk}) => {
+      // serviceworker can only manage assets below it's script's directory so
+      // we have to put it in / instead of /js/
+      return chunk.name === 'serviceworker' ? '[name].js' : 'js/[name].js';
+    },
+  },
+  optimization: {
+    minimize: isProduction,
+    minimizer: [
+      new TerserPlugin({
+        extractComments: false,
+        parallel: true,
+        terserOptions: {
+          output: {
+            comments: false,
+          },
+        },
+      }),
+      new CssMinimizerPlugin({
+        sourceMap: true,
+        minimizerOptions: {
+          map: {
+            inline: false,
+            annotation: true,
+          },
+          preset: [
+            'default',
+            {
+              discardComments: {
+                removeAll: true,
+              },
+            },
+          ],
+        },
+      }),
+    ],
+    splitChunks: {
+      chunks: 'async',
+      name: (_, chunks) => chunks.map((item) => item.name).join('-'),
+    },
+    moduleIds: 'named',
+    chunkIds: 'named',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              sourceMaps: true,
+              cacheDirectory: true,
+              cacheCompression: false,
+              cacheIdentifier: [
+                resolve(__dirname, 'package.json'),
+                resolve(__dirname, 'package-lock.json'),
+                resolve(__dirname, 'webpack.config.js'),
+              ].map((path) => statSync(path).mtime.getTime()).join(':'),
+              presets: [
+                [
+                  '@babel/preset-env',
+                  {
+                    useBuiltIns: 'usage',
+                    corejs: 3,
+                  },
+                ],
+              ],
+              plugins: [
+                [
+                  '@babel/plugin-transform-runtime',
+                  {
+                    regenerator: true,
+                  }
+                ],
+              ],
+              generatorOpts: {
+                compact: false,
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /.css$/i,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          {
+            loader: 'style-loader',
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              url: filterCssImport,
+              import: filterCssImport,
+            },
+          },
+        ],
+      },
+      {
+        test: /.less$/i,
+        use: [
+          {
+            loader: MiniCssExtractPlugin.loader,
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              sourceMap: true,
+              importLoaders: 1,
+              url: filterCssImport,
+              import: filterCssImport,
+            },
+          },
+          {
+            loader: 'less-loader',
+            options: {
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+      {
+        test: /\.svg$/,
+          use: ["svg-loader"]
+      },
+      {
+        test: /\.(ttf|woff|woff2|eot|svg?)$/i,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: '[name].[ext]',
+              outputPath: 'fonts/',
+              publicPath: (url) => `../fonts/${url}`, // required to remove css/ path segment
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|woff|woff2|eot|ttf|svg|ico)$/,
+        use: ["url-loader"]
+      },
+    ],
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery'
+    }),
+    new MiniCssExtractPlugin({
+      filename: 'css/[name].css',
+      chunkFilename: 'css/[name].css',
+    }),
+    new SourceMapDevToolPlugin({
+      filename: '[file].map',
+      include: [
+        'js/index.js',
+        'css/index.css',
+      ],
+    }),
+  ],
+  performance: {
+    hints: false,
+    maxEntrypointSize: Infinity,
+    maxAssetSize: Infinity,
+  },
+  watchOptions: {
+    ignored: [
+      'node_modules/**',
+    ],
+  },
+  stats: {
+    assetsSort: 'name',
+    assetsSpace: Infinity,
+    cached: false,
+    cachedModules: false,
+    children: false,
+    chunkModules: false,
+    chunkOrigins: false,
+    chunksSort: 'name',
+    colors: true,
+    entrypoints: false,
+    excludeAssets: [],
+    groupAssetsByChunk: false,
+    groupAssetsByEmitStatus: false,
+    groupAssetsByInfo: false,
+    groupModulesByAttributes: false,
+    modules: false,
+    reasons: false,
+    runtimeModules: false,
+  },
+};

wwwroot/css/index.css

@@ -0,0 +1,3 @@
+@import "./site.css";
+@import "./stylez.css";
+@import "./products.css";

wwwroot/js/index.js

@@ -0,0 +1,7 @@
+import 'jquery';
+import './publicpath.js';
+window.$ = require('jquery');
+import './jquery.js'
+import 'bootstrap';
+import './site.js';
+import './validation/file_type.js';

wwwroot/js/jquery.js

@@ -0,0 +1,3 @@
+import $ from 'jquery';
+
+window.$ = window.jQuery = $;

wwwroot/js/publicpath.js

@@ -0,0 +1,10 @@
+// This sets up the URL prefix used in webpack's chunk loading.
+// This file must be imported before any lazy-loading is being attempted.
+const {StaticUrlPrefix} = window.config;
+
+if (StaticUrlPrefix) {
+  __webpack_public_path__ = StaticUrlPrefix.endsWith('/') ? StaticUrlPrefix : `${StaticUrlPrefix}/`;
+} else {
+  const url = new URL(document.currentScript.src);
+  __webpack_public_path__ = url.pathname.replace(/\/[^/]*?\/[^/]*?$/, '/');
+}

wwwroot/less/index.less

@@ -0,0 +1,3 @@
+@import "bootstrap/less/theme";
+@import "bootstrap/less/bootstrap";
+@import "font-awesome/less/font-awesome";