Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ytabeloved/ordervista/llms.txt

Use this file to discover all available pages before exploring further.

The Ordervista frontend is a Vite-powered React application that is deployed to Vercel directly from the GitHub repository. Because the project is a monorepo with both frontend/ and backend/ directories at the root, you need to tell Vercel to treat frontend/ as the project root so that it picks up the correct package.json, runs the right build command, and serves the compiled dist/ output. A vercel.json file already included in the frontend/ directory handles client-side React Router routing so that deep-linked URLs resolve correctly on refresh.

​
Vercel Project Settings

When creating a new Vercel project for the frontend, apply the following build configuration in the Vercel dashboard under Settings → General:
SettingValue
Root Directoryfrontend
Build Commandnpm run build
Output Directorydist

​
Environment Variable

The frontend needs to know where to send API requests. Set the following environment variable in the Vercel dashboard under Settings → Environment Variables:
VariableValue
VITE_API_URLhttps://ordervista-backend.onrender.com/api
Vite only exposes environment variables that are prefixed with VITE_ to the browser bundle. Variables without this prefix are stripped at build time and will be undefined in the client. Always prefix any frontend environment variable with VITE_.

​
React Router Support

Ordervista uses React Router DOM for client-side navigation. Without additional configuration, refreshing a page at a route such as /operator/new-order would return a 404 from Vercel’s CDN because that path has no corresponding static file. The frontend/vercel.json file already included in the repository resolves this by rewriting every request to index.html, letting React Router handle routing on the client: 
{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ]
}
No changes to this file are necessary — Vercel automatically picks it up when frontend/ is set as the root directory.

​
Deployment Steps

1

Import the project from GitHub

In the Vercel dashboard, click Add New → Project and select the ordervista repository from your GitHub account. If the repository is not listed, configure the Vercel GitHub integration to grant access.
2

Set the Root Directory to frontend

During the project configuration step, expand the Root Directory field and enter frontend. This tells Vercel to treat the frontend/ subdirectory as the project root, ensuring the correct package.json and vercel.json are used.
3

Add the VITE_API_URL environment variable

Under the Environment Variables section of the same configuration screen, add:
  • Name: VITE_API_URL
  • Value: https://ordervista-backend.onrender.com/api
Make sure the variable is enabled for the Production environment (and optionally Preview if you want preview deployments to hit the same backend).
4

Deploy

Click Deploy. Vercel will install dependencies, run npm run build, and publish the dist/ output to the CDN. Subsequent pushes to the main branch will trigger automatic redeployments.

Build docs developers (and LLMs) love

Get started for freeTalk to us