<!-- Source: https://www.wappi.dev/frontend-integration/installation -->

# Setup

### 1. Install wappi-fe using your preferred package manager

```bash
npm install wappi-fe
```

```bash
yarn add wappi-fe
```

```bash
pnpm add wappi-fe
```

### 2. Set your types files import location

**Problem:** Your frontend doesn't know the types of your backend API. So matching types means manually copying over files.

**Solution:** Every time you run wappi, it will transfer the compiled API types from the API to your frontend repo. Allowing you to always have them in sync.

This is the path that you are importing your wappiTypes to from your local wappi .env file.
FRONTEND_PROJECT_PATHS=["/absolute/path/to/frontend/wappiTypes.ts"]
# Example:
FRONTEND_PROJECT_PATHS=["/Users/Smithy/ProjectAlpha/src/wappiTypes.ts"]

Update your tsconfig.json file

```json
{
  "compilerOptions": {
    "paths": {
      "@wappiTypes": [
        "./src/wappiTypes.ts"
      ]
    }
  }
}
```

### 3. Create a reusable CONFIG file

Somewhere in your frontend code base. Create a reusable config file with your wappi information.

wappiConfig.ts

```typescript
import { WappiConfig } from 'wappi-fe/types';

export const WAPPI_CONFIG: WappiConfig = {
  apiUrl: 'https://api.domain.com', // your base API domain
  authRedirectPath: '/login', // The path you want the user to be redirected to if they don't have an auth token
};
```

Use the config in the request

```typescript
const response = async () => (request(WAPPI_CONFIG, {
  name: 'Get Some Information',
  query: 'NameSpace_FunctionName_1_0_0',
  data: {},
}))
```

URL: https://www.wappi.dev/frontend-integration/installation