Teamwise-Frontend Installation
This section explains how to set up and run the TeamWise frontend built with React Vite. The frontend connects with the backend API to provide chat, team management, and real-time communication features.
Step 1: Download and Extract
After purchasing TeamWise, download the ZIP file from CodeCanyon.
Extract the ZIP; you will find the teamwise-frontend folder.
- unzip teamwise-frontend.zip
- cd teamwise-frontend
This folder contains the complete React Vite project including all components, pages, and configuration files.
Step 2: Environment Configuration
Create a .env file in the root of the teamwise-frontend folder. This file contains all environment-specific configuration required for connecting to the backend API, Socket.IO, and 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
Explanation of Key Variables :
-
VITE_API_BASE_URL: The base URL of the TeamWise backend API.
-
VITE_SOCKET_URL: The URL for the Socket.IO server for real-time messaging and presence updates.
-
VITE_STORAGE_URL: The URL for storage or file uploads.
-
VITE_STORAGE_SECRET_KEY: Secret key used for encrypting storage data.
Update these URLs depending on whether you are running the application locally or on a production server.
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, WebRTC libraries, 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 and WebRTC libraries 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 Teamwise Chat!
