Browse Source

chore: add development server for shadow-cljs

Miguel Ángel Moreno 4 months ago
parent
commit
3951173441
6 changed files with 49 additions and 28 deletions
  1. 1 1
      deps.edn
  2. 4 4
      package-lock.json
  3. 1 1
      package.json
  4. 15 0
      resources/src/index.html
  5. 2 0
      shadow-cljs.edn
  6. 26 22
      webpack.config.js

+ 1 - 1
deps.edn

@@ -17,7 +17,7 @@
           :ns-default build}
   :frontend
   {:extra-paths ["src/frontend"]
-   :extra-deps  {thheller/shadow-cljs          {:mvn/version "2.28.8"}
+   :extra-deps  {thheller/shadow-cljs          {:mvn/version "2.28.20"}
                  cider/cider-nrepl             {:mvn/version "0.28.4"}
                  metosin/reitit-frontend       {:mvn/version "0.5.18"}
                  reagent/reagent               {:mvn/version "1.1.1"}

+ 4 - 4
package-lock.json

@@ -25,7 +25,7 @@
         "postcss-loader": "^7.3.3",
         "sass": "^1.65.1",
         "sass-loader": "^13.3.2",
-        "shadow-cljs": "^2.28.8",
+        "shadow-cljs": "^2.28.20",
         "tailwindcss": "^3.3.3",
         "webpack": "^5.88.2",
         "webpack-cli": "^5.1.4",
@@ -4193,9 +4193,9 @@
       }
     },
     "node_modules/shadow-cljs": {
-      "version": "2.28.8",
-      "resolved": "https://registry.npmjs.org/shadow-cljs/-/shadow-cljs-2.28.8.tgz",
-      "integrity": "sha512-EuFugP/klf99+G+K6TyHJX9l5CdeMaOLv+dQmy0Jxvzx+mzimCYAiAcNkRfedrKYHzklo9H0kXsixZ45Wd23gA==",
+      "version": "2.28.20",
+      "resolved": "https://registry.npmjs.org/shadow-cljs/-/shadow-cljs-2.28.20.tgz",
+      "integrity": "sha512-Q9N+aw2suSUZ6vmWhZupl0rkyjoYrnpU1WbMrNrbuUiKE6XjvT1vcBkTUrqkMJEPraV7u+H9b5d/RcKnj8nbhg==",
       "dev": true,
       "dependencies": {
         "node-libs-browser": "^2.2.1",

+ 1 - 1
package.json

@@ -25,7 +25,7 @@
     "postcss-loader": "^7.3.3",
     "sass": "^1.65.1",
     "sass-loader": "^13.3.2",
-    "shadow-cljs": "^2.28.8",
+    "shadow-cljs": "^2.28.20",
     "tailwindcss": "^3.3.3",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",

+ 15 - 0
resources/src/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="/styles/index.css">
+  <title>Tubo</title>
+</head>
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="app"></div>
+  <script src="/js/main.js"></script>
+</body>
+</html>

+ 2 - 0
shadow-cljs.edn

@@ -1,4 +1,6 @@
 {:deps {:aliases [:frontend]}
+ :dev-http {8020 {:root      "resources/public"
+                  :proxy-url "http://localhost:3000"}}
  :builds
  {:tubo
   {:target :browser

+ 26 - 22
webpack.config.js

@@ -1,15 +1,15 @@
-const path = require("path")
-const MiniCssExtractPlugin = require("mini-css-extract-plugin")
-const RemoveEmptyScriptsPlugin = require("webpack-remove-empty-scripts")
-const CopyPlugin = require("copy-webpack-plugin")
+const path = require("path");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const RemoveEmptyScriptsPlugin = require("webpack-remove-empty-scripts");
+const CopyPlugin = require("copy-webpack-plugin");
 
 module.exports = {
   mode: process.env.NODE_ENV,
   entry: {
-    index: path.resolve(__dirname, "resources/src/styles/index.scss")
+    index: path.resolve(__dirname, "resources/src/styles/index.scss"),
   },
   output: {
-    path: path.resolve(__dirname, "resources/public")
+    path: path.resolve(__dirname, "resources/public"),
   },
   plugins: [
     new RemoveEmptyScriptsPlugin(),
@@ -20,10 +20,14 @@ module.exports = {
       patterns: [
         {
           from: path.resolve(__dirname, "resources/src/icons"),
-          to: "icons"
-        }
-      ]
-    })
+          to: "icons",
+        },
+        {
+          from: path.resolve(__dirname, "resources/src/index.html"),
+          to: "index.html",
+        },
+      ],
+    }),
   ],
   module: {
     rules: [
@@ -33,22 +37,22 @@ module.exports = {
         use: [
           MiniCssExtractPlugin.loader,
           {
-            loader: 'css-loader',
+            loader: "css-loader",
             options: {
-              importLoaders: 1
-            }
+              importLoaders: 1,
+            },
           },
           "postcss-loader",
-          "sass-loader"
-        ]
+          "sass-loader",
+        ],
       },
       {
         test: /\.(woff|woff2|eot|ttf|otf)$/i,
-        type: 'asset/resource',
+        type: "asset/resource",
         generator: {
-          filename: 'fonts/[hash][ext][query]'
-        }
-      }
-    ]
-  }
-}
+          filename: "fonts/[hash][ext][query]",
+        },
+      },
+    ],
+  },
+};