fix incorrect _headers syntax & broken local cypress (#144)

* fix incorrect _headers syntax & broken local cypress

* add custom headers test

Author: lindsaylevine

cypress/plugins/deployProject.js

@@ -1,3 +1,4 @@
+const { removeSync } = require("fs-extra");
 const waitOn = require("wait-on");
 const execa = require("execa");
 const { join } = require("path");
@@ -7,6 +8,9 @@ const getBaseUrl = require("./getBaseUrl");
 const deployLocally = ({ project }, config) => {
   process.stdout.write(`Deploying project: ${project}...`);
 
+  // _headers breaks netlify dev
+  removeSync(join(config.buildsFolder, project, "out_publish", "_headers"));
+
   // Start server. Must start in detached mode, so that we can kill it later.
   // Otherwise, we seem unable to kill it.
   // See: https://medium.com/@almenon214/killing-processes-with-node-772ffdd19aad

lib/steps/setupHeaders.js

@@ -18,11 +18,12 @@ const setupHeaders = (publishPath) => {
   headers.push("# Next-on-Netlify Headers");
 
   // Add rule to override cache control for static chunks
+  const indentNewLine = (s) => `\n  ${s}`;
   const staticChunkRule = [
-    `/_next/static/chunks/*:`,
-    `\n`,
-    `  `,
-    `cache-control: public,max-age=31536000,immutable`,
+    `/*/_next/static/chunks/*`,
+    indentNewLine(`cache-control: public`),
+    indentNewLine(`cache-control: max-age=31536000`),
+    indentNewLine(`cache-control: immutable`),
   ].join("");
   headers.push(staticChunkRule);
 

tests/__snapshots__/defaults.test.js.snap

@@ -2,8 +2,10 @@
 
 exports[`Headers creates Netlify headers 1`] = `
 "# Next-on-Netlify Headers
-/_next/static/chunks/*:
-  cache-control: public,max-age=31536000,immutable"
+/*/_next/static/chunks/*
+  cache-control: public
+  cache-control: max-age=31536000
+  cache-control: immutable"
 `;
 
 exports[`Routing creates Netlify redirects 1`] = `

tests/customHeaders.test.js

@@ -0,0 +1,51 @@
+// Test next-on-netlify when a custom distDir is set in next.config.js
+
+const { EOL } = require("os");
+const { parse, join } = require("path");
+const { readFileSync } = require("fs-extra");
+const buildNextApp = require("./helpers/buildNextApp");
+
+// The name of this test file (without extension)
+const FILENAME = parse(__filename).name;
+
+// The directory which will be used for testing.
+// We simulate a NextJS app within that directory, with pages, and a
+// package.json file.
+const PROJECT_PATH = join(__dirname, "builds", FILENAME);
+
+// Capture the output to verify successful build
+let buildOutput;
+
+beforeAll(
+  async () => {
+    buildOutput = await buildNextApp()
+      .forTest(__filename)
+      .withPages("pages-with-static-props-index")
+      .withNextConfig("next.config.js")
+      .withPackageJson("package.json")
+      .withFile("_headers")
+      .build();
+  },
+  // time out after 180 seconds
+  180 * 1000
+);
+
+describe("next-on-netlify", () => {
+  test("builds successfully", () => {
+    expect(buildOutput).toMatch("Next on Netlify");
+    expect(buildOutput).toMatch("Success! All done!");
+  });
+});
+
+describe("Headers", () => {
+  test("includes custom header rules", async () => {
+    // Read _redirects file
+    const contents = readFileSync(
+      join(PROJECT_PATH, "out_publish", "_headers"),
+      "utf8"
+    );
+
+    const headers = contents.trim().split(EOL);
+    expect(headers[0]).toEqual("/templates/index.html");
+  });
+});

tests/fixtures/_headers

@@ -0,0 +1,8 @@
+/templates/index.html
+  # headers for that path:
+  X-Frame-Options: DENY
+  X-XSS-Protection: 1; mode=block
+
+/templates/index2.html
+  # headers for that path:
+  X-Frame-Options: SAMEORIGIN