Vite + Node.js Full Stack App

This is a full-stack web application using Vite for the frontend and Node.js with Express for the backend.

Project Structure

/frontend        # Frontend (React + Vite)
/backend         # Backend (Node.js + Express)

Prerequisites

• Node.js (>= 20.x recommended)
• npm or yarn

Installation

Clone the repository and install dependencies for both frontend and backend.

git clone https://github.com/mridulChhipa/dataFetcher.git
cd dataFetcher

Backend Setup

cd backend
npm install

Frontend Setup

cd frontend
npm install

Environment Variables

Create a .env file in the backend directory with the following variables:

SUPABASE_URL=...
SUPABASE_ANON_KEY=...
PORT = 3000
CLIENT_URL=http://localhost:5173

Create a .env file in the frontend directory with the following variables:

VITE_BACKEND_URL='http://localhost:3000'

Running the App

Start the Backend

cd backend
npm start

The backend runs on http://localhost:3000 (default, can be changed in .env).

Start the Frontend

cd frontend
npm run dev

The frontend runs on http://localhost:5173 (default, Vite's default dev server).

Building for Production

Build Frontend

cd frontend
npm run build

This generates a production build in the frontend/dist folder.

Serve Frontend with Backend

Copy the built frontend into the backend's public folder:

cp -r frontend/dist backend/public

Then modify the backend index.js to serve static files:

app.use(express.static("public"));
app.get("*", (req, res) => {
  res.sendFile(path.resolve(__dirname, "public", "index.html"));
});

Now restart the backend, and it will serve both frontend and backend.

Deployment

For deployment, you can use platforms like:

• Frontend: Vercel (Recommended), Netlify
• Backend: Vercel (Recommended), Heroku, Railway, Render