Adds support for client subdir

waspc/ChangeLog.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.11.7
+
+### 🎉 [New Feature] Serving the Client From a Subdirectory
+
+You can now serve the client from a subdirectory. This is useful if you want to serve the client from a subdirectory of your domain, e.g. `https://example.com/my-app/`.
+
+To do this, you need to add the `client.baseDir` property to your `.wasp` file:
+
+```wasp
+app todoApp {
+  // ...
+  client: {
+    baseDir: "/my-app",
+  },
+}
+```
+
+
 ## 0.11.6
 
 ### 🎉 [New Feature] Enable Customising the Vite Config

waspc/data/Generator/templates/react-app/src/router.tsx

@@ -47,7 +47,7 @@ export const routes = {
 export type Routes = RouteDefinitionsToRoutes<typeof routes>
 
 const router = (
-  <Router>
+  <Router basename="{= baseDir =}">
     {=# rootComponent.isDefined =}
     <{= rootComponent.importIdentifier =}>
     {=/ rootComponent.isDefined =}

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

@@ -12,9 +12,10 @@ const _waspUserProvidedConfig = {};
 {=/ customViteConfig.isDefined =}
 
 const defaultViteConfig = {
+  base: "{= baseDir =}",
   plugins: [react()],
   server: {
-    port: 3000,
+    port: {= defaultClientPort =},
     host: "0.0.0.0",
     open: true,
   },

waspc/data/Generator/templates/server/src/config.js

@@ -32,7 +32,7 @@ const resolvedConfig = merge(config.all, config[env])
 export default resolvedConfig
 
 function getDevelopmentConfig() {
-  const frontendUrl = stripTrailingSlash(process.env.WASP_WEB_CLIENT_URL) || 'http://localhost:3000';
+  const frontendUrl = stripTrailingSlash(process.env.WASP_WEB_CLIENT_URL || '{= defaultClientUrl =}');
   return {
     frontendUrl,
     allowedCORSOrigins: '*',

waspc/examples/subdir-example/.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/subdir-example/.wasproot

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

waspc/examples/subdir-example/main.wasp

@@ -0,0 +1,72 @@
+app subdirExample {
+  wasp: {
+    version: "^0.11.6"
+  },
+  title: "subdir-example",
+  client: {
+    baseDir: "/bla"
+  },
+  auth: {
+    userEntity: User,
+    methods: {
+      email: {
+        fromField: {
+          email: "[email protected]",
+          name: "Mihovil Ilakovac"
+        },
+        emailVerification: {
+          clientRoute: EmailVerificationRoute,
+        },
+        passwordReset: {
+          clientRoute: PasswordResetRoute,
+        }
+      }
+    },
+    onAuthFailedRedirectTo: "/login"
+  },
+  emailSender: {
+    provider: SMTP
+  },
+  db: {
+    system: PostgreSQL
+  }
+}
+
+entity User {=psl
+  id       Int   @id @default(autoincrement())
+  email                     String?       @unique
+  password                  String?
+  isEmailVerified           Boolean       @default(false)
+  emailVerificationSentAt   DateTime?
+  passwordResetSentAt       DateTime?
+psl=}
+
+route RootRoute { path: "/", to: MainPage }
+page MainPage {
+  component: import Main from "@client/MainPage.jsx"
+}
+
+route LoginRoute { path: "/login", to: LoginPage }
+page LoginPage {
+  component: import { Login } from "@client/pages/auth.tsx"
+}
+
+route SignupRoute { path: "/signup", to: SignupPage }
+page SignupPage {
+  component: import { Signup } from "@client/pages/auth.tsx"
+}
+
+route RequestPasswordResetRoute { path: "/request-password-reset", to: RequestPasswordResetPage }
+page RequestPasswordResetPage {
+  component: import { RequestPasswordReset } from "@client/pages/auth.tsx",
+}
+
+route PasswordResetRoute { path: "/password-reset", to: PasswordResetPage }
+page PasswordResetPage {
+  component: import { PasswordReset } from "@client/pages/auth.tsx",
+}
+
+route EmailVerificationRoute { path: "/email-verification", to: EmailVerificationPage }
+page EmailVerificationPage {
+  component: import { EmailVerification } from "@client/pages/auth.tsx",
+}

waspc/examples/subdir-example/migrations/20231020120542_add_email/migration.sql

@@ -0,0 +1,14 @@
+-- CreateTable
+CREATE TABLE "User" (
+    "id" SERIAL NOT NULL,
+    "email" TEXT,
+    "password" TEXT,
+    "isEmailVerified" BOOLEAN NOT NULL DEFAULT false,
+    "emailVerificationSentAt" TIMESTAMP(3),
+    "passwordResetSentAt" TIMESTAMP(3),
+
+    CONSTRAINT "User_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");

waspc/examples/subdir-example/migrations/migration_lock.toml

@@ -0,0 +1,3 @@
+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

waspc/examples/subdir-example/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

waspc/examples/subdir-example/src/.waspignore

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

waspc/examples/subdir-example/src/client/Main.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

waspc/examples/subdir-example/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