Allow customising the Vite config

waspc/data/Generator/templates/react-app/tsconfig.node.json

@@ -6,5 +6,5 @@
     "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "./src/ext-src/vite.config.ts"]
 }

waspc/data/Generator/templates/react-app/vite.config.ts

@@ -1,21 +1,34 @@
+{{={= =}=}}
 /// <reference types="vitest" />
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react-swc'
+import { mergeConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
 
-// https://vitejs.dev/config/
-export default defineConfig({
+{=# isCustomViteConfigUsed =}
+import _waspUserProvidedConfig from "./src/ext-src/vite.config";
+{=/ isCustomViteConfigUsed =}
+{=^ isCustomViteConfigUsed =}
+const _waspUserProvidedConfig = {};
+{=/ isCustomViteConfigUsed =}
+
+const defaultViteConfig = {
   plugins: [react()],
   server: {
     port: 3000,
-    host: '0.0.0.0',
+    host: "0.0.0.0",
     open: true,
   },
-  envPrefix: 'REACT_APP_',
+  envPrefix: "REACT_APP_",
   build: {
-    outDir: 'build',
+    outDir: "build",
   },
   test: {
-    environment: 'jsdom',
-    setupFiles: ['./src/test/vitest/setup.ts'],
+    environment: "jsdom",
+    setupFiles: ["./src/test/vitest/setup.ts"],
   },
-})
+};
+
+// https://vitejs.dev/config/
+export default mergeConfig(
+  defaultViteConfig,
+  _waspUserProvidedConfig
+);

waspc/examples/custom-vite-demo/.gitignore

@@ -0,0 +1,11 @@
+/.wasp/
+
+# We ignore env files recognized and used by Wasp.
+.env.server
+.env.client
+
+# To be extra safe, we by default ignore any files with `.env` extension in them.
+# If this is too agressive for you, consider allowing specific files with `!` operator,
+# or modify/delete these two lines.
+*.env
+*.env.*

waspc/examples/custom-vite-demo/.wasproot

@@ -0,0 +1 @@
+File marking the root of Wasp project.

waspc/examples/custom-vite-demo/main.wasp

@@ -0,0 +1,11 @@
+app customViteDemo {
+  wasp: {
+    version: "^0.11.5"
+  },
+  title: "custom-vite-demo"
+}
+
+route RootRoute { path: "/", to: MainPage }
+page MainPage {
+  component: import Main from "@client/MainPage.jsx"
+}

waspc/examples/custom-vite-demo/src/.waspignore

@@ -0,0 +1,3 @@
+# Ignore editor tmp files
+**/*~
+**/#*#

waspc/examples/custom-vite-demo/src/client/Main.css

@@ -0,0 +1,89 @@
+* {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+}
+
+.container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+main {
+  padding: 5rem 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+main p {
+  font-size: 1.2rem;
+}
+
+.logo {
+  margin-bottom: 2rem;
+}
+
+.logo img {
+  max-height: 200px;
+}
+
+.welcome-title {
+  font-weight: 500;
+}
+
+.welcome-subtitle {
+  font-weight: 400;
+  margin-bottom: 3rem;
+}
+
+.buttons {
+  display: flex;
+  flex-direction: row;
+}
+
+.buttons .button:not(:last-child) {
+  margin-right: 0.5rem;
+}
+
+.button {
+  border-radius: 3px;
+  font-size: 1.2rem;
+  padding: 1rem 2rem;
+  text-align: center;
+  font-weight: 700;
+  text-decoration: none;
+}
+
+.button-filled {
+  border: 2px solid #bf9900;
+  background-color: #bf9900;
+  color: #f4f4f4;
+}
+
+.button-outline {
+  border: 2px solid #8a9cff;
+  color: #8a9cff;
+  background-color: none;
+}
+
+code {
+  border-radius: 5px;
+  padding: 0.2rem;
+  background: #efefef;
+  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
+    Bitstream Vera Sans Mono, Courier New, monospace;
+}

waspc/examples/custom-vite-demo/src/client/MainPage.jsx

@@ -0,0 +1,40 @@
+import waspLogo from './waspLogo.png'
+import './Main.css'
+
+const MainPage = () => {
+  return (
+    <div className="container">
+      <main>
+        <div className="logo">
+          <img src={waspLogo} alt="wasp" />
+        </div>
+
+        <h2 className="welcome-title"> Welcome to Wasp - you just started a new app! </h2>
+        <h3 className="welcome-subtitle">
+          This is page <code>MainPage</code> located at route <code>/</code>.
+          Open <code>src/client/MainPage.jsx</code> to edit it.
+        </h3>
+
+        <div className="buttons">
+          <a
+            className="button button-filled"
+            href="https://wasp-lang.dev/docs/tutorial/create"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            Take the Tutorial
+          </a>
+          <a
+            className="button button-outline"
+            href="https://discord.com/invite/rzdnErX"
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            Chat on Discord
+          </a>
+        </div>
+      </main>
+    </div>
+  )
+}
+export default MainPage

waspc/examples/custom-vite-demo/src/client/tsconfig.json

@@ -0,0 +1,55 @@
+// =============================== IMPORTANT =================================
+//
+// This file is only used for Wasp IDE support. You can change it to configure
+// your IDE checks, but none of these options will affect the TypeScript
+// compiler. Proper TS compiler configuration in Wasp is coming soon :)
+{
+  "compilerOptions": {
+    // JSX support
+    "jsx": "preserve",
+    "strict": true,
+    // Allow default imports.
+    "esModuleInterop": true,
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    // Wasp needs the following settings enable IDE support in your source
+    // files. Editing them might break features like import autocompletion and
+    // definition lookup. Don't change them unless you know what you're doing.
+    //
+    // The relative path to the generated web app's root directory. This must be
+    // set to define the "paths" option.
+    "baseUrl": "../../.wasp/out/web-app/",
+    "paths": {
+      // Resolve all "@wasp" imports to the generated source code.
+      "@wasp/*": [
+        "src/*"
+      ],
+      // Resolve all non-relative imports to the correct node module. Source:
+      // https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
+      "*": [
+        // Start by looking for the definiton inside the node modules root
+        // directory...
+        "node_modules/*",
+        // ... If that fails, try to find it inside definitely-typed type
+        // definitions.
+        "node_modules/@types/*"
+      ]
+    },
+    // Correctly resolve types: https://www.typescriptlang.org/tsconfig#typeRoots
+    "typeRoots": [
+      "../../.wasp/out/web-app/node_modules/@types"
+    ],
+    // Since this TS config is used only for IDE support and not for
+    // compilation, the following directory doesn't exist. We need to specify
+    // it to prevent this error:
+    // https://stackoverflow.com/questions/42609768/typescript-error-cannot-write-file-because-it-would-overwrite-input-file
+    "outDir": "phantom"
+  },
+  "exclude": [
+    "phantom"
+  ],
+}

waspc/examples/custom-vite-demo/src/client/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="../../.wasp/out/web-app/node_modules/vite/client" />

waspc/examples/custom-vite-demo/src/client/vite.config.js

@@ -0,0 +1,6 @@
+export default {
+  server: {
+    open: false,
+    port: 3004,
+  },
+};

waspc/examples/custom-vite-demo/src/server/tsconfig.json

@@ -0,0 +1,48 @@
+// =============================== IMPORTANT =================================
+//
+// This file is only used for Wasp IDE support. You can change it to configure
+// your IDE checks, but none of these options will affect the TypeScript
+// compiler. Proper TS compiler configuration in Wasp is coming soon :)
+{
+  "compilerOptions": {
+    // Allows default imports.
+    "esModuleInterop": true,
+    "allowJs": true,
+    "strict": true,
+    // Wasp needs the following settings enable IDE support in your source
+    // files. Editing them might break features like import autocompletion and
+    // definition lookup. Don't change them unless you know what you're doing.
+    //
+    // The relative path to the generated web app's root directory. This must be
+    // set to define the "paths" option.
+    "baseUrl": "../../.wasp/out/server/",
+    "paths": {
+      // Resolve all "@wasp" imports to the generated source code.
+      "@wasp/*": [
+        "src/*"
+      ],
+      // Resolve all non-relative imports to the correct node module. Source:
+      // https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
+      "*": [
+        // Start by looking for the definiton inside the node modules root
+        // directory...
+        "node_modules/*",
+        // ... If that fails, try to find it inside definitely-typed type
+        // definitions.
+        "node_modules/@types/*"
+      ]
+    },
+    // Correctly resolve types: https://www.typescriptlang.org/tsconfig#typeRoots
+    "typeRoots": [
+      "../../.wasp/out/server/node_modules/@types"
+    ],
+    // Since this TS config is used only for IDE support and not for
+    // compilation, the following directory doesn't exist. We need to specify
+    // it to prevent this error:
+    // https://stackoverflow.com/questions/42609768/typescript-error-cannot-write-file-because-it-would-overwrite-input-file
+    "outDir": "phantom",
+  },
+  "exclude": [
+    "phantom"
+  ],
+}

waspc/examples/custom-vite-demo/src/shared/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    // Enable default imports in TypeScript.
+    "esModuleInterop": true,
+    "allowJs": true,
+    // The following settings enable IDE support in user-provided source files. 
+    // Editing them might break features like import autocompletion and
+    // definition lookup. Don't change them unless you know what you're doing.
+    //
+    // The relative path to the generated web app's root directory. This must be
+    // set to define the "paths" option.
+    "baseUrl": "../../.wasp/out/server/",
+    "paths": {
+      // Resolve all non-relative imports to the correct node module. Source:
+      // https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
+      "*": [
+        // Start by looking for the definiton inside the node modules root
+        // directory...
+        "node_modules/*",
+        // ... If that fails, try to find it inside definitely-typed type
+        // definitions.
+        "node_modules/@types/*"
+      ]
+    },
+    // Correctly resolve types: https://www.typescriptlang.org/tsconfig#typeRoots
+    "typeRoots": ["../../.wasp/out/server/node_modules/@types"]
+  }
+}

waspc/src/Wasp/AppSpec.hs

@@ -75,7 +75,8 @@ data AppSpec = AppSpec
     configFiles :: [ConfigFileRelocator],
     -- | Connection URL for a database used during development. If provided, generated app will
     -- make sure to use it when run in development mode.
-    devDatabaseUrl :: Maybe String
+    devDatabaseUrl :: Maybe String,
+    isCustomViteConfigUsed :: Bool
   }
 
 -- TODO: Make this return "Named" declarations?

waspc/src/Wasp/Generator/WebAppGenerator.hs

@@ -62,15 +62,15 @@ genWebApp spec = do
     [ genFileCopy [relfile|README.md|],
       genFileCopy [relfile|tsconfig.json|],
       genFileCopy [relfile|tsconfig.node.json|],
-      genFileCopy [relfile|vite.config.ts|],
       genFileCopy [relfile|src/test/vitest/setup.ts|],
       genFileCopy [relfile|src/test/vitest/helpers.tsx|],
       genFileCopy [relfile|src/test/index.ts|],
       genFileCopy [relfile|netlify.toml|],
       genPackageJson spec (npmDepsForWasp spec),
       genNpmrc,
       genGitignore,
-      genIndexHtml spec
+      genIndexHtml spec,
+      genViteConfig spec
     ]
     <++> genSrcDir spec
     <++> return extClientCodeFileDrafts
@@ -322,3 +322,9 @@ genWebSocketProvider spec = return $ C.mkTmplFdWithData tmplFile tmplData
     shouldAutoConnect = (autoConnect <$> maybeWebSocket) /= Just (Just False)
     tmplData = object ["autoConnect" .= map toLower (show shouldAutoConnect)]
     tmplFile = C.asTmplFile [relfile|src/webSocket/WebSocketProvider.tsx|]
+
+genViteConfig :: AppSpec -> Generator FileDraft
+genViteConfig spec = return $ C.mkTmplFdWithData tmplFile tmplData
+  where
+    tmplFile = C.asTmplFile [relfile|vite.config.ts|]
+    tmplData = object ["isCustomViteConfigUsed" .= AS.isCustomViteConfigUsed spec]