Welcome to WAPI!
This section explains how to set up and run the Wapi frontend built with Next.js. 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 Next.js project, including UI components, pages, assets, and configuration files.
Step 2: Install Dependencies
Install all required packages for the React Vite frontend:
- npm install
This will install all dependencies including Next.js, Socket.IO client, and other required packages.
Step 3: 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.
Step 4: Verify Frontend Installation
Open your browser.
Navigate to the frontend URL (e.g., http://localhost:port).
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!
