@wasp.sh/wasp-cli-darwin-arm64-unknown 0.22.0-rc1 → 0.22.0

package/data/Generator/templates/sdk/wasp/api/index.ts

@@ -1,4 +1,4 @@
-import axios, { type AxiosInstance, type AxiosError } from 'axios'
+import axios, { type AxiosError, type AxiosInstance } from 'axios'
 
 import { config } from 'wasp/client'
 import { storage } from 'wasp/core/storage'
@@ -75,20 +75,24 @@ api.interceptors.response.use(undefined, (error) => {
   return Promise.reject(error)
 })
 
-// This handler will run on other tabs (not the active one calling API functions),
-// and will ensure they know about auth session ID changes.
-// Ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
-// "Note: This won't work on the same page that is making the changes — it is really a way
-// for other pages on the domain using the storage to sync any changes that are made."
-window.addEventListener('storage', (event) => {
-  if (event.key === storage.getPrefixedKey(WASP_APP_AUTH_SESSION_ID_NAME)) {
-    if (!!event.newValue) {
-      apiEventsEmitter.emit('sessionId.set')
-    } else {
-      apiEventsEmitter.emit('sessionId.clear')
+// This makes sure that the following handler won't try to run in a non-browser
+// environment (e.g. during SSR), where `window` is not defined.
+if (typeof window !== 'undefined') {
+  // This handler will run on other tabs (not the active one calling API functions),
+  // and will ensure they know about auth session ID changes.
+  // Ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
+  // "Note: This won't work on the same page that is making the changes — it is really a way
+  // for other pages on the domain using the storage to sync any changes that are made."
+  window.addEventListener('storage', (event) => {
+    if (event.key === storage.getPrefixedKey(WASP_APP_AUTH_SESSION_ID_NAME)) {
+      if (!!event.newValue) {
+        apiEventsEmitter.emit('sessionId.set')
+      } else {
+        apiEventsEmitter.emit('sessionId.clear')
+      }
     }
-  }
-})
+  })
+}
 
 // PRIVATE API (sdk)
 /**

package/data/Generator/templates/sdk/wasp/client/app/components/WaspApp.tsx

@@ -1,50 +1,25 @@
 {{={= =}=}}
-import * as React from 'react'
+import { use, type ReactNode } from 'react'
 import { QueryClientProvider } from '@tanstack/react-query'
 
-import { getRouter } from '../router/router'
 import { queryClientInitialized } from '../../operations/index'
 
 {=# areWebSocketsUsed =}
 import { WebSocketProvider } from '../../webSocket/WebSocketProvider'
 {=/ areWebSocketsUsed =}
 
-export type RouteMapping = Record<
-  string,
-  | { lazy: () => Promise<{ Component: React.ComponentType }> }
-  | { Component: React.ComponentType }
->;
-
-export type WaspAppProps = {
-  rootElement?: React.ReactNode;
-  routesMapping: RouteMapping;
-}
-
-export function WaspApp({ rootElement, routesMapping }: Required<WaspAppProps>) {
-  const [queryClient, setQueryClient] = React.useState<any>(null)
-
-  React.useEffect(() => {
-    queryClientInitialized.then(setQueryClient)
-  }, [])
-
-  if (!queryClient) {
-    return null
-  }
-
-  const router = getRouter({
-    rootElement,
-    routesMapping,
-  })
+export function WaspApp({ children }: { children: ReactNode }) {
+  const queryClient = use(queryClientInitialized)
 
   return (
     <QueryClientProvider client={queryClient}>
       {=# areWebSocketsUsed =}
       <WebSocketProvider>
-        {router}
+        {children}
       </WebSocketProvider>
       {=/ areWebSocketsUsed =}
       {=^ areWebSocketsUsed =}
-      {router}
+      {children}
       {=/ areWebSocketsUsed =}
     </QueryClientProvider>
   )

package/data/Generator/templates/sdk/wasp/client/app/hooks/useIsClient.ts

@@ -0,0 +1,22 @@
+import { useSyncExternalStore } from "react"
+
+/**
+ * Returns `true` if the component is running on the client (browser) and
+ * `false` if on the server (SSR). Doesn't cause hydration mismatches, so it is
+ * safe to use for conditional rendering.
+ */
+export function useIsClient() {
+  // We use `useSyncExternalStore` to get a value that is `true` on the client
+  // and `false` on the server, while avoiding hydration mismatches. It looks
+  // like a hack, but it conforms to the semantics of `useSyncExternalStore`,
+  // with *the environment* being the "external store" in this case. We just
+  // don't have any real subscription logic, since the value is static.
+  return useSyncExternalStore(emptySubscribe, getClientValue, getServerValue)
+}
+
+// These functions are just to satisfy the API of `useSyncExternalStore` in
+// `useIsClient`, and defined outside the hook so they are stable references.
+function emptySubscribe() { return emptyUnsubscribe }
+function emptyUnsubscribe() {}
+function getClientValue() { return true }
+function getServerValue() { return false }

package/data/Generator/templates/sdk/wasp/client/app/index.tsx

@@ -1,24 +1,6 @@
 {{={= =}=}}
-import { Outlet } from 'react-router'
-import { initializeQueryClient } from '../operations'
-import { WaspApp, type WaspAppProps } from './components/WaspApp'
-
-const DefaultRootComponent = () => <Outlet />
-
-let isAppInitialized = false
-
 // PRIVATE API (web-app)
-export function getWaspApp({
-  rootElement = <DefaultRootComponent />,
-  routesMapping,
-}: WaspAppProps): React.ReactNode {
-  if (!isAppInitialized) {
-    initializeQueryClient()
-    isAppInitialized = true
-  }
-
-  return <WaspApp rootElement={rootElement} routesMapping={routesMapping} />
-}
+export { WaspApp } from './components/WaspApp'
 
 {=# isAuthEnabled =}
 // PRIVATE API (web-app)

package/data/Generator/templates/sdk/wasp/client/app/layout.tsx

@@ -0,0 +1,92 @@
+{{={= =}=}}
+import { StrictMode, type ReactNode } from "react";
+import { useIsClient } from "./hooks/useIsClient.js"
+
+export function Layout({
+  children,
+  isFallbackPage = false,
+  clientEntrySrc,
+}: {
+  children?: ReactNode;
+  isFallbackPage?: boolean;
+  clientEntrySrc?: string;
+}) {
+  const isClient = useIsClient()
+
+  /*
+    From the Vite SSR plugin, we inherit the concept of a "prerendered page" vs.
+    a "fallback page".
+    - A prerendered page is a page that is rendered on the server, and then
+      hydrated on the client.
+    - A fallback page is a page which only prerenders the common HTML structure
+      on the server, and then renders the actual page content on the client.
+
+    To use an analogy, a fallback page is a pluripotent stem cell that can turn
+    into any page in the client; while a prerendered page is already specialized
+    and can only render its specific content.
+
+    So, if we are prerendering a fallback page, we want to avoid rendering the
+    actual page content, so that it can turn into anything. If we're
+    prerendering a non-fallback page, we'll give it its content.
+
+    But, if we're already in the client, we always want to render the page
+    content. Whether prerendered as a fallback or not, now it's showtime, so we
+    must show the user the content.
+
+    Thus, we end up with the line below:
+  */
+  const shouldRenderChildren = isClient || !isFallbackPage
+
+  return (
+    <StrictMode>
+      <html lang="en">
+        <head>
+          <meta charSet="utf-8" />
+          <meta
+            name="viewport"
+            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
+          />
+
+          {=& head =}
+
+          <title>{= title =}</title>
+        </head>
+        <body>
+          <noscript>You need to enable JavaScript to run this app.</noscript>
+
+          {
+            // We don't really need to wrap the app in a div nor name it "root",
+            // but we keep it for backwards compatibility with older Wasp
+            // versions.
+          }
+          <div id="root">
+              {shouldRenderChildren ? children : null}
+          </div>
+
+          {
+            // We pass that argument in SSR builds and not in client builds.
+            // This would usually cause a hydration mismatch, but React has an
+            // exception for `<script>` tags, for this specific usecase, so it
+            // will work fine.
+            clientEntrySrc ? (
+              // We'd usually use React prerender's `bootstrapModules` options for
+              // injecting this script, but it would also add a `<link
+              // rel="modulepreload">` tag that Vite doesn't handle correctly. So
+              // we just add the script ourselves in the regular way.
+              //
+              // https://react.dev/reference/react-dom/static/prerenderToNodeStream
+              <script
+                type="module"
+                src={clientEntrySrc}
+                // We make it `async` to decouple the tag's position from its
+                // execution phase. This way Vite can move it anywhere in the
+                // document to optimize loading performance.
+                async
+              />
+            ) : null
+          }
+        </body>
+      </html>
+    </StrictMode>
+  );
+}

package/data/Generator/templates/sdk/wasp/client/app/{router/router.tsx → router.tsx}

@@ -1,23 +1,28 @@
 {{={= =}=}}
-import * as React from 'react'
-import { createBrowserRouter, RouterProvider } from 'react-router'
+import type { ReactNode, ComponentType } from 'react'
+import { createBrowserRouter, RouterProvider, type RouteObject } from 'react-router'
 
 {=# isExternalAuthEnabled =}
-import { OAuthCallbackPage } from "../pages/OAuthCallback"
+import { OAuthCallbackPage } from "./pages/OAuthCallback"
 {=/ isExternalAuthEnabled =}
 
-import { DefaultRootErrorBoundary } from '../components/DefaultRootErrorBoundary'
+import { DefaultRootErrorBoundary } from './components/DefaultRootErrorBoundary'
 
-import type { RouteMapping } from '../components/WaspApp'
-import { routes } from '../../router/index'
+import { routes } from '../router/index'
 
-export function getRouter({
+type RouteMapping = Record<
+  string,
+  | { lazy: () => Promise<{ Component: ComponentType }> }
+  | { Component: ComponentType }
+>;
+
+export function getRouteObjects({
   routesMapping,
   rootElement,
 }: {
   routesMapping: RouteMapping,
-  rootElement: React.ReactNode,
-}) {
+  rootElement: ReactNode,
+}): RouteObject[] {
   const waspDefinedRoutes = [
     {=# isExternalAuthEnabled =}
     {
@@ -33,7 +38,7 @@ export function getRouter({
     }
   })
 
-  const browserRouter = createBrowserRouter([{
+  return [{
     path: '/',
     element: rootElement,
     ErrorBoundary: DefaultRootErrorBoundary,
@@ -41,7 +46,18 @@ export function getRouter({
       ...waspDefinedRoutes,
       ...userDefinedRoutes,
     ],
-  }], {
+  }]
+}
+
+export function getRouter({
+  routesMapping,
+  rootElement,
+}: {
+  routesMapping: RouteMapping,
+  rootElement: ReactNode,
+}) {
+  const routeObjects = getRouteObjects({ routesMapping, rootElement })
+  const browserRouter = createBrowserRouter(routeObjects, {
     basename: '{= baseDir =}',
   })
   return <RouterProvider router={browserRouter} />;

package/data/Generator/templates/sdk/wasp/client/vite/plugins/virtualModules.ts

@@ -1,14 +1,16 @@
 {{={= =}=}}
 import { type Plugin } from "vite";
 import {
-  getIndexTsxContent,
+  getClientEntryTsxContent,
   getRoutesTsxContent,
+  getSsrEntryTsxContent,
 } from "../virtual-files/index.js";
 import { makeVirtualFilesResolver, type VirtualFiles } from "../virtual-files/resolver.js";
 
 const resolveVirtualFiles = makeVirtualFilesResolver([
-  { id: "{= clientEntryPointPath =}", load: getIndexTsxContent },
+  { id: "{= clientEntryPointPath =}", load: getClientEntryTsxContent },
   { id: "{= routesEntryPointPath =}", load: getRoutesTsxContent },
+  { id: "{= ssrEntryPointPath =}", load: getSsrEntryTsxContent },
 ]);
 
 export function waspVirtualModules(): Plugin {

package/data/Generator/templates/sdk/wasp/client/vite/plugins/wasp.ts

@@ -1,11 +1,11 @@
+{{={= =}=}}
 import { type PluginOption } from "vite";
 import react, { type Options as ReactOptions } from "@vitejs/plugin-react";
+import ssr from "@wasp.sh/lib-vite-ssr";
 import { validateEnv } from "./validateEnv.js";
 import { envFile } from "./envFile.js";
 import { detectServerImports } from "./detectServerImports.js";
 import { waspVirtualModules } from "./virtualModules.js";
-import { waspHtmlDev } from "./html/dev.js";
-import { waspHtmlBuild } from "./html/build.js";
 import { typescriptCheck } from "./typescriptCheck.js";
 import { waspConfig } from "./waspConfig.js";
 
@@ -28,9 +28,13 @@ export function wasp(options?: WaspPluginOptions): PluginOption {
      * Plugins running after core Vite plugins.
      */
     typescriptCheck(),
-    waspHtmlDev(),
-    waspHtmlBuild(),
     validateEnv(),
     react(options?.reactOptions),
+    ssr({
+      clientEntrySrc: "{= clientEntryPointPath =}",
+      ssrEntrySrc: "{= ssrEntryPointPath =}",
+      ssrPaths: [],
+      ssrFallbackFile: "{= ssrFallbackFile =}",
+    }),
   ];
 }

package/data/Generator/templates/sdk/wasp/client/vite/virtual-files/files/client-entry.tsx

@@ -0,0 +1,33 @@
+{{={= =}=}}
+import { startTransition } from "react";
+import { hydrateRoot } from "react-dom/client";
+import { createBrowserRouter, type HydrationState } from "react-router";
+import { RouterProvider } from "react-router/dom";
+import { Layout } from "wasp/client/app/layout";
+import { WaspApp } from "wasp/client/app";
+
+{=& routeObjects.importStatement =}
+
+// React Router will put hydration data on this property of the `window` object.
+// https://reactrouter.com/7.13.1/start/data/custom#4-hydrate-in-the-browser
+const hydrationData = (window as any).__staticRouterHydrationData as HydrationState | undefined;
+
+const router = createBrowserRouter({= routeObjects.importIdentifier =}, {
+  basename: "{= baseDir =}",
+  hydrationData,
+})
+
+function App({ isFallbackPage }: { isFallbackPage: boolean }) {
+  return (
+    <Layout isFallbackPage={isFallbackPage}>
+      <WaspApp>
+        <RouterProvider router={router} />
+      </WaspApp>
+    </Layout>
+  );
+}
+
+startTransition(() => {
+  const isFallbackpage = hydrationData == null;
+  hydrateRoot(document, <App isFallbackPage={isFallbackpage} />);
+});

package/data/Generator/templates/sdk/wasp/client/vite/virtual-files/files/routes.tsx

@@ -1,15 +1,26 @@
 {{={= =}=}}
-// @ts-nocheck
+import { getRouteObjects } from "wasp/client/app/router";
+import { initializeQueryClient } from "wasp/client/operations";
+
 {=# isAuthEnabled =}
 import { createAuthRequiredPage } from "wasp/client/app"
 {=/ isAuthEnabled =}
+
+{=# rootComponent.isDefined =}
+{=& rootComponent.importStatement =}
+{=/ rootComponent.isDefined =}
+
+{=# setupFn.isDefined =}
+{=& setupFn.importStatement =}
+{=/ setupFn.isDefined =}
+
 {=# routes =}
 {=^ isLazy =}
 {=& import.importStatement =}
 {=/ isLazy =}
 {=/ routes =}
 
-export const routesMapping = {
+const routesMapping = {
   {=# routes =}
   {=# isLazy =}
   {= name =}: { lazy: async () => {
@@ -34,3 +45,22 @@ export const routesMapping = {
   {=/ isLazy =}
   {=/ routes =}
 } as const;
+
+{=# setupFn.isDefined =}
+await {= setupFn.importIdentifier =}()
+{=/ setupFn.isDefined =}
+
+initializeQueryClient()
+
+const rootElement =
+  {=# rootComponent.isDefined =}
+  <{= rootComponent.importIdentifier =} />
+  {=/ rootComponent.isDefined =}
+  {=^ rootComponent.isDefined =}
+  undefined
+  {=/ rootComponent.isDefined =}
+
+export const routeObjects = getRouteObjects({
+  routesMapping,
+  rootElement,
+})

package/data/Generator/templates/sdk/wasp/client/vite/virtual-files/files/ssr-entry.tsx

@@ -0,0 +1,64 @@
+{{={= =}=}}
+import type { PrerenderContext, PrerenderFn } from "@wasp.sh/lib-vite-ssr/types";
+import * as streamConsumers from "node:stream/consumers";
+import assert from "node:assert/strict";
+import type { ReactNode } from "react";
+import { prerenderToNodeStream as reactPrerender } from "react-dom/static";
+import {
+  createStaticHandler,
+  createStaticRouter,
+  RouterProvider,
+} from "react-router";
+import { Layout } from "wasp/client/app/layout";
+import { WaspApp } from "wasp/client/app";
+
+{=& routeObjects.importStatement =}
+
+const FALLBACK_FILE = "{= ssrFallbackFile =}";
+
+const prerenderApp: PrerenderFn = async (route, ctx) => {
+  const isFallbackPage = route === FALLBACK_FILE;
+
+  if (isFallbackPage) {
+     return await appToHtml({ isFallbackPage: true, children: null }, ctx);
+  } else {
+    const { query, dataRoutes } = createStaticHandler({= routeObjects.importIdentifier =}, {
+      basename: "{= baseDir =}",
+    });
+
+    const req = new Request(new URL(route, "http://localhost"));
+
+    const context = await query(req);
+    assert (!(context instanceof Response), "Expected no redirect responses from static handler");
+
+    const router = createStaticRouter(dataRoutes, context);
+
+    return await appToHtml(
+      { isFallbackPage: false, children: <RouterProvider router={router} /> },
+      ctx,
+    );
+  }
+}
+
+export default prerenderApp;
+
+async function appToHtml(
+  {
+    isFallbackPage,
+    children,
+  }: { isFallbackPage: boolean; children?: ReactNode },
+  { clientEntrySrc }: PrerenderContext,
+) {
+  const app = (
+    <Layout isFallbackPage={isFallbackPage} clientEntrySrc={clientEntrySrc}>
+      <WaspApp>
+        {children}
+      </WaspApp>
+    </Layout>
+  );
+
+  const html = await reactPrerender(app)
+    .then((result) => streamConsumers.text(result.prelude))
+
+  return html;
+};

package/data/Generator/templates/sdk/wasp/client/vite/virtual-files/index.ts

@@ -1,15 +1,15 @@
 import fs from "node:fs";
 
-export function getIndexTsxContent(): string {
-  return getFileContentFromRelativePath("./files/index.tsx");
+export function getClientEntryTsxContent(): string {
+  return getFileContentFromRelativePath("./files/client-entry.tsx");
 }
 
 export function getRoutesTsxContent(): string {
   return getFileContentFromRelativePath("./files/routes.tsx");
 }
 
-export function getIndexHtmlContent(): string {
-  return getFileContentFromRelativePath("./files/index.html");
+export function getSsrEntryTsxContent(): string {
+  return getFileContentFromRelativePath("./files/ssr-entry.tsx");
 }
 
 function getFileContentFromRelativePath(relativePath: string): string {

package/data/Generator/templates/sdk/wasp/client/webSocket/WebSocketProvider.tsx

@@ -20,7 +20,7 @@ export const socket: Socket<ServerToClientEvents, ClientToServerEvents> = io(
   config.apiUrl,
   {
     transports: ['websocket'],
-    autoConnect: {= autoConnect =},
+    autoConnect: {= autoConnect =} && !import.meta.env.SSR,
   }
 )
 

package/data/Generator/templates/sdk/wasp/core/storage.ts

@@ -1,50 +1,73 @@
 export type DataStore = {
-  getPrefixedKey(key: string): string
-  set(key: string, value: unknown): void
-  get(key: string): unknown
-  remove(key: string): void
-  clear(): void
+  getPrefixedKey(key: string): string;
+  set(key: string, value: unknown): void;
+  get(key: string): unknown;
+  remove(key: string): void;
+  clear(): void;
+};
+
+const createStorage =
+  typeof window === "undefined" || !window.localStorage
+    ? createMemoryDataStore
+    : createLocalStorageDataStore
+
+export const storage = createStorage("wasp");
+
+function createMemoryDataStore(prefix: string): DataStore {
+  const store: Map<string, unknown> = new Map();
+
+  function getPrefixedKey(key: string): string {
+    return `${prefix}:${key}`;
+  }
+
+  return {
+    getPrefixedKey,
+    set(key, value) {
+      store.set(getPrefixedKey(key), value);
+    },
+    get(key) {
+      return store.get(getPrefixedKey(key));
+    },
+    remove(key) {
+      store.delete(getPrefixedKey(key));
+    },
+    clear() {
+      store.clear();
+    },
+  };
 }
 
 function createLocalStorageDataStore(prefix: string): DataStore {
+  if (!window.localStorage) {
+    throw new Error("Local storage is not available.");
+  }
+
   function getPrefixedKey(key: string): string {
-    return `${prefix}:${key}`
+    return `${prefix}:${key}`;
   }
 
   return {
     getPrefixedKey,
     set(key, value) {
-      ensureLocalStorageIsAvailable()
-      localStorage.setItem(getPrefixedKey(key), JSON.stringify(value))
+      localStorage.setItem(getPrefixedKey(key), JSON.stringify(value));
     },
     get(key) {
-      ensureLocalStorageIsAvailable()
-      const value = localStorage.getItem(getPrefixedKey(key))
+      const value = localStorage.getItem(getPrefixedKey(key));
       try {
-        return value ? JSON.parse(value) : undefined
+        return value ? JSON.parse(value) : undefined;
       } catch (e: any) {
-        return undefined
+        return undefined;
       }
     },
     remove(key) {
-      ensureLocalStorageIsAvailable()
-      localStorage.removeItem(getPrefixedKey(key))
+      localStorage.removeItem(getPrefixedKey(key));
     },
     clear() {
-      ensureLocalStorageIsAvailable()
       Object.keys(localStorage).forEach((key) => {
         if (key.startsWith(prefix)) {
-          localStorage.removeItem(key)
+          localStorage.removeItem(key);
         }
-      })
+      });
     },
-  }
-}
-
-export const storage = createLocalStorageDataStore('wasp')
-
-function ensureLocalStorageIsAvailable(): void {
-  if (!window.localStorage) {
-    throw new Error('Local storage is not available.')
-  }
+  };
 }

package/data/Generator/templates/sdk/wasp/package.json

@@ -121,6 +121,8 @@
       "./client/env/schema": "./dist/client/env/schema.js",
       {=! Private: [client] =}
       "./client/app": "./dist/client/app/index.jsx",
+      "./client/app/layout": "./dist/client/app/layout.jsx",
+      "./client/app/router": "./dist/client/app/router.jsx",
       {=! Private: [client] =}
       "./client/vite": "./dist/client/vite/index.js",
 

package/package.json

@@ -1 +1 @@
-{"type":"module","repository":{"type":"git","url":"git+https://github.com/wasp-lang/wasp.git"},"homepage":"https://wasp.sh/","bugs":{"url":"https://github.com/wasp-lang/wasp/issues"},"author":{"name":"Wasp, Inc.","url":"https://wasp.sh"},"funding":"https://github.com/wasp-lang/wasp?sponsor=1","license":"MIT","engines":{"node":">=22.22.2"},"exports":"./main.js","name":"@wasp.sh/wasp-cli-darwin-arm64-unknown","version":"0.22.0-rc1","os":["darwin"],"cpu":["arm64"],"bin":{"__internal_wasp-darwin-arm64-unknown":"wasp-bin"}}
+{"type":"module","repository":{"type":"git","url":"git+https://github.com/wasp-lang/wasp.git"},"homepage":"https://wasp.sh/","bugs":{"url":"https://github.com/wasp-lang/wasp/issues"},"author":{"name":"Wasp, Inc.","url":"https://wasp.sh"},"funding":"https://github.com/wasp-lang/wasp?sponsor=1","license":"MIT","engines":{"node":">=22.22.2"},"exports":"./main.js","name":"@wasp.sh/wasp-cli-darwin-arm64-unknown","version":"0.22.0","os":["darwin"],"cpu":["arm64"],"bin":{"__internal_wasp-darwin-arm64-unknown":"wasp-bin"}}

package/data/Generator/templates/sdk/wasp/client/vite/plugins/html/build.ts

@@ -1,38 +0,0 @@
-import type { Plugin } from "vite";
-import { getIndexHtmlContent } from "../../virtual-files/index.js";
-import { makeVirtualFilesResolver, type VirtualFiles } from "../../virtual-files/resolver.js";
-
-const INDEX_HTML_FILE_NAME = "index.html";
-
-const resolveVirtualFiles = makeVirtualFilesResolver([
-  { id: INDEX_HTML_FILE_NAME, load: getIndexHtmlContent },
-]);
-
-export function waspHtmlBuild(): Plugin {
-  let virtualFiles!: VirtualFiles;
-
-  return {
-    name: "wasp:html-build",
-    apply: "build",
-    config() {
-      return {
-        build: {
-          rollupOptions: {
-            // Vite tries to find the entry file on disk (which doesn't exist)
-            // so the build fails. We tell Vite/Rollup to use `index.html` even
-            // though it doesn't exist on the disk.
-            input: INDEX_HTML_FILE_NAME,
-          },
-        },
-      };
-    },
-    configResolved(config) {
-      virtualFiles = resolveVirtualFiles(config.root);
-    },
-    resolveId: (id) => virtualFiles.ids.get(id),
-    load(id) {
-      const loader = virtualFiles.loaders.get(id);
-      return loader?.();
-    },
-  };
-}

package/data/Generator/templates/sdk/wasp/client/vite/plugins/html/dev.ts

@@ -1,35 +0,0 @@
-import type { Plugin } from "vite";
-import { getIndexHtmlContent } from "../../virtual-files/index.js";
-
-export function waspHtmlDev(): Plugin {
-  return {
-    name: "wasp:html-dev",
-    apply: "serve",
-    configureServer(server) {
-      return () => {
-        // Post middleware: runs after Vite's built-in SPA fallback
-        // middleware which resolves routes to `/index.html` which
-        // we pick up here and return the virtual `index.html` content.
-        server.middlewares.use(async (req, res, next) => {
-          if (req.url === "/" || req.url === `/index.html`) {
-            try {
-              const html = getIndexHtmlContent();
-              const transformedHtml = await server.transformIndexHtml(
-                req.url,
-                html
-              );
-
-              res.setHeader("Content-Type", "text/html");
-              res.end(transformedHtml);
-              return;
-            } catch (e) {
-              return next(e);
-            }
-          }
-
-          next();
-        });
-      };
-    },
-  };
-}

package/data/Generator/templates/sdk/wasp/client/vite/virtual-files/files/index.html

@@ -1,21 +0,0 @@
-{{={= =}=}}
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <meta
-            name="viewport"
-            content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
-        />
-
-        {=& head =}
-
-        <title>{= title =}</title>
-    </head>
-
-    <body>
-        <noscript>You need to enable JavaScript to run this app.</noscript>
-        <div id="root"></div>
-        <script type="module" src="{= clientEntryPointPath =}"></script>
-    </body>
-</html>

package/data/Generator/templates/sdk/wasp/client/vite/virtual-files/files/index.tsx

@@ -1,34 +0,0 @@
-{{={= =}=}}
-// @ts-nocheck
-import * as React from "react";
-import * as ReactDOM from "react-dom/client";
-import { getWaspApp } from "wasp/client/app";
-{=!
-  // NOTE: We are not inlining routes mapping into this file becuase once we
-  // allow users to override the `index.tsx` entry point they can use the existing
-  // routes mapping.
-=}
-{=& routesMapping.importStatement =}
-
-{=# rootComponent.isDefined =}
-{=& rootComponent.importStatement =}
-{=/ rootComponent.isDefined =}
-
-{=# setupFn.isDefined =}
-{=& setupFn.importStatement =}
-{=/ setupFn.isDefined =}
-
-{=# setupFn.isDefined =}
-await {= setupFn.importIdentifier =}()
-{=/ setupFn.isDefined =}
-
-const app = getWaspApp({
-  {=# rootComponent.isDefined =}
-  rootElement: <{= rootComponent.importIdentifier =} />,
-  {=/ rootComponent.isDefined =}
-  routesMapping: {= routesMapping.importIdentifier =},
-});
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>{app}</React.StrictMode>,
-);