Setup

1. Install wappi-fe using your preferred package manager

1npm install wappi-fe

1yarn add wappi-fe

1pnpm 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

1{
2  "compilerOptions": {
3    "paths": {
4      "@wappiTypes": [
5        "./src/wappiTypes.ts"
6      ]
7    }
8  }
9}

3. Create a reusable CONFIG file

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

wappiConfig.ts

1import { WappiConfig } from 'wappi-fe/types';
2
3export const WAPPI_CONFIG: WappiConfig = {
4  apiUrl: 'https://api.domain.com', // your base API domain
5  authRedirectPath: '/login', // The path you want the user to be redirected to if they don't have an auth token
6};

Use the config in the request

1const response = async () => (request(WAPPI_CONFIG, {
2  name: 'Get Some Information',
3  query: 'NameSpace_FunctionName_1_0_0',
4  data: {},
5}))