Replace Webpack with Vite (#4765)

Co-authored-by: Tom Moor <tom@getoutline.com>
Co-authored-by: Vio <vio@beanon.com>

server/utils/prefetchTags.tsx

@@ -1,8 +1,9 @@
-import fs from "fs";
-import path from "path";
 import * as React from "react";
 import ReactDOMServer from "react-dom/server";
 import env from "@server/env";
+import readManifestFile, { ManifestStructure } from "./readManifestFile";
+
+const isProduction = env.ENVIRONMENT === "production";
 
 const prefetchTags = [];
 
@@ -16,45 +17,47 @@ if (process.env.AWS_S3_UPLOAD_BUCKET_URL) {
   );
 }
 
-let manifestData = {};
+if (isProduction) {
+  const manifest = readManifestFile();
 
-try {
-  const manifest = fs.readFileSync(
-    path.join(__dirname, "../../app/manifest.json"),
-    "utf8"
-  );
-  manifestData = JSON.parse(manifest);
-} catch (err) {
-  // no-op
-}
+  const returnFileAndImportsFromManifest = (
+    manifest: ManifestStructure,
+    file: string
+  ): string[] => {
+    return [
+      manifest[file]["file"],
+      ...manifest[file]["imports"].map((entry: string) => {
+        return manifest[entry]["file"];
+      }),
+    ];
+  };
 
-Object.values(manifestData).forEach((filename) => {
-  if (typeof filename !== "string") {
-    return;
-  }
-  if (!env.CDN_URL) {
-    return;
-  }
-
-  if (filename.endsWith(".js")) {
-    //  Preload resources you have high-confidence will be used in the current
-    // page.Prefetch resources likely to be used for future navigations
-    const shouldPreload =
-      filename.includes("/main") ||
-      filename.includes("/runtime") ||
-      filename.includes("preload-");
-
-    if (shouldPreload) {
+  Array.from([
+    ...returnFileAndImportsFromManifest(manifest, "app/index.tsx"),
+    ...returnFileAndImportsFromManifest(manifest, "app/editor/index.tsx"),
+  ]).forEach((file) => {
+    if (file.endsWith(".js")) {
       prefetchTags.push(
-        <link rel="preload" href={filename} key={filename} as="script" />
+        <link
+          rel="prefetch"
+          href={`${env.CDN_URL || ""}/static/${file}`}
+          key={file}
+          as="script"
+          crossOrigin="anonymous"
+        />
+      );
+    } else if (file.endsWith(".css")) {
+      prefetchTags.push(
+        <link
+          rel="prefetch"
+          href={`${env.CDN_URL || ""}/static/${file}`}
+          key={file}
+          as="style"
+          crossOrigin="anonymous"
+        />
       );
     }
-  } else if (filename.endsWith(".css")) {
-    prefetchTags.push(
-      <link rel="prefetch" href={filename} key={filename} as="style" />
-    );
-  }
-});
+  });
+}
 
-// @ts-expect-error ts-migrate(2345) FIXME: Argument of type 'Element[]' is not assignable to ... Remove this comment to see the full error message
-export default ReactDOMServer.renderToString(prefetchTags);
+export default ReactDOMServer.renderToString(<>{prefetchTags}</>);

server/utils/readManifestFile.ts

@@ -0,0 +1,28 @@
+import fs from "fs";
+import path from "path";
+
+export type Chunk = {
+  file: string;
+  src: string;
+  isEntry?: boolean;
+};
+
+export type ManifestStructure = Record<string, Chunk>;
+
+export const readManifestFile = (file = "./build/app/manifest.json") => {
+  const absoluteFilePath = path.resolve(file);
+
+  let manifest = "{}";
+
+  try {
+    manifest = fs.readFileSync(absoluteFilePath, "utf8") as string;
+  } catch (err) {
+    console.warn(
+      `Can not find ${absoluteFilePath}. Try executing "yarn vite:build" before running in production mode.`
+    );
+  }
+
+  return JSON.parse(manifest) as ManifestStructure;
+};
+
+export default readManifestFile;

server/utils/startup.ts

@@ -50,10 +50,11 @@ export async function checkMigrations() {
     return;
   }
 
+  const isProduction = env.ENVIRONMENT === "production";
   const teams = await Team.count();
   const providers = await AuthenticationProvider.count();
 
-  if (teams && !providers) {
+  if (isProduction && teams && !providers) {
     Logger.warn(`
 This version of Outline cannot start until a data migration is complete.
 Backup your database, run the database migrations and the following script: