Generate CSS on hot-reload

README.md

@@ -56,8 +56,6 @@ To run the project locally, use:
 If you're running your project locally, follow these steps to update your environment variables:
 
 1. Save your changes in the `.env` file.
-2. Run `pnpm dev` again to apply the updated environment variables.
-3. Reload the page to reflect the changes.
 
 ### Deployed on Vercel
 
@@ -68,4 +66,4 @@ If you have deployed your project on Vercel, follow these steps to update your e
 3. Update the environment variables in the Vercel dashboard.
 4. Trigger a redeployment of your app to apply the changes.
 
-By following these steps, you can ensure that your project uses the updated environment variables.
+By following these steps, you can ensure that your project uses the updated environment variables.

next.config.js

@@ -1,7 +1,43 @@
 /** @type {import('next').NextConfig} */
+
+const execSync = require("child_process").execSync;
+
 const nextConfig = {
-  images: { domains: ["arweave.net", 'image-cache-service-z3w7d7dnea-ew.a.run.app'] },
+  images: {
+    domains: ["arweave.net", "image-cache-service-z3w7d7dnea-ew.a.run.app"],
+  },
+
+  webpack: (config, { isServer, webpack }) => {
+    if (!isServer) {
+      config.plugins.push(
+        new webpack.WatchIgnorePlugin({
+          paths: [/.*/], // This tells webpack to not ignore any files. Modify to suit your needs.
+        })
+      );
+
+      config.plugins.push(
+        new webpack.HotModuleReplacementPlugin({
+          multiStep: true,
+        })
+      );
+
+      config.plugins.push({
+        apply: (compiler) => {
+          compiler.hooks.watchRun.tapAsync(
+            "MyCustomScript",
+            (compilation, callback) => {
+              // Run your custom script
+              execSync("node generate-css.js", { stdio: "inherit" });
+
+              callback();
+            }
+          );
+        },
+      });
+    }
 
+    return config;
+  },
 };
 
 module.exports = nextConfig;