Configuration & Deployment

This project is built using Vite and React. It relies on environment variables to manage API endpoints, branding, and contact information. To deploy the application, you must configure the environment and generate a production build.

Environment Variables

The application uses Vite-specific environment variables (VITE_) to handle external services and institutional branding. Create a .env file in the root of your project and define the following variables:

API and Media Configuration

Institution Branding

Contact and Localization

Sample `.env` Setup

VITE_API_URL=https://api.example.edu
VITE_FILE_URL=https://api.example.edu/files
VITE_IMAGE_URL=https://api.example.edu/images
VITE_COLLEGE_NAME="Campus Template University"

VITE_ADDRESS="123 Education Ave, City, Country"
VITE_EMAIL="info@example.edu"
VITE_PHONE="+1 234 567 890"
VITE_MAP_IFRAME="https://www.google.com/maps/embed?pb=..."

Authentication & Authorization

The application handles protected routes using a Bearer Token strategy.

Tokens: Upon login, the application expects an authToken to be stored in localStorage.
Private Routes: The PrivateRoutes component automatically checks for the presence of a token and valid loading state before granting access to CMS features.
API Requests: Most POST, PATCH, and DELETE requests in the Api.js files automatically retrieve the token from local storage and include it in the Authorization header.

// Example of how the token is utilized in API calls
const token = localStorage.getItem("authToken");
const headers = {
    'Authorization': `Bearer ${token}`
};

Deployment Steps

1. Installation

Install the project dependencies using npm or yarn:

npm install

2. Local Development

Start the development server with Hot Module Replacement (HMR):

npm run dev

3. Production Build

Generate a highly optimized production build in the dist folder:

npm run build

4. Preview Build

Locally preview the production build to ensure all environment variables and assets are loading correctly:

npm run preview

Build Optimization

The project is configured with @vitejs/plugin-react (or @vitejs/plugin-react-swc), ensuring fast refresh and efficient bundling. When deploying to services like Vercel, Netlify, or AWS Amplify, ensure that the Build Command is set to npm run build and the Publish Directory is set to dist.

Configuration & Deployment