feat: Migrate frontend from Create React App to Vite #1607
Conversation
Migrate the Unstract frontend build system from Create React App (react-scripts 5.0.1) to Vite 6.0.5 for improved development experience and build performance. Key Changes: - Replace react-scripts with Vite 6.0.5 and @vitejs/plugin-react 4.3.4 - Move index.html from public/ to root directory - Replace setupProxy.js with Vite proxy configuration - Update environment variables from REACT_APP_* to VITE_* prefix - Configure esbuild to handle JSX in .js files - Add comprehensive migration documentation Build Optimizations: - Manual chunk splitting for react, antd, and pdf vendors - Dependency pre-bundling for faster cold starts - HMR with polling enabled for Docker volume compatibility Documentation: - Add VITE_MIGRATION.md with comprehensive migration guide - Update README.md with Vite-specific configuration and commands - Document environment variable migration and troubleshooting Performance Benefits: - Development server startup: 10-30s → 1-2s - Hot Module Replacement: 2-5s → <1s - Production build time: 60-120s → 30-60s 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
…ports The codebase extensively uses SVG imports with ?react query syntax (39 imports in src/assets/index.js). vite-plugin-svgr is required to transform these imports into React components. Changes: - Add vite-plugin-svgr@^4.5.0 to devDependencies - Restore svgr plugin in vite.config.js - Add vite-plugin-svgr type references in vite-env.d.ts - Remove conflicting public/index.html from CRA migration Fixes white screen issue caused by SVG components failing to render. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Summary by CodeRabbit
WalkthroughSwitches the frontend from Create React App to Vite: updates build tooling, scripts, env var usage (REACT_APP_* → VITE_* with fallbacks), introduces Vite config and typings, adjusts asset imports and HTML entry, removes CRA proxy, and adds runtime-config injection and migration docs. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
rect rgba(200,230,255,0.20)
Note over Dev,Browser: Old flow (CRA)
Dev->>CRA Dev Server: npm start (react-scripts)
CRA Dev Server->>Browser: serves app + HMR
Browser->>CRA Dev Server: /api/v1 requests
CRA Dev Server->>setupProxy.js: forward to REACT_APP_BACKEND_URL
end
rect rgba(220,255,200,0.20)
Note over Dev,Browser: New flow (Vite)
Dev->>Vite Dev Server: npm run dev (vite)
Vite Dev Server->>Browser: serves app (native ESM/HMR)
Browser->>Vite Dev Server: /api/v1 requests
Vite Dev Server->>VITE_BACKEND_URL: proxy (configured in vite.config.js, conditional)
end
sequenceDiagram
autonumber
participant Docker as Docker build
participant Nginx as Nginx (runtime)
participant Browser as Browser
rect rgba(255,245,200,0.20)
Note over Docker,Nginx: Runtime config injection
Docker->>Docker: run generate-runtime-config.sh (VITE_ preferred, REACT_APP_ fallback)
Docker->>Docker: sed inject runtime-config.js tag into index.html
Docker->>Nginx: copy built assets + runtime-config.js
Nginx->>Browser: serve index.html + runtime-config.js
Browser->>Browser: app loads runtime config at startup
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–30 minutes Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ 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: 1
🧹 Nitpick comments (4)
docker/dockerfiles/frontend.Dockerfile (1)
53-54: LGTM! Runtime config injection strategy is sound.The
sedcommand correctly injects the runtime-config.js script into the built index.html's<head>section. This ensureswindow.RUNTIME_CONFIGis available before the application modules execute.Note: The
\nmay not produce an actual newline in Alpine'ssed, resulting in the injected script on the same line as</head>. This doesn't affect functionality, but if formatting is important, consider using a literal newline:-RUN sed -i 's|</head>| <script src="/config/runtime-config.js"></script>\n </head>|' /usr/share/nginx/html/index.html +RUN sed -i 's|</head>| <script src="/config/runtime-config.js"></script>\ + </head>|' /usr/share/nginx/html/index.htmlfrontend/vite.config.js (1)
44-48: Consider renaming WDS_SOCKET_PORT to align with Vite conventions.
WDS_SOCKET_PORTis a webpack-dev-server (CRA) specific variable name. For consistency with the Vite migration and to avoid confusion, consider renaming it toVITE_HMR_CLIENT_PORTor similar.Apply this diff to use a Vite-aligned variable name:
hmr: { port: 3000, - clientPort: env.WDS_SOCKET_PORT ? Number(env.WDS_SOCKET_PORT) : 3000, + clientPort: env.VITE_HMR_CLIENT_PORT ? Number(env.VITE_HMR_CLIENT_PORT) : 3000, },Note: If keeping
WDS_SOCKET_PORTfor backward compatibility is intentional, document this decision and consider adding support for both variable names during a transition period.frontend/docs/VITE_MIGRATION.md (1)
29-47: Add language specifiers to fenced code blocks.For better syntax highlighting and markdown quality, specify the language for the fenced code blocks.
Apply these diffs:
For the file structure block (line 29):
-``` +```plaintext Before (CRA): frontend/For the environment variable mapping block (line 54):
-``` +```bash REACT_APP_BACKEND_URL → VITE_BACKEND_URL REACT_APP_ENABLE_POSTHOG → VITE_ENABLE_POSTHOGBased on static analysis hints.
Also applies to: 54-59
frontend/README.md (1)
508-527: Add language specifier to fenced code block.For better markdown quality and syntax highlighting, specify the language for the project structure code block.
Apply this diff:
-``` +```plaintext frontend/ ├── docs/ # Documentation filesBased on static analysis hints.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to Reviews > Disable Cache setting
Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (14)
.gitignore(1 hunks)docker/dockerfiles/frontend.Dockerfile(3 hunks)frontend/README.md(2 hunks)frontend/docs/VITE_MIGRATION.md(1 hunks)frontend/generate-runtime-config.sh(1 hunks)frontend/index.html(1 hunks)frontend/package.json(2 hunks)frontend/src/assets/index.js(1 hunks)frontend/src/config.js(1 hunks)frontend/src/helpers/SocketContext.js(1 hunks)frontend/src/index.jsx(1 hunks)frontend/src/setupProxy.js(0 hunks)frontend/vite-env.d.ts(1 hunks)frontend/vite.config.js(1 hunks)
💤 Files with no reviewable changes (1)
- frontend/src/setupProxy.js
🧰 Additional context used
🪛 LanguageTool
frontend/README.md
[grammar] ~1-~1: Ensure spelling is correct
Context: # Unstract Frontend The Unstract frontend is buil...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[uncategorized] ~78-~78: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... - Lightning-fast HMR (updates without full page reload) - On-demand compilation - E...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
🪛 markdownlint-cli2 (0.18.1)
frontend/docs/VITE_MIGRATION.md
29-29: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
54-54: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
frontend/README.md
508-508: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
🔇 Additional comments (16)
.gitignore (1)
715-718: Clear and well-placed addition for MCP server configuration.The
.serenaentry is appropriately ignored as part of the MCP (Model Context Protocol) infrastructure, and the placement under the Windsurf section maintains logical organization. The comment provides helpful context.frontend/vite-env.d.ts (1)
1-2: LGTM! Standard Vite TypeScript declarations.The triple-slash references correctly provide ambient types for Vite's client APIs and the SVGR plugin, enabling TypeScript support for
import.meta.envand SVG imports with the?reactsuffix.frontend/src/index.jsx (1)
12-12: LGTM! Correct environment variable migration.The PostHog enablement flag correctly migrates from CRA's
process.env.REACT_APP_*to Vite'simport.meta.env.VITE_*pattern. The conditional logic is preserved.frontend/src/helpers/SocketContext.js (1)
18-19: LGTM! Correct Vite environment variable migration.The environment checks properly migrate to Vite's conventions:
NODE_ENV→MODEREACT_APP_BACKEND_URL→VITE_BACKEND_URLThe logic correctly handles both undefined MODE and explicit "development" mode.
frontend/generate-runtime-config.sh (1)
7-19: LGTM! Excellent backward compatibility approach.The script correctly implements a fallback chain from
VITE_*toREACT_APP_*environment variables using proper shell parameter expansion. This ensures smooth transition during migration while maintaining compatibility with existing deployments.frontend/index.html (1)
1-16: LGTM! Correct Vite HTML structure.The HTML correctly adapts to Vite's conventions:
- Removed CRA's
%PUBLIC_URL%placeholder in favor of absolute paths- Added module script pointing to
/src/index.jsx(Vite's entry point)- Removed inline runtime config (now injected by Docker for production)
The runtime config injection happens in the Dockerfile before the app bundle loads, ensuring
window.RUNTIME_CONFIGis available when needed.frontend/src/config.js (1)
14-21: LGTM! Correct environment variable migration with preserved fallback chain.The configuration correctly migrates to Vite's
import.meta.env.VITE_*pattern while maintaining the established priority order:
- Runtime config (for containers)
- Environment variables (for development)
- Default values (fallback)
docker/dockerfiles/frontend.Dockerfile (1)
26-26: LGTM! Correct environment variable for Vite.The empty
VITE_BACKEND_URLat build time is correct—the actual backend URL will be determined at runtime based on the deployment environment.frontend/src/assets/index.js (1)
1-38: LGTM! Correct SVG import migration for Vite.All SVG imports correctly migrate to the
?reactsuffix pattern used byvite-plugin-svgr. The pattern is consistently applied across all 38 imports, and the exported identifiers remain unchanged, preserving the public API.frontend/vite.config.js (3)
12-26: LGTM! JSX handling in .js files configured correctly.The combination of React plugin inclusion patterns and ESBuild loader configuration properly handles JSX syntax in both
.jsxand.jsfiles, which is essential for CRA migrations where JSX in.jsfiles is common.
59-81: LGTM! Well-structured build configuration.The build configuration includes sensible optimizations:
- Custom output directory maintains compatibility with existing infrastructure
- Manual chunk splitting strategy improves caching by separating frequently-updated code from stable vendor libraries
- Logical grouping of related vendor dependencies (React, Ant Design, PDF libraries)
92-95: LGTM! Compatibility shim for libraries.The
process.env: {}shim maintains compatibility with libraries that expectprocess.envto exist, which is a common requirement during CRA-to-Vite migrations.frontend/package.json (2)
57-69: LGTM! Scripts properly updated for Vite.The script configuration correctly:
- Provides both
devandstartcommands pointing to Vite for flexibility- Uses
vite buildfor production builds- Replaces Jest with Vitest for testing
- Adds
previewfor testing production builds locally- Appropriately removes the CRA-specific
ejectcommand
82-94: LGTM! Dependencies correctly updated for Vite ecosystem.The devDependencies reflect a complete migration to Vite tooling with appropriate plugin versions for React support, SVG handling, and testing via Vitest.
frontend/docs/VITE_MIGRATION.md (1)
1-368: LGTM! Excellent comprehensive migration guide.This documentation provides thorough coverage of the CRA-to-Vite migration including:
- Clear before/after comparisons for configuration and code
- Environment variable migration mapping with examples
- Docker-specific considerations and solutions
- Performance optimizations with explanations
- Troubleshooting section for common issues
This will be valuable for developers working with the migrated codebase.
frontend/README.md (1)
237-377: LGTM! Comprehensive Docker and performance documentation.The documentation thoroughly covers:
- Docker development workflow with HMR support
- Production build process and optimizations
- Runtime configuration injection mechanism
- Performance improvements with specific metrics
- Chunk splitting strategy and benefits
This provides valuable context for both development and production deployments.
…ntation The README documentation showed incorrect HMR clientPort configuration using process.env instead of the env variable from loadEnv. Changes: - Update clientPort example to use env.WDS_SOCKET_PORT (not process.env) - Change from falsy coalescing to explicit conditional check - Ensure documentation matches vite.config.js implementation Addresses CodeRabbit feedback on PR #1607. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
frontend/README.md (1)
508-526: Add language specifier to fenced code block.The tree-structure code block at line 508 lacks a language specifier. Markdown linters require all fenced code blocks to declare a language for proper syntax highlighting and lint compliance.
Apply this diff to specify the language:
-``` +```text frontend/ ├── docs/ # Documentation files
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to Reviews > Disable Cache setting
Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting
📒 Files selected for processing (1)
frontend/README.md(2 hunks)
🧰 Additional context used
🪛 LanguageTool
frontend/README.md
[grammar] ~1-~1: Ensure spelling is correct
Context: # Unstract Frontend The Unstract frontend is buil...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[uncategorized] ~78-~78: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... - Lightning-fast HMR (updates without full page reload) - On-demand compilation - E...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
🪛 markdownlint-cli2 (0.18.1)
frontend/README.md
508-508: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (1)
frontend/README.md (1)
315-329: ✓ HMR configuration now consistent with implementation.The HMR configuration example at line 326 now correctly uses
env.WDS_SOCKET_PORT ? Number(env.WDS_SOCKET_PORT) : 3000and matches the actual vite.config.js implementation. The previous inconsistency flagged in earlier reviews has been resolved.
…mentation The README proxy configuration example incorrectly used process.env instead of the env variable from loadEnv. Changes: - Update proxy target to use env.VITE_BACKEND_URL (not process.env) - Ensure documentation matches vite.config.js implementation - Maintain consistency across all Vite configuration examples Addresses CodeRabbit critical feedback on PR #1607. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <[email protected]>
Test ResultsSummary
Runner Tests - Full Report
SDK1 Tests - Full Report
|
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/README.md (1)
508-526: Add language identifier to fenced code block.The project structure diagram lacks a language specifier for the code fence, which may cause rendering or linting issues.
Apply this diff to specify the language as
text:-``` +```text frontend/ ├── docs/ # Documentation files │ └── VITE_MIGRATION.md # Vite migration guide ├── public/ # Static assets (served as-is) │ ├── manifest.json │ └── robots.txt ├── src/ # Source code │ ├── assets/ # Images, fonts, etc. │ ├── components/ # Reusable React components │ ├── helpers/ # Utility functions and helpers │ ├── pages/ # Page components │ ├── config.js # App configuration │ └── index.jsx # Application entry point ├── index.html # HTML entry point (Vite) ├── vite.config.js # Vite configuration ├── package.json # Dependencies and scripts └── .env # Environment variables (VITE_ prefix) -``` +```
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to Reviews > Disable Cache setting
Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting
📒 Files selected for processing (1)
frontend/README.md(2 hunks)
🧰 Additional context used
🪛 LanguageTool
frontend/README.md
[grammar] ~1-~1: Ensure spelling is correct
Context: # Unstract Frontend The Unstract frontend is buil...
(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)
[uncategorized] ~78-~78: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... - Lightning-fast HMR (updates without full page reload) - On-demand compilation - E...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
🪛 markdownlint-cli2 (0.18.1)
frontend/README.md
508-508: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (3)
frontend/README.md (3)
1-6: Documentation comprehensively covers the Vite migration.The README clearly documents the transition from CRA to Vite with accurate environment variable patterns, Docker setup, HMR configuration, and a helpful migration checklist. Examples at lines 188 (proxy target) and 326 (HMR clientPort) correctly use Vite's
envpattern fromloadEnv()rather thanprocess.env.
27-43: Environment variable setup section is clear and well-structured.The quick-start guidance correctly emphasizes the
VITE_prefix requirement and provides concrete examples for.envconfiguration. This aligns well with the migration objectives and helps prevent a common source of confusion for developers transitioning from CRA.
443-460: Migration checklist is thorough and actionable.The checklist at lines 452–460 covers the critical breaking changes: environment variables,
import.meta.envusage, SVG imports, HTML paths, proxy setup, and HMR testing. This proactively addresses the most common migration pain points and reduces support burden.
hari-kuriakose
requested review from
jagadeeswaran-zipstack,
jaseemjaskp and
vishnuszipstack
Summary
This PR migrates the Unstract frontend from Create React App (CRA) to Vite for improved development experience, faster build times, and better performance. The migration includes comprehensive configuration updates, Docker compatibility fixes, and documentation.
Key Changes
react-scriptswith Vite 6.0.5 and@vitejs/plugin-reactvite.config.jswith optimized proxy, HMR, and chunk splittingREACT_APP_*toVITE_*prefixindex.htmlto root, removedsetupProxy.jsvite-plugin-svgrfor SVG-as-React-component importsPerformance Improvements
Docker Compatibility
Breaking Changes
Environment Variables
All environment variables must now use
VITE_prefix:Code Changes
Files Changed
vite.config.js,vite-env.d.ts, updatedpackage.jsondocker/dockerfiles/frontend.Dockerfileandgenerate-runtime-config.shfrontend/docs/VITE_MIGRATION.mdwith comprehensive guidepublic/index.htmlto root, removedsetupProxy.jspackage-lock.json, added Vite toolingTesting Checklist
npm start/npm run dev)npm run build)VITE_prefixDocumentation
Comprehensive migration guide added at
frontend/docs/VITE_MIGRATION.mdcovering:Deployment Notes
Required Actions Before Deployment:
.envfiles to useVITE_prefixCommits
[FEAT] Migrate frontend from Create React App to Vite- Core migrationfix(frontend): Restore vite-plugin-svgr for SVG-as-React-component imports- SVG support fix🤖 Generated with Claude Code
Co-Authored-By: Claude [email protected]