This page covers the toolchain used to build, lint, format, and serve the Langflow React frontend. It describes the Vite build configuration, npm scripts, Tailwind CSS setup, and Biome for code quality, as well as how the compiled output is picked up and served by the Python backend. For information on what the frontend does at runtime—routing, state management, and components—see the frontend architecture pages starting at Frontend Architecture. For Makefile targets that wrap these npm and build commands, see Makefile Commands.
The frontend lives entirely under src/frontend/. It is a React 19 + TypeScript application bundled by Vite. The build produces static assets that the FastAPI backend mounts and serves directly. The pipeline has four main concerns:
| Concern | Tool | Version |
|---|---|---|
| Module bundling & dev server | Vite | ^7.3.1 |
| TypeScript transpilation | SWC (via @vitejs/plugin-react-swc) | ^4.2.2 |
| CSS utility framework | Tailwind CSS | ^3.4.4 |
| Linting & formatting | Biome | 2.1.1 |
| Unit testing | Jest + ts-jest | ^30.0.3 / ^29.4.0 |
Node.js ≥ 20.19.0 is required, as declared in src/frontend/package.json5-7
Diagram: Vite Build Pipeline — Source to Served Assets
Sources: src/frontend/package.json109-177 Makefile21-116 src/backend/base/langflow/main.py1-30
src/frontend/index.html as the entry point.src/frontend/build/.build_frontend target then places the built assets into src/backend/base/langflow/frontend/, which is the path passed via --frontend-path to the langflow run command.clean_frontend_build clears both src/frontend/build and src/backend/base/langflow/frontend to guarantee a fresh build Makefile110-116Three Vite plugins are declared as devDependencies in src/frontend/package.json127-177:
| Plugin | Purpose |
|---|---|
@vitejs/plugin-react-swc | Compiles JSX/TSX using Rust-based SWC instead of Babel |
vite-plugin-svgr | Allows SVG files to be imported as React components |
vite-tsconfig-paths | Resolves TypeScript path aliases (@/...) inside Vite |
During development (npm run start), Vite proxies API requests to http://localhost:7860, matching the default backend port. This is declared in src/frontend/package.json139 under the proxy key.
The dev:docker script variant (vite --host 0.0.0.0) binds the dev server to all interfaces for container use src/frontend/package.json107
All scripts are defined in src/frontend/package.json106-126
| Script | Command | Purpose |
|---|---|---|
start | vite | Local dev server with HMR |
dev:docker | vite --host 0.0.0.0 | Dev server accessible from outside container |
build | vite build | Production bundle to build/ |
serve | vite preview | Preview the production build locally |
test | jest | Run unit tests |
test:coverage | jest --coverage | Run tests with coverage report |
test:watch | jest --watch | Watch mode for unit tests |
format | npx @biomejs/biome format --write | Auto-format all source files |
lint | npx @biomejs/biome lint | Lint without auto-fix |
lint:types | npx @biomejs/biome lint --diagnostic-level=error | Lint, error-level only |
lint:types:staged | npx @biomejs/biome lint --staged ... | Lint only staged files (pre-commit) |
check-format | npx @biomejs/biome check | Check formatting without writing |
type-check | tsc --noEmit ... && vite | TypeScript type checking |
storybook | storybook dev -p 6006 | Component explorer on port 6006 |
build-storybook | storybook build | Build static Storybook site |
Diagram: CSS Architecture — Files and Processing Chain
Sources: src/frontend/tailwind.config.mjs1-10 src/frontend/src/style/index.css1-50 src/frontend/src/style/applies.css1-17 src/frontend/src/App.css1-10
Declared as devDependencies and imported in tailwind.config.mjs:
| Plugin | Purpose |
|---|---|
@tailwindcss/forms | Base styles for form elements |
@tailwindcss/typography | Prose/markdown typography utilities |
@tailwindcss/container-queries | Container-query based responsive utilities |
tailwindcss-animate | Animation utilities (used by Radix UI transitions) |
tailwindcss-dotted-background | Dotted canvas background pattern |
The design token layer is defined as CSS custom properties in src/frontend/src/style/index.css:
:root {} contains light-mode values for all design tokens..dark {} overrides those tokens for dark mode.--background, --foreground, --muted, --muted-foreground, --card, --border, --primary, --secondary, --accent, --destructive, --ring, etc.bg-background or text-foreground resolve to the correct value for each mode.src/frontend/src/style/index.css8-50 shows the light-mode token values; the dark section follows and overrides them.
applies.csssrc/frontend/src/style/applies.css defines reusable Tailwind component classes using @apply. Examples include:
.primary-input — styled text input.side-bar-arrangement — sidebar layout container.border-ring-frozen — visual state for frozen nodes.frozen — glassmorphism overlay for frozen node stateThese classes can be used directly in component JSX as className strings.
src/frontend/src/utils/styleUtils.ts85-134 defines nodeColors, a map from component category names (e.g. "inputs", "models", "agents") to hex color values. These are used in the visual flow editor to color-code node handle ports and borders. nodeColorsName src/frontend/src/utils/styleUtils.ts136-189 provides the corresponding Tailwind color-name equivalents.
Biome replaces both ESLint and Prettier for the frontend codebase. It is declared as a devDependency at version 2.1.1 in src/frontend/package.json141 and configured in src/frontend/biome.json.
Biome is a single binary that performs both linting and formatting in one pass, making it significantly faster than running the two tools separately.
The Makefile exposes two frontend code-quality targets:
| Makefile Target | Command | Effect |
|---|---|---|
format_frontend | (calls npm format script) | Formats all files in src/frontend |
format_frontend_check | cd src/frontend && npx @biomejs/biome check | Checks formatting without writing changes |
format | format_backend format_frontend | Formats both Python and TypeScript |
Pre-commit and CI stages run biome check to enforce formatting. The lint:types:staged script targets only staged files to give fast feedback in a pre-commit hook context.
Unit tests use Jest with the jsdom environment. Configuration is referenced from src/frontend/package.json128-132:
| Package | Purpose |
|---|---|
jest | Test runner |
jest-environment-jsdom | Browser-like DOM environment |
ts-jest | TypeScript transformer for Jest |
@swc/core + @swc/cli | Fast SWC-based transpilation (alternative transformer) |
@testing-library/react | React component rendering utilities |
@testing-library/jest-dom | Custom DOM matchers |
@testing-library/user-event | User interaction simulation |
jest-junit | JUnit XML output for CI reporting |
Test files live under src/frontend/src/ and follow the *.test.ts(x) naming convention.
Running npm run test:coverage generates a coverage report. For end-to-end tests with Playwright, see CI Pipeline.
Once built, the frontend is served by FastAPI as static files. The flow is:
langflow run --frontend-path <dir> passes the build output directory to the server.setup_app() in src/backend/base/langflow/main.py mounts the directory with StaticFiles.JavaScriptMIMETypeMiddleware src/backend/base/langflow/main.py105-117 intercepts responses for .js files and ensures the Content-Type header is set to text/javascript. This is required because some system-level MIME type databases misidentify .js as text/plain.index.html, enabling React Router's client-side navigation.Diagram: How FastAPI Serves Frontend Assets
Sources: src/backend/base/langflow/main.py105-127 Makefile236-254
All JavaScript dependencies are managed by npm. The lockfile src/frontend/package-lock.json is committed to the repository and uses lockfile version 3.
Key production dependencies relevant to the build pipeline:
| Package | Role |
|---|---|
esbuild | Low-level bundler used by Vite internally |
dotenv | Environment variable loading |
vite-tsconfig-paths | Alias resolution (@/ → src/) |
The Makefile targets install_frontend and clean_npm_cache manage the npm install lifecycle Makefile103-108
To clean all frontend artifacts and start fresh:
make clean_frontend_build # removes src/frontend/build and src/backend/base/langflow/frontend
make clean_npm_cache # also removes node_modules and package-lock.json
Refresh this wiki
This wiki was recently refreshed. Please wait 3 days to refresh again.