Top

Wapi documentation

## Chat, collaborate, and create teams effortlessly with Wapi

#### Wapi-Frontend Installation

This section explains how to set up and run the Wapi frontend built with React Vite. The frontend connects with the backend API topower messaging, media sharing, user profiles, groups, and real-time communication features such as voice and video calling.

### Step 1: Download and Extract

After purchasing Wapi, download the ZIP package.

Extract the ZIP; you will find the wapi-frontend folder.

- unzip wapi-frontend.zip
- cd wapi-frontend

This folder contains the complete React Vite project, including UI components, pages, assets, and configuration files.

### Step 2: Environment Configuration

Create a .env file in the root of the wapi-frontend folder. This file stores environment variables required for API calls, real-time updates, and media storage.

- VITE_API_BASE_URL= https://your-domain.com/api/
- VITE_SOCKET_URL= https://your-domain.com/api/
- VITE_STORAGE_URL= http://your-domain.com
- VITE_STORAGE_SECRET_KEY= your-secret-key
- VITE_ADMIN_APP_URL = http://your-domain.com
- VITE_ENCRYPTION_KEY = your-secret-key
- VITE_EXTEND_SUPPORT=true

##### Explanation of Key Variables :

- VITE_API_BASE_URL:Backend API base URL for login, chats, media, and user actions

- VITE_SOCKET_URL:Socket.IO server URL for real-time messaging, presence, and notifications.

- VITE_STORAGE_URL: Base URL for images, videos, and other uploaded media.

- VITE_STORAGE_SECRET_KEY: Secret key used for secure storage handling.

- VITE_ADMIN_APP_URL: Frontend URL

- VITE_ENCRYPTION_KEY: Secret key used for Encryption.

- VITE_EXTEND_SUPPORT: Set True If bought Extended Support.

Update all URLs depending on your environment (local, staging, or production).

### Step 3: Install Dependencies

Install all required packages for the React Vite frontend:

- npm install

This will install all dependencies including React, Vite, Socket.IO client, and other required packages.

### Step 4: Start the Frontend

###### For development:

- npm run dev

The frontend will start in development mode, and you can access it in your browser at the URL shown in the terminal (usually http://localhost:5173 ).

###### For production build:

- npm run build

This will generate a production-ready build in the dist folder, which can be served via any web server.

To preview the production build locally:

- npm run preview

### Step 5: Verify Frontend Installation

Open your browser.

Navigate to the frontend URL (e.g., http://localhost:5173).

Ensure the frontend loads successfully and is able to communicate with the backend API and Socket.IO server.

If you encounter issues, verify that the backend API is running, .env variables are correct, and ports are accessible.

Note : All frontend dependencies including Socket.IO client are installed automatically with npm install` .

-- The .env file is critical to ensure that the frontend connects properly to the backend API, real-time server, and storage.

-- For production deployment, make sure the URLs point to your live server endpoints.

## What's Next?

Let’s get started — your team’s new home is Wapi Chat!

### Prerequisite

Setup guide and configuration

### Backend Installation

Server setup and configuration

### Deployment

Launch, host, and manage