feat: add watch mode (#162)

Author: erezrokah

README.md

@@ -199,7 +199,7 @@ Now you're all set.
 
 From now on, whenever you want to preview your application locally, just run:
 
-1. `npm run build`: This will run `next build` to build your Next.js app and `next-on-netlify` to prepare your Next.js app for compatibility with Netlify
+1. `npx next-on-netlify watch`: This will run `next build` to build your Next.js app and `next-on-netlify` to prepare your Next.js app for compatibility with Netlify. Any source code changes will trigger another build.
 1. `netlify dev`: This will emulate Netlify on your computer and let you preview your app on `http://localhost:8888`.
 
 *Note:*

index.js

@@ -1,4 +1,10 @@
 const { normalize } = require("path");
+const debounceFn = require("debounce-fn");
+const chokidar = require("chokidar");
+const execa = require("execa");
+
+const { logTitle } = require("./lib/helpers/logger");
+
 const prepareFolders = require("./lib/steps/prepareFolders");
 const copyPublicFiles = require("./lib/steps/copyPublicFiles");
 const copyNextAssets = require("./lib/steps/copyNextAssets");
@@ -9,21 +15,10 @@ const setupHeaders = require("./lib/steps/setupHeaders");
 const {
   NETLIFY_PUBLISH_PATH,
   NETLIFY_FUNCTIONS_PATH,
+  SRC_FILES,
 } = require("./lib/config");
 
-/** options param:
- * {
- *   functionsDir: string to path
- *   publishDir: string to path
- * }
- */
-
-const nextOnNetlify = (options = {}) => {
-  const functionsPath = normalize(
-    options.functionsDir || NETLIFY_FUNCTIONS_PATH
-  );
-  const publishPath = normalize(options.publishDir || NETLIFY_PUBLISH_PATH);
-
+const build = (functionsPath, publishPath) => {
   const trackNextOnNetlifyFiles = prepareFolders({
     functionsPath,
     publishPath,
@@ -42,6 +37,47 @@ const nextOnNetlify = (options = {}) => {
   setupHeaders(publishPath);
 
   trackNextOnNetlifyFiles();
+
+  logTitle("✅ Success! All done!");
+};
+
+const watch = (functionsPath, publishPath) => {
+  logTitle(`👀 Watching source code for changes`);
+
+  const runBuild = debounceFn(
+    () => {
+      try {
+        execa.sync("next", ["build"], { stdio: "inherit" });
+        build(functionsPath, publishPath);
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    {
+      wait: 3000,
+    }
+  );
+
+  chokidar.watch(SRC_FILES).on("all", runBuild);
+};
+
+/** options param:
+ * {
+ *   functionsDir: string to path
+ *   publishDir: string to path
+ *   watch: { directory: string to path }
+ * }
+ */
+
+const nextOnNetlify = (options = {}) => {
+  const functionsPath = normalize(
+    options.functionsDir || NETLIFY_FUNCTIONS_PATH
+  );
+  const publishPath = normalize(options.publishDir || NETLIFY_PUBLISH_PATH);
+
+  options.watch
+    ? watch(functionsPath, publishPath)
+    : build(functionsPath, publishPath);
 };
 
 module.exports = nextOnNetlify;

lib/config.js

@@ -1,5 +1,6 @@
 const { join } = require("path");
 const getNextDistDir = require("./helpers/getNextDistDir");
+const getNextSrcDirs = require("./helpers/getNextSrcDir");
 
 // This is where next-on-netlify will place all static files.
 // The publish key in netlify.toml should point to this folder.
@@ -17,7 +18,9 @@ const PUBLIC_PATH = join(".", "public/");
 const NEXT_CONFIG_PATH = join(".", "next.config.js");
 
 // This is the folder that NextJS builds to; default is .next
-const NEXT_DIST_DIR = getNextDistDir({ nextConfigPath: NEXT_CONFIG_PATH });
+const NEXT_DIST_DIR = getNextDistDir();
+
+const NEXT_SRC_DIRS = getNextSrcDirs();
 
 // This is the folder with templates for Netlify Functions
 const TEMPLATES_DIR = join(__dirname, "templates");
@@ -35,6 +38,14 @@ const CUSTOM_HEADERS_PATH = join(".", "_headers");
 // creating the next/image redirect
 const NEXT_IMAGE_FUNCTION_NAME = "next_image";
 
+const SRC_FILES = [
+  PUBLIC_PATH,
+  NEXT_CONFIG_PATH,
+  CUSTOM_REDIRECTS_PATH,
+  CUSTOM_HEADERS_PATH,
+  ...NEXT_SRC_DIRS,
+];
+
 module.exports = {
   NETLIFY_PUBLISH_PATH,
   NETLIFY_FUNCTIONS_PATH,
@@ -46,4 +57,5 @@ module.exports = {
   CUSTOM_REDIRECTS_PATH,
   CUSTOM_HEADERS_PATH,
   NEXT_IMAGE_FUNCTION_NAME,
+  SRC_FILES,
 };

lib/helpers/getNextDistDir.js

@@ -2,7 +2,7 @@
 const { join } = require("path");
 const getNextConfig = require("./getNextConfig");
 
-const getNextDistDir = ({ nextConfigPath }) => {
+const getNextDistDir = () => {
   const nextConfig = getNextConfig();
 
   return join(".", nextConfig.distDir);

lib/helpers/getNextSrcDir.js

@@ -0,0 +1,7 @@
+const { join } = require("path");
+
+const getNextSrcDirs = () => {
+  return ["pages", "src", "public", "styles"].map((dir) => join(".", dir));
+};
+
+module.exports = getNextSrcDirs;

next-on-netlify.js

@@ -1,17 +1,26 @@
 #!/usr/bin/env node
 const { program } = require("commander");
 
-program
-  .option(
-    "--max-log-lines [number]",
-    "lines of build output to show for each section",
-    50
-  )
-  .parse(process.argv);
-
 const nextOnNetlify = require("./index");
-const { logTitle } = require("./lib/helpers/logger");
 
-nextOnNetlify();
+program.option(
+  "--max-log-lines [number]",
+  "lines of build output to show for each section",
+  50
+);
+
+program
+  .command("watch")
+  .description("re-runs next-on-netlify on changes")
+  .action(() => {
+    nextOnNetlify({ watch: true });
+  });
+
+program
+  .command("build", { isDefault: true })
+  .description("runs next-on-netlify")
+  .action(() => {
+    nextOnNetlify();
+  });
 
-logTitle("✅ Success! All done!");
+program.parse(process.argv);

package-lock.json

@@ -52,7 +52,9 @@
   },
   "dependencies": {
     "@sls-next/lambda-at-edge": "^1.5.2",
+    "chokidar": "^3.5.1",
     "commander": "^6.0.0",
+    "debounce-fn": "^4.0.0",
     "fs-extra": "^9.0.1",
     "jimp": "^0.16.1"
   },