### Server Setup Function Example

Source: https://wasp.sh/docs/api/@wasp.sh/spec/interfaces/Server

An example of a server setup function using the ServerSetupFn type. This function is called once on server start and can be used for custom setup tasks.

```typescript
import { type ServerSetupFn } from "wasp/server"

export const mySetupFunction: ServerSetupFn = async () => {
  await setUpSomeResource()
}
```

--------------------------------

### JavaScript Server Setup Function

Source: https://wasp.sh/docs/0.23/project/server-config

Example of a server setup function in JavaScript. This function is executed on server start and can perform asynchronous setup tasks.

```javascript
export const mySetupFunction = async () => {
  await setUpSomeResource()
}

```

--------------------------------

### Client Setup Function - JavaScript

Source: https://wasp.sh/docs/0.23/project/client-config

Example of a client-side setup function in JavaScript that logs a message every hour.

```javascript
export default async function mySetupFunction() {
  let count = 1
  setInterval(
    () => console.log(`You have been online for ${count++} hours.`),
    1000 * 60 * 60
  )
}
```

--------------------------------

### Prisma Client Setup with Logging and Extensions

Source: https://wasp.sh/docs/data-model/databases

Example of setting up a Prisma Client instance with query logging and a custom extension to filter tasks.

```javascript
import { PrismaClient } from "@prisma/client"

export const setUpPrisma = () => {
  const prisma = new PrismaClient({
    log: ["query"],
  }).$extends({
    query: {
      task: {
        async findMany({ args, query }) {
          args.where = {
            ...args.where,
            description: { not: { contains: "hidden by setUpPrisma" } },
          }
          return query(args)
        },
      },
    },
  })
  
  return prisma
}
```

--------------------------------

### Client Setup Function - TypeScript

Source: https://wasp.sh/docs/0.23/project/client-config

Example of a client-side setup function in TypeScript that logs a message every hour.

```typescript
export default async function mySetupFunction(): Promise<void> {
  let count = 1
  setInterval(
    () => console.log(`You have been online for ${count++} hours.`),
    1000 * 60 * 60
  )
}
```

--------------------------------

### TypeScript Server Setup Function

Source: https://wasp.sh/docs/0.23/project/server-config

Example of a server setup function in TypeScript, using Wasp's provided types.

```typescript
import { type ServerSetupFn } from 'wasp/server'

export const mySetupFunction: ServerSetupFn = async () => {
  await setUpSomeResource()
}

```

--------------------------------

### Set up Mock Server for API and Queries

Source: https://wasp.sh/docs/0.23/project/testing

Initialize the mock server using `mockServer` to get utilities for mocking Wasp queries and API routes. This setup should be done once per file needing mock support.

```javascript
import { mockServer } from "wasp/client/test";  

const { mockQuery, mockApi } = mockServer();  
```

--------------------------------

### Basic Server Configuration

Source: https://wasp.sh/docs/api/@wasp.sh/spec/interfaces/Server

Example of configuring the server with a setup function and middleware configuration function. Use reference imports for values defined outside the Wasp spec.

```typescript
import { app } from "@wasp.sh/spec"

import { myMiddlewareConfigFn, mySetupFunction } from "./src/myServerSetupCode" with { type: "ref" }  

export default app({
  // ...
  server: {
    setupFn: mySetupFunction,
    middlewareConfigFn: myMiddlewareConfigFn,
  },
})
```

--------------------------------

### Navigate and Start Wasp Development Server

Source: https://wasp.sh/docs/0.23/tutorial/create

After creating the project, navigate into the project directory and start the Wasp development server. The first start may take some time as it sets up client, server, and database.

```bash
cd TodoApp

wasp start
```

--------------------------------

### Setup and Deploy commands

Source: https://wasp.sh/docs/deployment/deployment-methods/wasp-deploy/railway

These commands represent the underlying actions performed by the `launch` command. Use `setup` to prepare the deployment environment and `deploy` to deploy the application.

```bash
wasp deploy railway setup <project-name>
```

```bash
wasp deploy railway deploy <project-name>
```

--------------------------------

### Setup Fly.io App

Source: https://wasp.sh/docs/0.23/deployment/deployment-methods/wasp-deploy/fly

Register your client and server apps on Fly and set up environment variables using the `setup` command. This command should only be run once per app.

```bash
wasp deploy fly setup <app-name> <region>
```

--------------------------------

### Migrate to npm Installer

Source: https://wasp.sh/docs/0.23/guides/legacy/installer

Run this command to migrate from the legacy installer to the npm-based installation method.

```bash
curl -sSL https://get.wasp.sh/installer.sh | sh -s -- migrate-to-npm
```

--------------------------------

### Configure Prisma Client Setup Function (JavaScript)

Source: https://wasp.sh/docs/0.23/data-model/databases

Define the `prismaSetupFn` in your Wasp app configuration to import and set up a custom Prisma Client instance. This example shows basic setup with logging enabled.

```javascript
app MyApp {
  title: "My app",
  // ...
  db: {
    prismaSetupFn: import { setUpPrisma } from "@src/prisma"
  }
}
```

```javascript
import { PrismaClient } from '@prisma/client'

export const setUpPrisma = () => {
  const prisma = new PrismaClient({
    log: ['query'],
  }).$extends({
    query: {
      task: {
        async findMany({ args, query }) {
          args.where = {
            ...args.where,
            description: { not: { contains: 'hidden by setUpPrisma' } },
          }
          return query(args)
        },
      },
    },
  })
  
  return prisma
}
```

--------------------------------

### Add Prisma Setup Function and Seeds to Wasp App (main.wasp)

Source: https://wasp.sh/docs/0.23/data-model/databases

Integrate database seeding and Prisma Client setup into your Wasp application configuration. This example shows how to include seed imports and the Prisma setup function.

```wasp
app MyApp {
  title: "My app",
  // ...
  db: {
    seeds: [
      import devSeed from "@src/dbSeeds"
    ],
    prismaSetupFn: import { setUpPrisma } from "@src/prisma"
  }
}
```

--------------------------------

### Configure Wasp App with Database Settings

Source: https://wasp.sh/docs/api/@wasp.sh/spec/interfaces/Db

Example of configuring the Wasp application with database seeds and a custom Prisma client setup function.

```typescript
import { app } from "@wasp.sh/spec"

import devSeed from "./src/dbSeeds" with { type: "ref" }

import { setUpPrisma } from "./src/prisma" with { type: "ref" }

export default app({
  // ...

  db: {
    seeds: [devSeed],

    prismaSetupFn: setUpPrisma,

  },

})
```

--------------------------------

### Start Local Database and Production Build Server

Source: https://wasp.sh/docs/0.23/deployment/local-testing

Use `wasp start db` to initiate a local database and retrieve its connection URL. Then, use `wasp build start` with explicit environment variables like `DATABASE_URL` and `JWT_SECRET` to test your production build locally.

```bash
wasp start db
```

```bash
wasp build start --server-env DATABASE_URL=<your-database-url> --server-env JWT_SECRET=<your-jwt-secret>
```

--------------------------------

### Basic Client Configuration

Source: https://wasp.sh/docs/project/client-config

Configure the client with a root component and a setup function. Ensure the root component and setup function are correctly imported and referenced.

```typescript
import { app } from "@wasp.sh/spec"

import Root from "./src/Root" with { type: "ref" }

import mySetupFunction from "./src/myClientSetupCode" with { type: "ref" }

export default app({
  name: "MyApp",
  client: {
    rootComponent: Root,
    setupFn: mySetupFunction,
  },
  // ...
})
```

--------------------------------

### Setup with Custom PostgreSQL Image

Source: https://wasp.sh/docs/deployment/deployment-methods/wasp-deploy/railway

Specify a custom Docker image for the PostgreSQL database service using the `--db-image` flag, for example, to use PostGIS or pgvector.

```bash
# Use PostGIS: 

wasp deploy railway setup my-wasp-app --db-image postgis/postgis
```

```bash
# Use pgvector: 

wasp deploy railway setup my-wasp-app --db-image pgvector/pgvector:pg16
```

--------------------------------

### Install Sentry SDKs

Source: https://wasp.sh/docs/guides/integrations/sentry

Install the Sentry Node.js and React SDKs using npm.

```bash
npm install @sentry/node @sentry/react  
```

--------------------------------

### Client Setup Function (JavaScript)

Source: https://wasp.sh/docs/0.23/project/client-config

An asynchronous function for custom client-side setup, such as periodic jobs.

```javascript
export default async function mySetupFunction() {
  // Run some code
}
```

--------------------------------

### Storing Values in Setup Function (JavaScript)

Source: https://wasp.sh/docs/project/server-config

Demonstrates storing a value (e.g., from an async setup operation) in the server setup function for later access by operations. The value is stored in a module-level variable.

```javascript
let someResource = undefined

export const mySetupFunction = async () => {
  // Let's pretend functions setUpSomeResource and startSomeCronJob
  // are implemented below or imported from another file.
  someResource = await setUpSomeResource()
  startSomeCronJob()
}

export const getSomeResource = () => someResource
```

--------------------------------

### Example Production Database URL

Source: https://wasp.sh/docs/0.23/guides/debugging/db-studio-fly-io

An example of a correctly formatted `DATABASE_URL` in the `.env.server` file, using a sample password and database name.

```dotenv
DATABASE_URL=postgres://postgres:myDatabasePassword@localhost:5432/some_test_server
```

--------------------------------

### Build and Start with Staging Environment Files

Source: https://wasp.sh/docs/0.23/deployment/local-testing

Use this command to build and start your Wasp application using specific environment files for staging.

```bash
wasp build start --server-env-file .env.staging --client-env-file .env.client.staging
```

--------------------------------

### Client Setup Function (TypeScript)

Source: https://wasp.sh/docs/0.23/project/client-config

An asynchronous TypeScript function for custom client-side setup, such as periodic jobs.

```typescript
export default async function mySetupFunction(): Promise<void> {
  // Run some code
}
```

--------------------------------

### Navigate and Start Wasp App

Source: https://wasp.sh/docs/0.23/quick-start

Change directory into your new Wasp project and start the development server. This command serves both the frontend and backend.

```bash
cd <my-project-name>

wasp start
```

--------------------------------

### Verify Docker Installation

Source: https://wasp.sh/docs/0.23/guides/deployment/self-hosted/vps

Run a test container to confirm Docker is installed and functioning correctly on your server.

```bash
docker run hello-world
```

--------------------------------

### Install Dependencies and Build Wasp App

Source: https://wasp.sh/docs/deployment/deployment-methods/self-hosted

Use these commands to install project dependencies and build your Wasp application for deployment.

```bash
wasp install
wasp build
```

--------------------------------

### Wasp deploy railway setup and deploy commands

Source: https://wasp.sh/docs/0.23/deployment/deployment-methods/wasp-deploy/railway

Equivalent commands to 'wasp deploy railway launch', showing the underlying setup and deploy steps.

```bash
wasp deploy railway setup <project-name>

wasp deploy railway deploy <project-name>
```

--------------------------------

### Install Wasp CLI

Source: https://wasp.sh/docs/0.23/guides/deployment/self-hosted/vps

Install the Wasp CLI globally using npm. Add Wasp to your system's PATH.

```bash
npm i -g @wasp.sh/wasp-cli
export PATH=$PATH:~/.local/bin
source ~/.bashrc
```

--------------------------------

### Adding a Custom Route (JavaScript)

Source: https://wasp.sh/docs/project/server-config

Example of adding a custom GET route to the Express application within the Wasp server setup function. This route responds with a simple string.

```javascript
export const mySetupFunction = async ({ app }) => {
  addCustomRoute(app)
}

function addCustomRoute(app) {
  app.get("/customRoute", (_req, res) => {
    res.send("I am a custom route")
  })
}
```

--------------------------------

### Start Local Database and Production Build Server

Source: https://wasp.sh/docs/deployment/local-testing

This snippet shows how to start a local database and then launch the local production build server. You will likely need to provide additional environment variables for your specific application.

```bash
# Start a local database, copy the connection URL

wasp start db  

# Start the local production build server

# (this is an example, you'll probably need to add more environment variables)

wasp build start --server-env DATABASE_URL=<your-database-url> --server-env JWT_SECRET=<your-jwt-secret>
```

--------------------------------

### UsernameAndPasswordConfig Usage Example

Source: https://wasp.sh/docs/api/@wasp.sh/spec/interfaces/UsernameAndPasswordConfig

This example demonstrates how to configure username and password authentication within the Wasp application setup, specifying user entity and signup fields.

```APIDOC
## UsernameAndPasswordConfig Configuration

### Description
Configures username and password authentication for Wasp applications. This includes specifying the user entity and defining custom fields for user signup.

### Properties

#### userSignupFields? (optional)
* **userSignupFields** (`Reference<AnyObject>`) - Optional - Object that defines extra fields to save on the user during signup. Each field name must exist on the configured Auth.userEntity. Each field function receives the data sent from the client and returns the value Wasp saves to the database. The `password` field is excluded and handled by Wasp's auth backend.

### Example Usage
```javascript
import { app } from "@wasp.sh/spec"
import { userSignupFields } from "./src/auth" with { type: "ref" }

export default app({
  // ...
  auth: {
    userEntity: "User",
    methods: {
      usernameAndPassword: {
        userSignupFields,
      },
    },
    onAuthFailedRedirectTo: "/login",
  },
})
```

### Signup Fields Customization Example
```javascript
import { defineUserSignupFields } from 'wasp/server/auth'

export const userSignupFields = defineUserSignupFields({
  address: (data) => {
    if (!data.address) {
      throw new Error('Address is required')
    }
    return data.address
  },
  phone: (data) => data.phone,
})
```
```

--------------------------------

### Shadcn Initialization Prompts

Source: https://wasp.sh/docs/0.23/guides/libraries/shadcn

Example of interactive prompts during Shadcn initialization, showing framework detection and configuration choices.

```text
✔ Preflight checks. 
✔ Verifying framework. Found Vite. 
✔ Validating Tailwind CSS. 
✔ Validating import alias. 
✔ Which style would you like to use? › New York 
✔ Which color would you like to use as the base color? › Neutral 
✔ Would you like to use CSS variables for theming? … yes 
✔ Writing components.json. 
✔ Checking registry. 
✔ Updating tailwind.config.js 
✔ Updating src/Main.css 
✔ Installing dependencies. 
✔ Created 1 file: 
- src/lib/utils.ts
```

--------------------------------

### Get First Provider User ID in JavaScript

Source: https://wasp.sh/docs/auth/entities

Use `getFirstProviderUserId` to get any user ID when multiple authentication methods are supported. This example shows its usage in a React component.

```jsx
const MainPage = ({ user }) => {
  
  const userId = user.getFirstProviderUserId()
  
  // ...
  
}
```

--------------------------------

### Starting a default PostgreSQL dev database with Wasp

Source: https://wasp.sh/docs/data-model/databases

The `wasp start db` command initiates a default PostgreSQL development database. Ensure Docker is installed and port 5432 is available.

```bash
wasp start db
```

--------------------------------

### Basic Client Configuration

Source: https://wasp.sh/docs/0.23/project/client-config

Configure the client by specifying the root component and a setup function in the `app` declaration.

```wasp
app MyApp {
  title: "My app",
  // ...
  client: {
    rootComponent: import Root from "@src/Root",
    setupFn: import mySetupFunction from "@src/myClientSetupCode"
  }
}
```

--------------------------------

### Relative Linking Example

Source: https://wasp.sh/docs/writingguide

Use relative links for internal documentation pages, starting from the file root. Include the file extension.

```markdown
`/introduction/introduction.md`
```

--------------------------------

### Use CRUD Operations in JavaScript Client

Source: https://wasp.sh/docs/0.23/data-model/crud

Example of using generated CRUD operations (getAll, get, create, update, delete) in JavaScript client-side code.

```javascript
const { data } = Tasks.getAll.useQuery()
const { data } = Tasks.get.useQuery({ id: 1 })
const createAction = Tasks.create.useAction()
const updateAction = Tasks.update.useAction()
const deleteAction = Tasks.delete.useAction()
```

--------------------------------

### Server Setup Function

Source: https://wasp.sh/docs/0.23/project/server-config

The `setupFn` allows you to define an asynchronous function that runs on server startup. This function receives the Express application and HTTP server instances, enabling custom server logic like setting up databases or scheduled jobs.

```APIDOC
## `setupFn`

### Description
Declares a function that will be executed on server start. This function is expected to be async and will be awaited before the server starts accepting any requests. It allows for custom setup, such as additional database/websockets or starting cron/scheduled jobs.

### Type
`ExtImport`

### Context
The `setupFn` function receives the `express.Application` and the `http.Server` instances as part of its context. They can be useful for setting up any custom server logic.

### JavaScript Example
```javascript
// src/myServerSetupCode.js
export const mySetupFunction = async () => {
  await setUpSomeResource()
}
```

### TypeScript Types
```typescript
// wasp/server
export type ServerSetupFn = (context: ServerSetupFnContext) => Promise<void>

export type ServerSetupFnContext = {
  app: Application // === express.Application
  server: Server // === http.Server
}
```

### TypeScript Example
```typescript
// src/myServerSetupCode.ts
import { type ServerSetupFn } from 'wasp/server'

export const mySetupFunction: ServerSetupFn = async () => {
  await setUpSomeResource()
}
```
```

--------------------------------

### Document API Endpoint with Swagger Annotations (JavaScript)

Source: https://wasp.sh/docs/guides/integrations/swagger-ui

Adds JSDoc comments with Swagger annotations to document an API endpoint. This example documents a GET request to '/status'.

```javascript
import { GetStatus } from "wasp/server/api";  

  

/**  

 * @swagger  

 * /status:  

 *   get:  

 *     summary: Get API status  

 *     description: Returns the current status of the API  

 *     tags:  

 *       - Status  

 *     security:  

 *       - bearerAuth: []  

 *     responses:  

 *       200:  

 *         description: Successful response  

 *         content:  

 *           application/json:  

 *             schema:  

 *               type: object  

 *               properties:  

 *                 message:  

 *                   type: string  

 *       401:  

 *         description: Unauthorized  

 *       500:  

 *         description: Server error  

 */  

export const getStatus = async (req, res) => {  

  return res.json({ message: "OK" });  

};  

```

--------------------------------

### Basic Server Configuration

Source: https://wasp.sh/docs/0.23/project/server-config

Configure the server's setup and middleware functions within the `app` declaration.

```wasp
app MyApp {
  title: "My app",
  // ...
  server: {
    setupFn: import { mySetupFunction } from "@src/myServerSetupCode",
    middlewareConfigFn: import { myMiddlewareConfigFn } from "@src/myServerSetupCode"
  }
}
```

--------------------------------

### Initialize Shadcn CLI

Source: https://wasp.sh/docs/0.23/guides/libraries/shadcn

Run the Shadcn CLI to initialize the library in your project. Follow the prompts for framework, style, and theming options.

```bash
npx shadcn@latest init
```

--------------------------------

### Store Values in Setup Function (JavaScript)

Source: https://wasp.sh/docs/0.23/project/server-config

Demonstrates storing values in the `setupFn` for later access by Operations using JavaScript. The recommended approach is to expose getter functions.

```javascript
let someResource = undefined

export const mySetupFunction = async () => {
  // Let's pretend functions setUpSomeResource and startSomeCronJob
  // are implemented below or imported from another file.
  someResource = await setUpSomeResource()
  startSomeCronJob()
}

export const getSomeResource = () => someResource
```

```javascript
import { getSomeResource } from './myServerSetupCode.js'

...

export const someQuery = async (args, context) => {
  const someResource = getSomeResource()
  return queryDataFromSomeResource(args, someResource)
}
```

--------------------------------

### Define a Custom API Endpoint

Source: https://wasp.sh/docs/api/@wasp.sh/spec/functions/api

Example of creating a GET API endpoint for '/bar/baz' that uses a referenced function 'barBaz'. It specifies 'Task' as an entity and disables authentication for the handler.

```typescript
import { api } from '@wasp.sh/spec'  

import { barBaz } from './src/apis' with { type: 'ref' }  
  
  
api('GET', '/bar/baz', barBaz, { entities: ['Task'], auth: false })  

```

--------------------------------

### Import Tailwind Plugins into Base CSS

Source: https://wasp.sh/docs/0.23/guides/libraries/tailwind

Import installed Tailwind plugins into your base CSS file to enable their functionality. This example shows importing forms and typography plugins.

```css
@import "tailwindcss";  
  
@plugin "@tailwindcss/forms";  
@plugin "@tailwindcss/typography";  
  
/* ... */  
```

--------------------------------

### Accessing Stored Values in Operations (TypeScript)

Source: https://wasp.sh/docs/project/server-config

TypeScript example of accessing values stored during server setup from within a Wasp operation (query). It imports the getter function for the stored resource.

```typescript
import { type SomeQuery } from "wasp/server/operations"
import { getSomeResource } from "./myServerSetupCode.js"

...

export const someQuery: SomeQuery<...> = async (args, context) => {
  const someResource = getSomeResource()
  return queryDataFromSomeResource(args, someResource)
}
```

--------------------------------

### Start Server with Multiple Environment Variables

Source: https://wasp.sh/docs/0.23/deployment/local-testing

Provide multiple environment variables for the server by chaining the --server-env flag. This allows for setting various configurations simultaneously.

```bash
wasp build start --server-env DATABASE_URL=postgresql://localhost:5432/myapp --server-env JWT_SECRET=my-secret-key
```

--------------------------------

### Start Client with Multiple Environment Variables

Source: https://wasp.sh/docs/0.23/deployment/local-testing

Configure multiple client-side environment variables by using the --client-env flag multiple times. This allows for setting various frontend-related configurations.

```bash
wasp build start --client-env REACT_APP_GOOGLE_ANALYTICS_ID=GA-123456 --client-env REACT_APP_PLAUSIBLE_ID=PLAUSIBLE-123456
```

--------------------------------

### Document API Endpoint with Swagger Annotations (TypeScript)

Source: https://wasp.sh/docs/guides/integrations/swagger-ui

Adds JSDoc comments with Swagger annotations to document an API endpoint using TypeScript. This example documents a GET request to '/status'.

```typescript
import { GetStatus } from "wasp/server/api";  

  

/**  

 * @swagger  

 * /status:  

 *   get:  

 *     summary: Get API status  

 *     description: Returns the current status of the API  

 *     tags:  

 *       - Status  

 *     security:  

 *       - bearerAuth: []  

 *     responses:  

 *       200:  

 *         description: Successful response  

 *         content:  

 *           application/json:  

 *             schema:  

 *               type: object  

 *               properties:  

 *                 message:  

 *                   type: string  

 *       401:  

 *         description: Unauthorized  

 *       500:  

 *         description: Server error  

 */  

export const getStatus: GetStatus = async (req, res) => {  

  return res.json({ message: "OK" });  

};  

```

--------------------------------

### Absolute to File Root Link Example

Source: https://wasp.sh/docs/0.23/writingguide

When linking to pages, use links that are absolute to the file root, starting with '/' and including the '.md' extension. This ensures compatibility with versioned documentation.

```markdown
/introduction/introduction.md
```

--------------------------------

### Customizing Login Form Appearance

Source: https://wasp.sh/docs/auth/ui

Define custom colors and a logo for the LoginForm component by exporting an `appearance` object and passing it along with the logo to the component. This example shows both JavaScript and TypeScript setups.

```javascript
export const appearance = {
  colors: {
    brand: "#5969b8", // blue
    brandAccent: "#de5998", // pink
    submitButtonText: "white",
  },
}
```

```jsx
import { LoginForm } from "wasp/client/auth"

import { authAppearance } from "./appearance"
import todoLogo from "./todoLogo.png"

export function LoginPage() {
  return <LoginForm appearance={appearance} logo={todoLogo} />
}
```

```typescript
import type { CustomizationOptions } from "wasp/client/auth"

export const appearance: CustomizationOptions["appearance"] = {
  colors: {
    brand: "#5969b8", // blue
    brandAccent: "#de5998", // pink
    submitButtonText: "white",
  },
}
```

```jsx
import { LoginForm } from "wasp/client/auth"

import { authAppearance } from "./appearance"
import todoLogo from "./todoLogo.png"

export function LoginPage() {
  return <LoginForm appearance={appearance} logo={todoLogo} />
}
```

--------------------------------

### Use SaaS Starter Template

Source: https://wasp.sh/docs/0.23/project/starter-templates

To create a new Wasp project using the SaaS starter template, specify the project name and the '-t saas' flag.

```bash
wasp new <project-name> -t saas  
```

--------------------------------

### Reset Password Form (JavaScript)

Source: https://wasp.sh/docs/0.23/auth/ui

Implement the ResetPasswordForm component for users to set a new password after receiving a reset link. This example shows the Wasp route/page setup and the React component usage.

```wasp
// ...  

route PasswordResetRoute { path: "/password-reset", to: PasswordResetPage }

page PasswordResetPage {
  component: import { ResetPasswordPage } from "@src/ResetPasswordPage"
}

```

```jsx
import { ResetPasswordForm } from 'wasp/client/auth'  

// Use it like this  
export function ResetPasswordPage() {  
  return <ResetPasswordForm />  
}

```

--------------------------------

### Setup Prisma Client with Logging

Source: https://wasp.sh/docs/api/@wasp.sh/spec/interfaces/Db

Function to set up and return a configured Prisma Client instance, including custom logging.

```typescript
import { PrismaClient } from "@prisma/client"

export const setUpPrisma = () => {
  const prisma = new PrismaClient({
    log: ["query", "info", "warn", "error"],
  })

  return prisma
}
```

--------------------------------

### Configure Username and Password Auth in Wasp App

Source: https://wasp.sh/docs/api/@wasp.sh/spec/interfaces/UsernameAndPasswordConfig

Example of configuring username and password authentication within the main Wasp app setup. It specifies the user entity, the authentication method, and the redirect path on authentication failure.

```typescript
import { app } from "@wasp.sh/spec"

import { userSignupFields } from "./src/auth" with { type: "ref" }

export default app({
  // ...
  auth: {
    userEntity: "User",
    methods: {
      usernameAndPassword: {
        userSignupFields,
      },
    },
    onAuthFailedRedirectTo: "/login",
  },
})
```

--------------------------------

### Run Lighthouse for SEO Analysis

Source: https://wasp.sh/docs/guides/optimization/seo

Use the Lighthouse CLI to analyze your production build's SEO performance on desktop. The --view flag opens the report in a browser. Adjust the URL and preset for different testing scenarios.

```bash
# While the server is running, open another terminal and run Lighthouse:

$ npx lighthouse http://localhost:3000 --preset=desktop --view

# You can change the URL to a specific page or to point to your deployed app if you want to test that instead.

# Remove the --preset=desktop argument to test the mobile experience instead.
```

--------------------------------

### Deploy Wasp Client to Netlify (Preview)

Source: https://wasp.sh/docs/0.23/guides/deployment/cloud-providers/netlify

Deploy the Wasp client to Netlify for a preview. Follow the on-screen instructions to select an app and team.

```bash
npx netlify-cli deploy
```

--------------------------------

### Use Legacy Installer for Specific Version

Source: https://wasp.sh/docs/0.23/guides/legacy/installer

Use the legacy installer to install a specific older version of Wasp. Replace x.y.z with the desired version number. The installer requires a version argument.

```bash
# Set x.y.z to the version you want to install, e.g. 0.20.1  

# The installer will refuse to run without a specific version argument  

curl -sSL https://get.wasp.sh/installer.sh | sh -s -- -v x.y.z
```

--------------------------------

### Start Server with .env File

Source: https://wasp.sh/docs/0.23/deployment/local-testing

Load server environment variables from a specified .env file using the --server-env-file flag. Ensure sensitive information is not committed to version control.

```bash
wasp build start --server-env-file .env.production
```

--------------------------------

### Install Claude Agent Plugin for Wasp

Source: https://wasp.sh/docs/0.23/quick-start

Install the Wasp agent plugins for Claude. This includes marketplace addition and project-specific installation.

```bash
claude plugin marketplace add wasp-lang/wasp-agent-plugins

claude plugin install wasp@wasp-agent-plugins --scope project
```

--------------------------------

### Install Wasp 0.23 Specifically

Source: https://wasp.sh/docs/0.23/migration-guide

Install Wasp version 0.23 specifically using the npm install command with the version specified.

```bash
npm i -g @wasp.sh/wasp-cli@0.23
```

--------------------------------

### Start Client with .env File

Source: https://wasp.sh/docs/0.23/deployment/local-testing

Load client environment variables from a specified .env file using the --client-env-file flag. This is useful for managing frontend configurations, especially in different environments.

```bash
wasp build start --client-env-file .env.client.production
```

--------------------------------

### Install Specific Wasp Version (0.24)

Source: https://wasp.sh/docs/migration-guide

Install Wasp version 0.24 specifically by providing the version number to the npm install script.

```bash
npm i -g @wasp.sh/wasp-cli@0.24
```

--------------------------------

### Initialize Shadcn UI

Source: https://wasp.sh/docs/guides/libraries/shadcn

Run the Shadcn CLI to initialize the library in your project. This command sets up necessary files and dependencies.

```bash
npx shadcn@latest init -b radix -p luma
```

--------------------------------

### Install Wasp Plugin for Claude Code

Source: https://wasp.sh/docs/0.23/wasp-ai/coding-agent-plugin

Install the Wasp plugin for Claude Code. It is recommended to install with 'project' scope to commit settings to git.

```bash
claude plugin install wasp@wasp-agent-plugins --scope project
```

--------------------------------

### Install Rosetta on Mac (Apple Silicon)

Source: https://wasp.sh/docs/0.23/guides/legacy/installer

Install Rosetta to enable running x86 binaries on Macs with Apple Silicon, required if using the legacy installer on such systems.

```bash
softwareupdate --install-rosetta
```

--------------------------------

### Initialize Wasp Plugin/Skills

Source: https://wasp.sh/docs/0.23/quick-start

Run the '/wasp-plugin-init' skill to integrate Wasp knowledge into your agent's memory file.

```bash
Run the '/wasp-plugin-init' skill.
```

--------------------------------

### Install vite-plugin-devtools-json

Source: https://wasp.sh/docs/0.23/project/custom-vite-config

Install the vite-plugin-devtools-json plugin as a development dependency using npm.

```bash
npm i -D vite-plugin-devtools-json
```

--------------------------------

### Start Wasp Application

Source: https://wasp.sh/docs/0.23/guides/debugging/local-network-testing

Run this command to start your Wasp application locally.

```bash
wasp start  

```

--------------------------------

### Wasp File Example with Entities

Source: https://wasp.sh/docs/0.23/data-model/prisma-file

Demonstrates how Wasp Entities like Task are used in the main.wasp file for queries, jobs, and APIs.

```wasp
app myApp {
  wasp: {
    version: ">^0.24"
  },
  title: "My App",
}

...  

// Using Wasp Entities in the Wasp file  

query getTasks {
  fn: import { getTasks } from "@src/queries",
  entities: [Task]
}

job myJob {
  executor: PgBoss,
  perform: {
    fn: import { foo } from "@src/workers/bar"
  },
  entities: [Task],
}

api fooBar {
  fn: import { fooBar } from "@src/apis",
  entities: [Task],
  httpRoute: (GET, "/foo/bar/:email")
}


```

--------------------------------

### Use Minimal Starter Template

Source: https://wasp.sh/docs/0.23/project/starter-templates

To create a new Wasp project using the minimal starter template, specify the project name and the '-t minimal' flag.

```bash
wasp new <project-name> -t minimal  
```