feat: swap publish/static dirs (#93)

* feat: swap publish/static dirs

* fix: move redirects to onPostBuild

* chore: add test for static assets

* chore: fix e2e test

Author: orinokai

src/build/config.ts

@@ -2,7 +2,7 @@ import type { NetlifyPluginConstants, NetlifyPluginOptions } from '@netlify/buil
 import type { PrerenderManifest } from 'next/dist/build/index.js'
 import { readFile } from 'node:fs/promises'
 import { resolve } from 'node:path'
-import { SERVER_HANDLER_NAME, STATIC_DIR } from './constants.js'
+import { SERVER_HANDLER_NAME } from './constants.js'
 
 export const getPrerenderManifest = async ({
   PUBLISH_DIR,
@@ -13,12 +13,13 @@ export const getPrerenderManifest = async ({
 /**
  * Enable Next.js standalone mode at build time
  */
-export const setBuildConfig = () => {
+export const setPreBuildConfig = () => {
   process.env.NEXT_PRIVATE_STANDALONE = 'true'
 }
 
-export const setDeployConfig = ({ netlifyConfig }: Pick<NetlifyPluginOptions, 'netlifyConfig'>) => {
-  netlifyConfig.build.publish = STATIC_DIR
+export const setPostBuildConfig = ({
+  netlifyConfig,
+}: Pick<NetlifyPluginOptions, 'netlifyConfig'>) => {
   netlifyConfig.redirects ||= []
   netlifyConfig.redirects.push({
     from: '/*',

src/build/constants.ts

@@ -11,6 +11,7 @@ export const PLUGIN_NAME = pkg.name
 export const PLUGIN_VERSION = pkg.version
 
 export const STATIC_DIR = '.netlify/static'
+export const TEMP_DIR = '.netlify/temp'
 
 export const SERVER_FUNCTIONS_DIR = '.netlify/functions-internal'
 export const SERVER_HANDLER_NAME = '_netlify-server-handler'

src/build/content/static.ts

@@ -2,12 +2,12 @@ import type { NetlifyPluginOptions } from '@netlify/build'
 import glob from 'fast-glob'
 import type { PrerenderManifest } from 'next/dist/build/index.js'
 import { existsSync } from 'node:fs'
-import { cp, readFile, rm } from 'node:fs/promises'
+import { cp, mkdir, readFile, rename, rm } from 'node:fs/promises'
 import { basename, dirname, resolve } from 'node:path'
 import { join as joinPosix } from 'node:path/posix'
 import { getBlobStore } from '../blob.js'
 import { getPrerenderManifest } from '../config.js'
-import { STATIC_DIR } from '../constants.js'
+import { STATIC_DIR, TEMP_DIR } from '../constants.js'
 
 export const uploadStaticContent = async ({
   constants: { PUBLISH_DIR, NETLIFY_API_TOKEN, NETLIFY_API_HOST, SITE_ID },
@@ -63,3 +63,18 @@ export const copyStaticAssets = async ({
     })
   }
 }
+
+export const publishStaticDir = async ({
+  constants: { PUBLISH_DIR },
+}: Pick<NetlifyPluginOptions, 'constants'>): Promise<void> => {
+  await mkdir(resolve(TEMP_DIR, 'publish'), { recursive: true })
+  await rename(resolve(PUBLISH_DIR), resolve(TEMP_DIR, 'publish'))
+  await rename(resolve(STATIC_DIR), resolve(PUBLISH_DIR))
+}
+
+export const unpublishStaticDir = async ({
+  constants: { PUBLISH_DIR },
+}: Pick<NetlifyPluginOptions, 'constants'>): Promise<void> => {
+  await rename(resolve(PUBLISH_DIR), resolve(STATIC_DIR))
+  await rename(resolve(TEMP_DIR, 'publish'), resolve(PUBLISH_DIR))
+}

src/index.ts

@@ -1,13 +1,18 @@
 import type { NetlifyPluginOptions } from '@netlify/build'
 import { restoreBuildCache, saveBuildCache } from './build/cache.js'
-import { setBuildConfig, setDeployConfig } from './build/config.js'
+import { setPostBuildConfig, setPreBuildConfig } from './build/config.js'
 import { uploadPrerenderedContent } from './build/content/prerendered.js'
-import { copyStaticAssets, uploadStaticContent } from './build/content/static.js'
+import {
+  copyStaticAssets,
+  publishStaticDir,
+  unpublishStaticDir,
+  uploadStaticContent,
+} from './build/content/static.js'
 import { createServerHandler } from './build/functions/server.js'
 
 export const onPreBuild = async ({ constants, utils }: NetlifyPluginOptions) => {
+  setPreBuildConfig()
   await restoreBuildCache({ constants, utils })
-  setBuildConfig()
 }
 
 export const onBuild = async ({ constants, utils }: NetlifyPluginOptions) => {
@@ -22,6 +27,11 @@ export const onBuild = async ({ constants, utils }: NetlifyPluginOptions) => {
   ])
 }
 
-export const onPostBuild = ({ netlifyConfig }: NetlifyPluginOptions) => {
-  setDeployConfig({ netlifyConfig })
+export const onPostBuild = async ({ constants, netlifyConfig }: NetlifyPluginOptions) => {
+  setPostBuildConfig({ netlifyConfig })
+  await publishStaticDir({ constants })
+}
+
+export const onEnd = async ({ constants }: NetlifyPluginOptions) => {
+  await unpublishStaticDir({ constants })
 }

tests/e2e/simple-app.test.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
 import { createE2EFixture } from '../utils/create-e2e-fixture.js'
 
 let ctx: Awaited<ReturnType<typeof createE2EFixture>>
@@ -17,7 +17,14 @@ test.describe('simple-next-app', () => {
 
     await expect(page).toHaveTitle('Simple Next App')
 
-    const h1 = await page.locator('h1')
+    const h1 = page.locator('h1')
     await expect(h1).toHaveText('Home')
   })
+
+  test('Serves a static image correctly', async ({ page }) => {
+    const response = await page.goto(`${ctx.url}/next.svg`)
+
+    expect(response?.status()).toBe(200)
+    expect(response?.headers()['content-type']).toBe('image/svg+xml')
+  })
 })