chore: migrate frontend from Create React App to Vite#221
chore: migrate frontend from Create React App to Vite#221gmarav05 wants to merge 2 commits intoOpenLake:mainfrom
Conversation
|
@gmarav05 is attempting to deploy a commit to the openlake's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughMigrates the React frontend from Create React App to Vite. Removes react-scripts and CRA-specific files, adds Vite configuration, updates environment variables from REACT_APP_* to VITE_*, converts module exports from CommonJS to ES modules, and restructures entry points for Vite compatibility. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/package.json (1)
50-54: ESLint config may be broken after removing react-scripts.The
eslintConfigstill extends"react-app"and"react-app/jest", which are provided byreact-scripts. Sincereact-scriptswas removed, this configuration will likely fail.🔧 Suggested fix: Update ESLint configuration for Vite
Consider removing the CRA-specific ESLint config and setting up a standalone ESLint configuration:
- "eslintConfig": { - "extends": [ - "react-app", - "react-app/jest" - ] - },Then create an
eslint.config.jsor.eslintrc.jsonwith appropriate React rules, or installeslint-plugin-reactandeslint-plugin-react-hooksseparately.
🤖 Fix all issues with AI agents
In `@frontend/src/Components/President/PresidentDashboard.jsx`:
- Around line 4-5: The project still reads Vite env var VITE_BACKEND_URL (see
API_BASE_URL constant in PresidentDashboard.jsx) but .env.example and docs
reference the old CRA variable; update .env.example to include
VITE_BACKEND_URL=http://localhost:8000 (and a short comment) and update
deployment documentation to require VITE_BACKEND_URL to be set in production,
removing or converting any REACT_APP_BACKEND_URL references so the Vite variable
name matches the runtime code.
- Line 3: The import in PresidentDashboard.jsx references a non-existent module
(navItems from presidentConfig); replace that import to pull NavbarConfig from
navbarConfig.js and update usages of navItems to use NavbarConfig.PRESIDENT (or
alternatively create a new presidentConfig export), i.e., change the import
statement and any references to navItems within the PresidentDashboard component
to reference NavbarConfig.PRESIDENT so the module resolves at runtime.
🧹 Nitpick comments (1)
frontend/package.json (1)
38-42: Test script was removed but testing dependencies remain.The
testscript was removed, but testing libraries (@testing-library/jest-dom,@testing-library/react,@testing-library/user-event) are still listed in dependencies. If testing is still needed, consider adding Vitest as a replacement for Jest.💡 If testing is needed, consider adding Vitest
Add Vitest for Vite-native testing:
"scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "test": "vitest" }And add to devDependencies:
"vitest": "^1.0.0"Alternatively, if testing is no longer needed, consider removing the unused testing dependencies to reduce bundle size.
| import React, { useState, useEffect } from "react"; | ||
| import { Link } from "react-router-dom"; | ||
| import { navItems } from "../../config/presidentConfig.js"; | ||
| import { navItems } from "../../config/presidentConfig"; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find presidentConfig file(s)
echo "=== Finding presidentConfig files ==="
fd -i "presidentconfig" -t fRepository: OpenLake/Student_Database_COSA
Length of output: 111
🏁 Script executed:
#!/bin/bash
# Check config directory structure
echo "=== Config directory structure ==="
fd . "frontend/src/config" -t f 2>/dev/null || echo "Directory not found"
echo ""
echo "=== Searching for navItems definition globally ==="
rg -n "navItems" --type jsx --type js -A 2 -B 2Repository: OpenLake/Student_Database_COSA
Length of output: 402
🏁 Script executed:
#!/bin/bash
echo "=== Searching for navItems definition ==="
rg -n "navItems" --type js
echo ""
echo "=== Checking navbarConfig.js (likely source) ==="
cat -n "frontend/src/config/navbarConfig.js" | head -30
echo ""
echo "=== Checking PresidentDashboard.jsx imports ==="
head -20 "frontend/src/Components/President/PresidentDashboard.jsx"Repository: OpenLake/Student_Database_COSA
Length of output: 2571
🏁 Script executed:
#!/bin/bash
echo "=== Full NavbarConfig structure ==="
cat "frontend/src/config/navbarConfig.js"Repository: OpenLake/Student_Database_COSA
Length of output: 2843
Fix the import path—presidentConfig.js does not exist.
The file frontend/src/config/presidentConfig.js is missing. Import NavbarConfig from navbarConfig.js instead and use NavbarConfig.PRESIDENT where navItems is referenced, or create the missing presidentConfig file. Without this fix, the component will crash at runtime when attempting to load the module.
🤖 Prompt for AI Agents
In `@frontend/src/Components/President/PresidentDashboard.jsx` at line 3, The
import in PresidentDashboard.jsx references a non-existent module (navItems from
presidentConfig); replace that import to pull NavbarConfig from navbarConfig.js
and update usages of navItems to use NavbarConfig.PRESIDENT (or alternatively
create a new presidentConfig export), i.e., change the import statement and any
references to navItems within the PresidentDashboard component to reference
NavbarConfig.PRESIDENT so the module resolves at runtime.
| const API_BASE_URL = | ||
| process.env.REACT_APP_BACKEND_URL || "http://localhost:8000"; | ||
| import.meta.env.VITE_BACKEND_URL || "http://localhost:8000"; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check for VITE_BACKEND_URL in env files
echo "=== Checking for VITE_BACKEND_URL in .env files ==="
fd -H '\.env' --type f -x grep -n 'VITE_BACKEND_URL' {} +
echo ""
echo "=== Checking for old CRA-style env vars ==="
rg -n "process\.env\.REACT_APP|REACT_APP_BACKEND_URL" --type js --type jsxRepository: OpenLake/Student_Database_COSA
Length of output: 285
🏁 Script executed:
#!/bin/bash
# First, list all .env files in the repo
echo "=== .env files in repository ==="
find . -type f -name "\.env*" 2>/dev/null | head -20
echo ""
echo "=== Searching for VITE_BACKEND_URL in .env files ==="
find . -type f -name "\.env*" -exec grep -H 'VITE_BACKEND_URL' {} \;
echo ""
echo "=== Searching for old REACT_APP env vars in codebase ==="
rg "process\.env\.REACT_APP|REACT_APP_BACKEND_URL" -i
echo ""
echo "=== Checking where VITE_BACKEND_URL is actually used ==="
rg "VITE_BACKEND_URL"
echo ""
echo "=== Checking for import.meta.env usage ==="
rg "import\.meta\.env\."Repository: OpenLake/Student_Database_COSA
Length of output: 1439
🏁 Script executed:
cat frontend/.env.exampleRepository: OpenLake/Student_Database_COSA
Length of output: 162
Update .env.example to reflect Vite migration and ensure VITE_BACKEND_URL is configured in all deployments.
The .env.example file still contains old CRA-style variables (REACT_APP_BACKEND_URL), but the codebase has migrated to Vite and uses VITE_BACKEND_URL. The environment variable is undefined in .env files, causing the fallback to localhost:8000 to silently mask missing configuration in production. Update .env.example to document VITE_BACKEND_URL=http://localhost:8000 and ensure deployment documentation explicitly requires this variable to be set.
🤖 Prompt for AI Agents
In `@frontend/src/Components/President/PresidentDashboard.jsx` around lines 4 - 5,
The project still reads Vite env var VITE_BACKEND_URL (see API_BASE_URL constant
in PresidentDashboard.jsx) but .env.example and docs reference the old CRA
variable; update .env.example to include VITE_BACKEND_URL=http://localhost:8000
(and a short comment) and update deployment documentation to require
VITE_BACKEND_URL to be set in production, removing or converting any
REACT_APP_BACKEND_URL references so the Vite variable name matches the runtime
code.
There was a problem hiding this comment.
@gmarav05 Yes, updating .env.example is definitely the right move! Since you've migrated the codebase to Vite, the environment variable names in your example file should match what the code actually expects.
You'll want to update all the REACT_APP_* variables in frontend/.env.example to VITE_*:
REACT_APP_BACKEND_URL→VITE_BACKEND_URLREACT_APP_FIREBASE_API_KEY→VITE_FIREBASE_API_KEYREACT_APP_FIREBASE_AUTH_DOMAIN→VITE_FIREBASE_AUTH_DOMAIN
Would you like me to help plan these changes? I can generate the updated .env.example file for you—just let me know! 🚀
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@frontend/.env.example`:
- Around line 1-2: Add a trailing newline to the .env example so dotenv-linter
stops flagging it: open frontend/.env.example and ensure the file ends with a
single blank line (i.e., a newline character after the last line containing
VITE_GOOGLE_CLIENT_ID=your_google_client_id_here) so the environment variables
VITE_BACKEND_URL and VITE_GOOGLE_CLIENT_ID are followed by a final newline.
🧹 Nitpick comments (1)
frontend/index.html (1)
10-13: Update the meta description to remove CRA default text.This still says “create-react-app,” which is now stale after the Vite migration.
✏️ Suggested tweak
- <meta - name="description" - content="Web site created using create-react-app" - /> + <meta + name="description" + content="CoSA ERP" + />
1 participant
name: "Pull Request"
about: Propose and submit changes to the project for review
title: "PR: Migrate frontend from Create React App to Vite"
labels: "enhancement"
assignees: @harshitap1305 @sakshi1755 (not-assigned)
Related Issue
Changes Introduced
vite.config.js) with JSX support for.jsfiles.index.htmlmoved to root and converted from CRA to Vite format.module.exportsconverted to ES module syntax (export/import).REACT_APP_*toVITE_*prefix.package.jsonscripts to use Vite (dev,build,preview).react-scripts).reportWebVitals.js,setupTests.js,App.test.js).%PUBLIC_URL%syntax fromindex.html.Why This Change?
Screenshots / Video (if applicable)
Testing
npm testin the relevant directory).Documentation Updates
README.mdwith new instructions.Checklist
git checkout -b feature/my-amazing-feature).Deployment Notes
💬 Additional Notes
VITE_prefix instead ofREACT_APP_.process.env.REACT_APP_*→import.meta.env.VITE_*..envfiles in all environments.npm run build, output goes tobuild/folder.Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.