wwebdev · coytar · Mar 3, 2024 · Mar 3, 2024
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env"]
+}
diff --git a/.eslintrc b/.eslintrc
@@ -14,6 +14,6 @@
     },
     "rules": {
         "semi": ["error", "always"],
-        "quotes": ["error", "single"]
+        "no-unused-vars": 1
     }
 }
diff --git a/.stylelintrc b/.stylelintrc
@@ -1,8 +1,10 @@
-"rules": {
+{
+  "extends": ["stylelint-config-standard-scss"],
+  "rules": {
     "block-no-empty": true,
-    "color-hex-case": "lower",
-    "color-hex-length": "short",
     "color-no-invalid-hex": true,
-    "declaration-colon-space-after": "always",
-    "max-empty-lines": 2
-}
+    "color-hex-length": "short",
+    "property-no-vendor-prefix": null,
+    "length-zero-no-unit": null
+  }  
+}
diff --git a/README.MD b/README.MD
@@ -1,5 +1,13 @@
 # Static Website Template
 
+## Updated in March 2024
+Added babelrc file.
+Removed old stylelint rules.
+Eslint will warn about unused vars.
+Uses local-web-server for backend proxy.
+
+## Introduction
+
 This is a template for creating simple static websites without JS frameworks.
 
 A blog post explaining the process can be found on [wweb.dev](https://wweb.dev/blog/how-to-create-static-website-npm-scripts)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,32 +18,36 @@
     "build:html": "posthtml -c posthtml.json",
     "build:images": "imagemin src/images/**/* --out-dir=dist/images",
     "build": "run-s build:*",
-    "serve": "browser-sync start --server \"dist\" --files \"dist\"",
+    "serve": "npx local-web-server --directory dist --spa index.html --rewrite '/api/(.*) -> http://localhost:3001/api/$1'",
     "watch:css": "onchange \"src/scss\" -- npm run build:css",
     "watch:html": "onchange \"src/views\" -- npm run build:html",
     "watch:images": "onchange \"src/images\" -- npm run build:images",
     "watch:js": "onchange \"src/js\" -- webpack --mode=development",
     "watch": "run-p serve watch:*"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.16.11",
-    "autoprefixer": "^10.4.4",
-    "babel-loader": "^8.2.3",
-    "browser-sync": "^2.27.9",
-    "eslint": "^8.11.0",
-    "eslint-webpack-plugin": "^3.1.1",
-    "htmlnano": "^2.0.0",
+    "@babel/preset-env": "^7.24.0",
+    "autoprefixer": "^10.4.18",
+    "babel-loader": "^9.1.3",
+    "eslint": "^8.57.0",
+    "eslint-webpack-plugin": "^4.0.1",
+    "htmlnano": "^2.1.0",
     "imagemin-cli": "^7.0.0",
-    "node-sass": "^7.0.1",
+    "node-sass": "^9.0.0",
     "npm-run-all": "^4.1.5",
     "onchange": "^7.1.0",
-    "postcss-cli": "^9.1.0",
-    "postcss-scss": "^4.0.3",
+    "postcss-cli": "^11.0.0",
+    "postcss-scss": "^4.0.9",
     "posthtml": "^0.16.6",
     "posthtml-cli": "^0.10.0",
-    "posthtml-modules": "^0.8.0",
-    "stylelint": "^14.6.0",
-    "webpack": "^5.70.0",
-    "webpack-cli": "^4.9.2"
+    "posthtml-modules": "^0.9.1",
+    "stylelint": "^16.2.1",
+    "stylelint-config-standard-scss": "^13.0.0",
+    "webpack": "^5.90.3",
+    "webpack-cli": "^5.1.4"
+  },
+  "dependencies": {
+    "cssnano": "^6.0.5",
+    "local-web-server": "^5.3.1"
   }
 }
diff --git a/src/js/index.js b/src/js/index.js
@@ -0,0 +1 @@
+import './main';
diff --git a/src/scss/_colors.scss b/src/scss/_colors.scss
@@ -1,3 +1,3 @@
-$defaultFont: #606060;
-$subtleBg: #f5f5f5;
+$default-font: #606060;
+$subtle-bg: #f5f5f5;
 $primary: #74d1f6;
diff --git a/src/scss/_global.scss b/src/scss/_global.scss
@@ -1,6 +1,6 @@
 *,
-*:before,
-*:after {
+::before,
+::after {
     margin: 0;
     padding: 0;
     box-sizing: inherit;
@@ -14,8 +14,8 @@ html {
 
 body {
     font-size: 1.6rem;
-    background-color: $subtleBg;
-    color: $defaultFont;
+    background-color: $subtle-bg;
+    color: $default-font;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

diff --git a/src/scss/index.scss b/src/scss/index.scss
@@ -1,2 +1,2 @@
-@import 'colors.scss';
-@import 'global.scss';
+@import 'colors';
+@import 'global';
diff --git a/src/views/index.html b/src/views/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="de">
+<html>
   <head>
     <title>Static Website Template</title>
     <module href="/components/head.html"></module>

diff --git a/webpack.config.js b/webpack.config.js
@@ -1,23 +1,20 @@
 /* eslint-disable no-undef */
-const ESLintPlugin = require('eslint-webpack-plugin');
+const ESLintPlugin = require("eslint-webpack-plugin");
 
 module.exports = {
-    entry: './src/js/main.js',
-    plugins: [new ESLintPlugin()],
-    output: {
-        path: __dirname + '/dist',
-        filename: 'bundle.js'
-    },
-    module: {
-        rules: [{
-            test: /\.m?js$/,
-            exclude: /node_modules/,
-            use: {
-                loader: 'babel-loader',
-                options: {
-                    presets: ['@babel/preset-env']
-                }
-            }
-        }]
-    }
-};
+  entry: "./src/js/index.js",
+  plugins: [new ESLintPlugin()],
+  output: {
+    path: __dirname + "/dist",
+    filename: "bundle.js",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: "babel-loader",
+      },
+    ],
+  },
+};