fix: copy public directory output instead of input when using Nx (#856)

* fix: copy public directory from outdir when exists

* chore: add service-worker test to nx cypress

Co-authored-by: Matt Kane <[email protected]>

Author: lourd

cypress/integration/nx/general.spec.ts

@@ -9,4 +9,11 @@ describe('Default site', () => {
     cy.visit('//')
     cy.url().should('eq', `${Cypress.config().baseUrl}/`)
   })
-})
+
+  it('serves generated public files', async () => {
+    cy.request('service-worker.js').then((res) => {
+      expect(res.status).to.eq(200)
+      expect(res.headers['content-type']).to.match(/javascript/)
+    })
+  })
+})

demos/nx-next-monorepo-demo/apps/demo-monorepo/next.config.js

@@ -1,5 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const withNx = require('@nrwl/next/plugins/with-nx');
+const { InjectManifest } = require("workbox-webpack-plugin");
 
 /**
  * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
@@ -10,6 +11,16 @@ const nextConfig = {
     // See: https://github.com/gregberge/svgr
     svgr: false,
   },
+  webpack(config, options) {
+    if (!options.dev) {
+      const serviceWorkerPlugin = new InjectManifest({
+        swSrc: "./src/service-worker.ts",
+        swDest: "../public/service-worker.js",
+      });
+      config.plugins.push(serviceWorkerPlugin);
+    }
+    return config;
+  },
 };
 
 module.exports = withNx(nextConfig);

demos/nx-next-monorepo-demo/apps/demo-monorepo/src/service-worker.ts

@@ -0,0 +1,8 @@
+/// <reference lib="webworker" />
+
+import { PrecacheController } from "workbox-precaching";
+
+declare const self: ServiceWorkerGlobalScope;
+
+console.log(PrecacheController);
+console.log(self.__WB_MANIFEST);

demos/nx-next-monorepo-demo/package-lock.json

@@ -15,7 +15,8 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "regenerator-runtime": "0.13.9",
-    "tslib": "^2.0.0"
+    "tslib": "^2.0.0",
+    "workbox-precaching": "^6.4.1"
   },
   "devDependencies": {
     "@nrwl/cli": "13.1.3",
@@ -48,6 +49,7 @@
     "jest": "27.4.3",
     "prettier": "^2.3.1",
     "ts-jest": "27.0.5",
-    "typescript": "~4.3.5"
+    "typescript": "~4.3.5",
+    "workbox-webpack-plugin": "^6.4.1"
   }
 }

demos/nx-next-monorepo-demo/package.json

@@ -166,7 +166,7 @@ exports.moveStaticPages = async ({ netlifyConfig, target, i18n }) => {
       yellowBright(outdent`
         Skipped moving ${matchedPages.size} ${
         matchedPages.size === 1 ? 'file because it matches' : 'files because they match'
-      } middleware, so cannot be deployed to the CDN and will be served from the origin instead. 
+      } middleware, so cannot be deployed to the CDN and will be served from the origin instead.
         This is fine, but we're letting you know because it may not be what you expect.
       `),
     )
@@ -301,8 +301,14 @@ exports.unpatchNextFiles = async (root) => {
   }
 }
 
-exports.movePublicFiles = async ({ appDir, publish }) => {
-  const publicDir = join(appDir, 'public')
+exports.movePublicFiles = async ({ appDir, outdir, publish }) => {
+  // `outdir` is a config property added when using Next.js with Nx. It's typically
+  // a relative path outside of the appDir, e.g. '../../dist/apps/<app-name>', and
+  // the parent directory of the .next directory.
+  // If it exists, copy the files from the public folder there in order to include
+  // any files that were generated during the build. Otherwise, copy the public
+  // directory from the original app directory.
+  const publicDir = outdir ? join(appDir, outdir, 'public') : join(appDir, 'public')
   if (existsSync(publicDir)) {
     await copy(publicDir, `${publish}/`)
   }

src/helpers/files.js

@@ -48,7 +48,7 @@ module.exports = {
 
     checkNextSiteHasBuilt({ publish, failBuild })
 
-    const { appDir, basePath, i18n, images, target, ignore, trailingSlash } = await getNextConfig({
+    const { appDir, basePath, i18n, images, target, ignore, trailingSlash, outdir } = await getNextConfig({
       publish,
       failBuild,
     })
@@ -58,7 +58,7 @@ module.exports = {
     await generateFunctions(constants, appDir)
     await generatePagesResolver({ netlifyConfig, target, constants })
 
-    await movePublicFiles({ appDir, publish })
+    await movePublicFiles({ appDir, outdir, publish })
 
     if (process.env.EXPERIMENTAL_ODB_TTL) {
       await patchNextFiles(basePath)