feat: add watch mode

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.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"
  },