implementing upload of HTML pages

Author: danielcondemarin

package-lock.json

@@ -36,6 +36,8 @@
   "homepage": "https://github.com/danielcondemarin/serverless-next.js#readme",
   "devDependencies": {
     "@babel/preset-typescript": "^7.9.0",
+    "@sls-next/lambda-at-edge": "file:packages/lambda-at-edge",
+    "@types/fs-extra": "^8.1.0",
     "@types/jest": "^25.2.1",
     "@typescript-eslint/eslint-plugin": "^2.28.0",
     "@typescript-eslint/parser": "^2.28.0",
@@ -49,7 +51,6 @@
     "lerna": "^3.16.4",
     "next": "^9.1.5",
     "next-aws-cloudfront": "file:packages/lambda-at-edge-compat",
-    "@sls-next/lambda-at-edge": "file:packages/lambda-at-edge",
     "prettier": "^1.17.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
@@ -84,6 +85,8 @@
     ]
   },
   "dependencies": {
+    "@aws-sdk/client-s3-node": "0.1.0-preview.2",
+    "fs-extra": "^9.0.0",
     "opencollective-postinstall": "^2.0.2"
   },
   "collective": {

package.json

@@ -1,7 +1,16 @@
+const promisifyMock = (mockFn: jest.Mock): jest.Mock => {
+  const promise = jest.fn();
+  mockFn.mockReturnValue({ promise });
+  return promise;
+};
+
 export const mockUpload = jest.fn();
+export const mockUploadPromise = promisifyMock(mockUpload);
+
+const MockS3 = jest.fn(() => ({
+  upload: mockUpload
+}));
 
 export default {
-  S3: jest.fn(() => ({
-    upload: mockUpload
-  }))
+  S3: MockS3
 };

packages/s3-static-assets/__mocks__/aws-sdk.ts

@@ -0,0 +1,2 @@
+export const IMMUTABLE_CACHE_CONTROL_HEADER =
+  "public, max-age=31536000, immutable";

packages/s3-static-assets/src/constants.ts

@@ -8,7 +8,12 @@ type UploadStaticAssetsOptions = {
   bucketName: string;
   nextAppDir: string;
 };
-
+const filePathToS3Key = (filePath: string): string => {
+  const relevantFilePathPart = filePath.substring(
+    filePath.indexOf(".next" + path.sep)
+  );
+  return relevantFilePathPart.replace(".next", "_next");
+};
 const readDirectoryFiles = (directory: string): Promise<Array<Item>> => {
   const items: Item[] = [];
   return new Promise((resolve, reject) => {
@@ -40,20 +45,22 @@ const uploadStaticAssets = async (
 
   const uploadTasks = buildStaticFiles
     .filter(item => !item.stats.isDirectory())
-    .map(fileItem => {
-      return fse.readFile(fileItem.path).then(fileBodyStream =>
-        s3
-          .upload({
-            Bucket: bucketName,
-            Key: fileItem.path,
-            Body: fileBodyStream,
-            ContentType:
-              mime.lookup(path.basename(fileItem.path)) ||
-              "application/octet-stream",
-            CacheControl: "public, max-age=31536000, immutable"
-          })
-          .promise()
-      );
+    .map(async fileItem => {
+      const fileBody = await fse.readFile(fileItem.path);
+
+      const s3Key = filePathToS3Key(fileItem.path);
+
+      return s3
+        .upload({
+          Bucket: bucketName,
+          Key: s3Key,
+          Body: fileBody,
+          ContentType:
+            mime.lookup(path.basename(fileItem.path)) ||
+            "application/octet-stream",
+          CacheControl: "public, max-age=31536000, immutable"
+        })
+        .promise();
     });
 
   await Promise.all(uploadTasks);

packages/s3-static-assets/index.ts renamed to packages/s3-static-assets/src/index.ts

@@ -1,41 +1,52 @@
-import stream from "stream";
-import fse from "fs-extra";
 import path from "path";
-import uploadStaticAssets from "../index";
+import uploadStaticAssets from "../src/index";
+import { IMMUTABLE_CACHE_CONTROL_HEADER } from "../src/constants";
 import { mockUpload } from "aws-sdk";
 
 declare module "aws-sdk" {
   const mockUpload: jest.Mock;
 }
 
 describe("Upload assets tests", () => {
-  it("uploads any contents inside build directory specified in BUILD_ID", async () => {
+  beforeEach(async () => {
     await uploadStaticAssets({
       bucketName: "test-bucket-name",
       nextAppDir: path.join(__dirname, "./fixtures/basic-next-app")
     });
+  });
 
-    const mockedBodyStream = new stream.Readable();
-    jest
-      .spyOn(fse, "readFile")
-      .mockResolvedValue(Promise.resolve(mockedBodyStream));
-
-    const expectedCacheControl = "public, max-age=31536000, immutable";
+  it("uploads any contents inside build directory specified in BUILD_ID", async () => {
+    expect(mockUpload).toBeCalledTimes(2);
 
     expect(mockUpload).toBeCalledWith({
       Bucket: "test-bucket-name",
-      Key: "_next/static/a_test_build_id/testFileOne.js",
-      Body: mockedBodyStream,
+      Key: "_next/static/a_test_build_id/two.js",
+      Body: expect.any(Buffer),
       ContentType: "application/javascript",
-      CacheControl: expectedCacheControl
+      CacheControl: IMMUTABLE_CACHE_CONTROL_HEADER
     });
 
     expect(mockUpload).toBeCalledWith({
       Bucket: "test-bucket-name",
-      Key: "_next/static/a_test_build_id/subdir/testFileTwo.js",
-      Body: mockedBodyStream,
-      ContentType: "application/javascript",
-      CacheControl: expectedCacheControl
+      Key: "_next/static/a_test_build_id/css/one.css",
+      Body: expect.any(Buffer),
+      ContentType: "text/css",
+      CacheControl: IMMUTABLE_CACHE_CONTROL_HEADER
+    });
+  });
+
+  it("uploads prerendered HTML pages specified in pages manifest", async () => {
+    expect(mockUpload).toBeCalledWith({
+      Key: "static-pages/todos/terms.html",
+      ContentType: "text/html",
+      CacheControl: undefined
+    });
+
+    expect(mockUpload).toBeCalledWith({
+      Key: "static-pages/todos/terms/[section].html",
+      Body: expect.any(Buffer),
+      ContentType: "text/html",
+      CacheControl: undefined
     });
   });
 });